This site was created as an entry for the Dev Unplugged competition. It shows off the new hardware accelerated HTML5 canvas elements that are included in Internet Explorer 9.
If you like the site, please vote for it at Dev Unplugged
About Mike the Tike
About the Gravity
When I came up with this idea, I looked at the other entries and none of them seemed to be doing particles. I thought that shooting comets around a solar system would be pretty neat, little did I know that I would run into the N-Body problem (which as it turns out is unsolvable).
Continuing anyway, I started thinking of various other ways of approximating the gravity. I decided to render the gravitational field onto an Image as a height map so that I would only have to do the calculation once (kind of like these pictures and these as well). Then, I'd render the fields on top of each other, adding the heights. This ended up being pretty easy (and done by the graphics card) using the canvaselement and the globalCompositionMethod of lighter.
The problem then came in with reading the data from the canvas. I liked the canvas idea because of the getImageData() that it exposes. Unfortunately, this method call is EXTREMELY slow, especially in Internet Explorer. To reduce the number of calls I read out the entire picture at each game loop and then do the slope calculations from there.
A big part of this application's success relied on the ability to draw a large amount of sprites at a time (around 2000 was the goal). Thanks to the perfomance improvements in Internet Explorer, Chrome and Firefox, this was possible. Unfortunately, there seems to be some bugs in their implementations when globalCompositionMethod is used. Firefox threw a serious error when drawing off the edge of the canvas (or even close to it). The fix I made for Firefox then slowed down Chrome.