
Double Pendulum in fewer than 100 lines of JavaScript - phybox
http://www.physicsandbox.com/projects/double-pendulum.html
======
throwaway283719
Interesting thing about the double pendulum - it is _very_ difficult to get
the numerical integration correct, even using very high order integrators like
RK4. The simple Euler integrator used here has no hope of getting it right
(not a criticism, just an observation!)

The problem is that the double pendulum equations (in fact, any equations of
motion derived from a Hamiltonian) have symplectic structure, i.e. they have
conserved quantities. One of the conserved quantities is the total energy of
the system.

When you discretize the equations to simulate them on a computer, you lose
this conservation property (due to discretization error - nothing to do with
floating point). The structure of the equations means that the total energy
becomes an increasing quantity in time, so you tend to see the simulated
system "speed up" or become more energetic as the simulation progresses. The
error builds up in the same direction over time - exactly what you don't want!

The simplest example is the harmonic oscillator, with second-order equation of
motion

    
    
      x'' = -x
    

which gives the first order equations in terms of position x and momentum p

    
    
      x' =  p
      p' = -x
    

which conserve the total energy 0.5 * (x^2 + p^2). Discretizing these using a
first-order forwards Euler scheme

    
    
      x(t+1) = x(t) + p(t) * dt
      p(t+1) = p(t) - x(t) * dt
    

you can see that the total energy changes on each time step to

    
    
      x(t+1)^2 + p(t+1)^2 = x(t)^2 + 2 x(t) p(t) dt + x(t)^2 dt^2 + p(t)^2 - 2 x(t) p(t) dt + p(t)^2 dt^2
                          = (1 + dt^2) (x(t)^2 + p(t)^2)
    

so the total energy increases by a factor of (1 + dt^2) each step. Over time,
the total energy increases exponentially.

The solution is to use a _geometric_ or _sympletic_ integrator which
explicitly takes into account the symplectic structure, producing a set of
discrete update equations which still conserve a total energy quantity.

