Double Pendulum

I have been experimenting with the new features in HTML5, in part to see how drawing with the canvas compares to Flash. An important thing to test was performance, both drawing speed and raw computation in javascript, so I ported this Flash toy I wrote a few years ago. It's a physics simulation of a double pendulum system. It is interactive, and the line drawing it creates can be exported as a PNG. It pushed the limits of Flash when I first wrote it, but modern platforms should handle it with ease.

How did canvas+JS do? Implementing the export was a lot easier: for the original version I had to write a PNG encoder from scratch in Actionscript! Everything else was harder. Canvas has a feature set similar to Flash 5, so I missed the rich standard library of modern Flash. Using CSS for layout is still inferior to Flex or MinimalComps for GUI design, as any web designer will tell you with even the slightest prompting.

One of the touted appeals of HTML5's canvas is mobile support, but the performance on my Motorola Droid was disappointing. Just clearing the background on a canvas larger than 500x200 dropped the frame rate to single digits, and I couldn't find a reliable way to make the canvas fill the screen if other elements were present (I didn't look too hard, since a canvas that large was unusable). The performance of computation in javascript was fine, so I think the drawing performance was due to the Droid's weak graphics hardware. I've had reports of good performance on iPhones and more recent Android devices.

Embed this on your website! Copy the code below: