I wanted to explain the math-magic of the circle generating the sine wave with a simple animation of a point rotating on the edge and the height matching the sine wave.

I had a look around but most of the math animations are Java applets which I find a bit top heavy, and this should be doable in Javascript.

This is what I came up with, [click to view animation] –

I tried several approaches to get this working, not perfectly happy with any of them, although I did get a basic demo up and running as you see above.

First approach was using SVG, but for some reason I had problems getting svg to appear at all in an html5 page… go figure, this should be simple.   In the process I was impressed by SVGEdit which is an early stage, usable if not polished, in browser SVG editor. cool.. I just couldnt get any of my pages to show svg.  Ill have another go when the frustration has been forgotten, its possibly some syntax glitch I missed.

I then tried RaphaelJS library which did work reasonably well.  Its a nice api.  Some things like animating along a path you get out of the box, which is nice.  After some basic success I did find myself scratching my head on how to rotate a path – and I’m not sure how to apply a rotate transformation to an item generally [which is a cool feature of SVG ].

Partial demo of sine wave animation implemented in Raphael here.  Animates quickly in Safari on mac, Chrome on mac, slightly choppy on Firefox on mac, and quite slow but functional on Safari iPod/webkit.

Wanting a bit more control over exact placement, I decided to try pure HTML5 Canvas rendering.  This worked well, was simpler to understand exact x,y pixel placement.  I haven’t solved a side issue which is that for some reason if I have the preferred HTML5 “<DOCTYPE html>” tag it ignores exact placement of div elements.. finding this side effect drove me nuts!   Im wondering if this is in the spec, it seems it would break a lot of code.

Anyway, layout of the animation was easy in HTML5 canvas.  See sine animation demo here.

It does seem to be busy drawing, and Id like to eliminate back flicker [which you’d normally do by drawing to back buffer, or having dirty regions].  Performs ok on desktop safari, firefox and chrome [which seems fastest of all the browsers].  Comes up on iPhone but animates slowly as you’d expect.

A faster approach might be to render the background into a separate layer and draw the dots and lines per frame, as its probably touching only 1 in 1000 of the total pixels.

Anyway, seems to be a promising way to get Math animations up and running, which fine tuning will improve.  See page source for Javascript, BSD licence, feel free to reuse.