[0]
[http://en.wikipedia.org/wiki/Symplectic_integrator](http://en.wikipedia.org/wiki/Symplectic_integrator)

~~~
murbard2
Leapfrog integration will also get you conservation of energy.

See this thesis: [http://umu.diva-
portal.org/smash/get/diva2:140361/FULLTEXT01...](http://umu.diva-
portal.org/smash/get/diva2:140361/FULLTEXT01.pdf)

the basis for this awesome physics simulator:
[http://www.algodoo.com/](http://www.algodoo.com/)

Conservation of the hamiltonian with leapfrog integration is also the
principle behind Hybrid Monte Carlo methods
[http://www.mcmchandbook.net/HandbookChapter5.pdf](http://www.mcmchandbook.net/HandbookChapter5.pdf)

~~~
vanderZwan
That thesis looks insteresting, but is also 472 pages. Is there a TL;DR
version?

------
fjarlq
Cool.

Feature request: mount the pivot on a programmable cart. It'd be fun to write
software to balance the double pendulum.

e.g.
[https://www.youtube.com/watch?v=B6vr1x6KDaY](https://www.youtube.com/watch?v=B6vr1x6KDaY)

and, balancing a triple pendulum: [https://www.youtube.com/watch?v=cyN-
CRNrb3E](https://www.youtube.com/watch?v=cyN-CRNrb3E)

~~~
pavel_lishin
I feel like we ought to be burning someone as a witch after watching that.

------
flannelhead
Very nice simulation you've got there! I also did a triple pendulum in JS a
while ago. Quite a lot more than 100 lines of code, though. The equations of
motion alone take up lots and again lots of space. (Imagine typing them in! I
don't even dare to think about adding a fourth degree of freedom)
[http://users.jyu.fi/~samakapa/triplependulum/](http://users.jyu.fi/~samakapa/triplependulum/)

My dynamics course teacher actually showed that the double pendulum can be
linearized by some approximations (throwing out some negligible terms, small
angle approximations etc.), and that way two modes of oscillation could be
found: antisymmetric and symmetric oscillation. Just try with small initial
angles with OP's script and you'll see.

~~~
cyphar
... that pendulum doesn't mirror reality at all. It's as though the first mass
is constantly being accelerated by something other than gravity.

~~~
flannelhead
First mass counting from which end? The masses are accelerated by each other
as there are rigid rods between them.

The lack of friction and the perfectly rigid coupling between the joints might
be what makes it seem lacking reality. If we'd extend the chain with more
links, the motion of the outermost mass would become more and more
unpredictable due to extreme acceleration.

Of course I might have made a mistake somewhere, but I checked that energy is
conserved between the frames of the animation (excluding minor energy drift
due to the numerical integration).

------
ApiM
The Nature of Code by Daniel Shiffman is a free (pay what you want) open
source ebook about simulating natural systems.

The first five chapters are about physical systems like this pendulum while
the remaining chapters are mostly AI related.

The book use Processing but the concepts are language agnostic:
[http://natureofcode.com/book/](http://natureofcode.com/book/)

------
dllu
I did this about a year ago:
[http://www.dllu.net/dp/](http://www.dllu.net/dp/)

It barely exceeds 100 lines of js though...

I have a whole bunch of similar physics simulators here:
[http://www.dllu.net/programming/physics/](http://www.dllu.net/programming/physics/)

~~~
rullelito
Well, your code does not seem to work like the real world. I maxed the first
scrollbar, and it does not look good.

~~~
dllu
There are some numerical instabilities in my code. Theoretically the
integrator I'm using (the RK4 [0]) should be a lot more accurate than the
Euler's method that OP is using, but I probably have a poor choice of
parameters and/or a bug somewhere.

In any case, when you max out the first scrollbar, then m_1/M_1 approaches
zero. Then the denominators of the Lagrange equation will be close to zero
when \theta_1 is close to \theta_2. Thus things become unstable.

Anyway, a symplectic integrator [1] would be more suitable for this problem,
since it has the beautiful property of conserving energy.

[0]
[https://en.wikipedia.org/wiki/RK4#The_Runge.E2.80.93Kutta_me...](https://en.wikipedia.org/wiki/RK4#The_Runge.E2.80.93Kutta_method)
[1]
[https://en.wikipedia.org/wiki/Symplectic_integrator](https://en.wikipedia.org/wiki/Symplectic_integrator)

~~~
simias
I agree with the parent, I think you must have a bug somewhere. For many
positions of the sliders the movement seems very erratic, the pendulums
suddenly bounce back or accelerate without any apparent reason. Especially
when you start moving the top slider to the right (though not necessarily all
the way to the right).

Or maybe I just don't understand how double pendulums work...

------
pbhjpbhj
Would be even better, IMO, with a line in the simulation showing the path
traced by each pendulum over time, preferably the arcs drawn could phase
through different colours (and possibly decay in visibility). Nice work
though.

~~~
Bakkot
I did basically this in my first year of college! See [1].

(Note: code was never intended to be visible to the public, and this is old
and bad. But hey, it works!)

[http://kevingibbons.org/doublependulum.html](http://kevingibbons.org/doublependulum.html)

~~~
leni536
Your simulation has a "Daming factor"

~~~
Bakkot
... Well that's an ancient typo. Corrected, thanks.

------
codezero
I remember when I first learned about the Lagrangian, and my mind was blown
that really complicated problems could be wrangled so easily. Thanks for
sharing this :)

~~~
randlet
Me too. Lagrangian mechanics are almost the only thing about my physics
undergrad where I still recall thinking "wow this is awesome!"

~~~
nileshtrivedi
Where can I find a good introduction to Lagrangian mechanics?

~~~
ivan_ah
I highly recommend _Classical Mechanics_ by Goldstein et al.

[http://www.abebooks.com/9780201657029/Classical-Mechanics-
Go...](http://www.abebooks.com/9780201657029/Classical-Mechanics-Goldstein-
Herbert-Poole-0201657023/plp)

------
ShardPhoenix
You can get a vigorous chaotic motion going with a high top mass, low bottom
mass, and high angles.

~~~
grimtrigger
That was certainly my goal =)

1\. Max Mass 1

2\. Min Mass 2

3\. Max Phi 1

4\. Min Phi 2

~~~
aceperry
Just the opposite, and you get a "hinky" kind of motion.

------
zaroth
I was playing with the gauges in the simulator, and noticed certain values
will create a system where it's possible for the lower pendulum to flip full-
circle around the upper. Other parameters will create a system where that is
clearly impossible. But there are some where it seems like it might be _just
barely possible_ for the lower to complete the loop.

I assume you can plot the y-axis position of the pendulums over time easily
enough, and detect cross-overs... How would you discover the set of inputs
where cross-overs will happen, but most infrequently?

------
aceperry
I remember about 3-4 years ago, a couple of programmers talking. One said to
the other, "you know, javascript is getting respectable now." I'm blown away
by how such a complicated system can be described and implemented in so few
lines of code. When I went to school, seriously complicated programs took a
lot of time to write and render. The easy way involved Matlab because it had a
lot of graphics libraries. It looks like javascript really has turned the
corner into becoming a language with serious possibilities.

------
r4pha
If you're interested in simulations in javascript, I wrote a small blog post
and a toy project [0] about it. I would love some feedback!

[0]: [http://rbaron.net/blog/2014/01/02/Simulating-dynamic-
systems...](http://rbaron.net/blog/2014/01/02/Simulating-dynamic-systems-in-
javascript.html)

------
callumprentice
I _love_ these short JavaScript examples that even idiots like me can
experiment with. Thank you for sharing.

I hacked together a WebGL version here:

[https://dl.dropboxusercontent.com/u/1109/dp/index.html](https://dl.dropboxusercontent.com/u/1109/dp/index.html)

Lots of fun - thank you.

------
epidemian
I really like the simplicity of the demo page:
[http://www.physicsandbox.com/projects/double-pendulum-
sim.ht...](http://www.physicsandbox.com/projects/double-pendulum-sim.html)

Hint: a big Mass1 and Phi1 makes for a nice wobbly configuration.

------
wiso
Very nice simulation, based on this code I have made double Pendulum in fewer
than 100 lines of C#:
[https://github.com/wieslawsoltes/DoublePendulumSim](https://github.com/wieslawsoltes/DoublePendulumSim)

------
chaffneue
Anyone reminded of those pandemonium toys in the 90s? like a pendulum stick
man sort of thing...

[https://www.youtube.com/watch?v=87HvVqa4t7k&t=30s](https://www.youtube.com/watch?v=87HvVqa4t7k&t=30s)

------
callesgg
What is that causes the difference between 2 runs.ww In reality there is lots
of variables but that is not the case here.

Undetermenistic fpu?

------
saganus
Very nice.

It would be cool if you could turn on and off a trail of one mass or the
other.

I bet it can produce some nice spirographic(?) shapes!

------
olaf
Ain't that a chaotic system which is not deterministic?

~~~
gibybo
Chaotic systems are deterministic (as shown by a deterministic computer
algorithm simulating one). They just aren't predictable except by simulating
them (which constrains us by time and accuracy).

~~~
ars
No, that's not it.

Chaotic systems are very sensitive to input conditions, where a tiny change
yields a completely different result.

With a non chaotic system a small change in the input yields are small change
in the output, so it's possible to calculate approximately and get useful
results, not so with Chaotic systems.

~~~
gibybo
I don't think that conflicts with what I said?

~~~
saganus
I don't think it conflicts with it, but I believe the correct explanation has
to do more with tiny changes producing big ramifications than with being
deterministic or not.

That's why the "butterfly effect" is used as an explanation of chaotic systems
(albeit in my opinion a not a very good one).

Edit: changed contradict to conflict

~~~
papaf
For me, the most interesting part of Chaos is that it is deterministic.

~~~
throwaway283719
Meh, it's mathematically deterministic. In reality there is always error
(modelling error, measurement error, simulation error) which means that
chaotic systems are _effectively_ random on long time scales, even though they
are _technically_ deterministic.

~~~
papaf
I would disagree with the phrase "effectively random" because its too general.
Chaotic attractors survive the presence of noise and Chaotic systems look
nothing like random data when viewed in a certain way.

Another way of looking at real systems, is that the system is deterministic
and the errors are random.

------
lessnonymous
Want to play with it? Here's a fiddle:
[http://jsfiddle.net/GBQ44/](http://jsfiddle.net/GBQ44/)

------
skiplecariboo
Nice ! Can you add friction ? :)

------
SimeVidas
Polluting the browser's global environment with variables like "time", "init",
"run", "animate". What can go wrong? :-P

------
CmonDev
Wow, using a high-level scripting language results in short programs?! Who
would've guessed.

