Conway's Game of Life plays out on a grid (in this case determined by the size of the user's screen). Each cell is either alive or dead. Every turn, a few rules are applied to each cell in the grid:
Continue to Conway's Game of Life
Or, read on:
This started as a textbook exercise from Eloquent JavaScript which asks the reader to implement Conway's Game of Life using checkboxes, but it has since expanded in scope. By this point it's not using checkboxes anymore but is based on the canvas.
Each cell can be toggled on/off if the user clicks on it. I have also implemented a few buttons which set the board up in interesting ways, as well as some buttons which do interesting things like "Party Mode" (which causes the pieces to all flash random bright colors), Stones Mode (which changes the alive cells from squares to circles), and Go Mode (which uses the canvas to make it look like a Go Board with black and white stones).
The user can reset/clear the board at any time, pause/stop the simulation, advance it by a single generation at a time or by an arbitrary number of generations, change the speed of the simulation and animation, and also change the scale of the display and simulation by entering how many pixels on a side each cell should have. The user can also change the color of the foreground (live cells) and background (dead cells) on the grid.
Note that many of the buttons are set to not work if the simulation is running, so press "stop" before you use most of them. The checkboxes for toggling are also a little buggy still, and I will probably replace them with custom buttons in the near future. Refreshing the page will reset the simulation. If you re-size the screen you can re-size the canvas by refreshing the page. It's still a work in progress, but enjoy!
For those interested in the source code, it is all visible in the browser by viewing the page source. To view the code in a (slightly) more organized and approachable state, you can view the project on my GitHub here.