Sorry, your browser does not support ‘canvas’. Try a recent version of Firefox, Chrome, Safari or Opera.

You can also Play with a larger game canvas.

Life, but not as we know it

Conway’s Game of Life implemented with javascript and HTML Canvas. This is just for fun as a “hello world” exercise for Canvas – it’s been done loads of times before (I particularly like sixfootallrabbit’s), but hey :) Here’s my Game of Life source if you’re curious – it’s pretty straightforward.

There is a little tweak here on the usual Life algorithm that you may have noticed: Michael has a dislike for determinism and therefore requested a *MUTATE* option. Rather than following just the normal rules, we have an additional perturbation where a live cell has an additional chance of growing further (making a neighbour cell alive), or unexpectedly dying. This breaks the stalemate that often occurs after many iterations of the usual rules, and gives the pattern the opportunity to mesmerise for longer.

Canvas and <input type=range>

I was curious to see what the performance would be like, and it seems to do just fine, processing each frame with delays inbetween using ‘setInterval’ to keep the browser responsive. I did find that drawing every single cell on every iteration was noticeably slower than only redrawing changed cells, so that small optimisation is worthwhile. It’s not a particularly startling discovery, since rendering/DOM changes are normally slow, but good to know for sure – compare the slow version with the optimised version.

As Canvas is only available in modern browsers, I also tried out the HTML 5 ‘range’ input type to make sliders for the settings: this works in Safari, Chrome, and Opera. Firefox (and other browsers that don’t understand the new input types) fall back to a plain ‘text’ input. Oddly, the input fails to show up at all in the browser on Android 2.2.

We added the [-] and [+] step links around the sliders for convenience: these are being generated by javascript (warning: nesting function closures may bite).