Why Conway's Game of Life? Well, Conway's Game of Life is a very simple cellular automaton (for a more in-depth overview of the game, check out the article at Wikipedia for Conway's Game of Life) - the problem space is small enough to allow me to only focus on the HTML5 canvas tag while still including sufficient elements to make for both an interesting and valid learning experience.

The actual algorithm used to generate each successive generation is (perhaps) surprisingly simple: the Life patterns are represented as two-dimensional arrays. Two arrays are used, the first one to hold the current generation and the second one in which the next generation is calculated. Obviously, a zero will be used to represent dead cells and a one will represent live cells.

Each cell will be iterated over - an inner loop will be used to count the number of live neighbours to decide if the corresponding cell will 'live or die' in the next generation. Once all cells of the current generation have been iterated over and the corresponding successor array has been calculated, the successor array becomes the current (generation) array and is displayed, i.e., the two arrays swap roles.

With regards to the edges, in theory, the Life grid is infinite - this however, is not practical. Hence, I have adopted the strategy of wrapping the grid around, that is, both the top and bottom and left and right edges run over into one another - a toroidal array.

See Wikipedia (copied here for reference purposes): Game of Life's rules.

*
The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, live or dead.
Every cell interacts with its eight neighbors, which are the cells that are directly horizontally, vertically, or diagonally adjacent. At each step in time,
the following transitions occur:
*

- any live cell with fewer than two live neighbours dies, as if caused by underpopulation
- any live cell with more than three live neighbours dies, as if by overcrowding
- any live cell with two or three live neighbours lives on to the next generation
- any dead cell with exactly three live neighbours becomes a live cell

- HTML5
- HTML 5 differences from HTML 4
- DIVE INTO HTML5
- HTML5ROCKS
- Mozilla - Drawing Graphics with Canvas
- Conway's Game of Life from Wikipedia
- Conway's Game of Life - Java applet
- Conway's Game of Life - Android tutorial
- 21 Ridiculously Impressive HTML5 Canvas Experiments

*Click the following link to download the JavaScript/Canvas Game of Life application.*

PerfectLearn is a topics map-based knowledge management system (for web, Android, and iOS) with extensive integration with the semantic web.