This is a simulation of a double pendulum system implemented in HTML5. You can drag the pendulum bobs around to set the starting positions. The orange circles are draggable handles that represent each bob’s angular velocity. You can also directly set the values using the controls on the left. Set the pendulum colors with the color inputs.
The “Run” button starts the simulation, the “Clear” button will erase the traces, and the “Save” button will let you save the traces as a PNG image.
The angles and angular velocity are in degrees.
September 23rd, 2011 on 1:36 pm
Nice. Might want to check your integration technique though, it doesn’t seem to conserve normal modes too well.
September 26th, 2011 on 12:28 am
Thanks!
Yeah, I didn’t do much to reduce numerical drift. I was more interested in how the animation and UI integration worked in HTML5 as opposed to Flash, and what the performance was like on mobile devices. This was originally a Flash demo I wrote years ago when I was an undergrad. Someday I’ll have to come back to it and shore up the math, but it’s not a high priority.
October 25th, 2011 on 11:17 am
Couldn’t get it to work in IE. Oh well.
October 25th, 2011 on 9:32 pm
IE before version 9 didn’t support the canvas element that I used for the graphics. I used some javascript that is supposed to load a plugin so that the canvas tag works in IE 8 and 7, but I guess it doesn’t work correctly. I don’t have a windows computer to test it on, so thanks for letting me know.
March 19th, 2012 on 6:56 am
30fps with Safari on iPad 1
Nice demo! Would love to be able to do it too :’(