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 are still running Internet Explorer 8 or below, you should download Internet Explorer 9, Firefox 4 or Google Chrome as soon as you can.

If you like the site, please vote for it at Dev Unplugged

About Mike the Tike

Mike the Tike is a .Net developer from Johannesburg, South Africa. If you'd like to get to know him better you can follow him on twitter (stringhandler) or find him on Linked In.

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.

Performance Optimizations

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.

In terms of using a javascript framework, I decided not to because of the performance issues. I originally used Easeljs, but could only get around 250 sprites. After reading up extensively, I found that a lot of the issues are related to closures and other Javascript issues. In the end I just ended up stripping everything down to really basic methods to get the most sprites I could.

Yes, this is Mike the Tike

Mike the Tike (I'm the smaller one)