Interactive Double Pendulum Playground

It's way off. My first guess was that there was something wrong with the physics code, but after carefully checking against this[1] derivation of the Hamiltonian it seemed fine, and once I wrapped my head around the JavaScript the RK4 integration[2] checked out as well.

So, what else might be wrong I wondered. Well, it seems to move in the wrong direction... so I checked how the pendulum is displayed. And sure enough, I think there's a sign error:

  getUpperBob() {
     const { x0, y0, ang0, l0 } = this;
     const { x, y } = this.calculateBobPosition(x0, y0, ang0, l0);
     return { x, y };
   }

   getLowerBob() {
     const upperBobPos = this.getUpperBob();
     const { ang1, l1 } = this;
     const { x, y } = this.calculateBobPosition(
    upperBobPos.x,
    upperBobPos.y,
    -ang1,
    l1
     );
     return { x, y };
   }

Note how the upper bob uses ang0 while the lower one has -ang1. Meanwhile the physics derivation assumes both angles are against the vertical, so have same sign.

Changing -ang1 to ang1 does indeed make the pendulum move in a natural way, except now dragging it is flipped. Ie you drag it left and it moves right. Another sign error in setLowerBobPos. Fixing that as well it now works as I'd expect.

[1]: https://dassencio.org/46

[2]: https://lpsa.swarthmore.edu/NumInt/NumIntFourth.html##sectio...