I had to do a school project involving automata so, after searching what this means .. I came to “cellular automaton” and then to the “Conway’s Game of Life” on wikipedia. I remember doing such a project on RentACoder few years ago in Visual Basic but I didn’t knew this fancy name for it … “cellular automata” 🙂
The rules are pretty simple :
- A cell with 0 or 1 neighbor dies because of underpopulation
- A cell with 4 or more neighbors dies because of overpopulation
- If an empty space has exactly 3 cells then a new cell is born in that empty space
- If none of the above rules apply then the space does not change (a live cell remanins alive, and an empty space is still empty)
For implementing it .. I choosed the canvas object from HTML 5 specs as I wanted to learn a little bit about it.
The first step was writing the canvas tags with a default message in case the user’s browser does not support it.
The code below is pretty simple :
- We declare how many cells we want on the X/Y axes, how many pixels wide should be a cell and the delay between drawing the next generation of cells
- We create 2 arrays, one for storing the initial colony and one for the next generation
- We randomly fill with live cells the initial colony
- We draw the initial colony and then we process the colony using the game’s rules
If you have any questions .. feel free to ask 🙂