In the process of furthering my Javascript and HTML5 knowledge, I picked as a project an old favourite of mine: an implementation of Conway’s “Life”.
“Life” is an example of cellular automata. All the activity takes place on a 2D grid of cells, where each cell is either “alive” or “dead”. Then from generation to generation whether a cell is born, lives or dies depends on some very simple rules:
- If a cell is alive and has 2 or 3 neighbours, it survives
- If a cell is alive and has less than 2 or more than 3 neighbours, it dies
- If a cell is empty, and has 3 neighbours, a new cell is born
From these simple rules, a huge array of patterns quickly coalesce out of even a random grouping of cells. Patterns like “traffic lights” which switch from 3 cells in a row horizontally, to 3 cells in a row vertically. Or “gliders” a shape that seems to “roll” in a way that means it moves one cell across, and one cell down ever 4 generations. Some people have even implemented simple adding computers using patterns on a “Life” grid, using gliders like electrical signals. Admittedly, probably not the fastest computer ever built…
So, I’ve now built a web page called “WebLife!” that gives you a random grid of cells and lets you single-step or automatically fast-forward through the generations that result. You can access it here:
http://www.asman-it.com.au/weblife/
And the page looks like this:
The page is implemented using an HTML5 canvas as the drawing surface for the grid, and Javascript and JQuery for the logic. As the canvas component is still fairly new, this won’t work on older browsers. I’ve tested it on Firefox 3.6 and Chrome, though, and it works fine there. I haven’t yet tried Internet Explorer, but I suspect it probably won’t work right now.
Using the site is simple enough (if only because the functionality is pretty limited!). Refresh the page to get a “fresh” random grid, then use the Play icon to advance one generation at a time, or the Fast Forward icon to step through generations until the Stop icon is clicked.
I have a few features planned over the coming weeks, including:
- Ability to edit and “draw” your own patterns on the grid
- Ability to change the speed of “fast forward” playback
- Ability to set the grid to “wrap-around” so one side of the grid wraps around to the other side
- Ability to set your own rules, to explore the different patterns that result
As the WebLife page says, any feedback or suggestions are welcome. Happy exploring!



