If you see this, your older browser doesn't support HTML5 Canvas.

Game of Life on an HTML5 Canvas

Enter starting pattern. Press [Save], Run.
.
.

     
Speed delay in milliseconds:
Generation number:

(One level of save/restore is currently implemented.)
(The border cells are dead and always remain dead, in this version.)


The game was invented around 1970 by the mathematician John Conway. I read about it in Scientific American back then. Many hours were spent coding in TRS 80 assembly language, Ada, Pascal, C++, C and Java. Today, for the NOCCC, the language of choice is Javascript, with aid from CSS and HTML, and PHP in the future.

The game concerns "organisms" arranged in a rectangular grid. Each organism is simply a square, or cell, of two possible colors. Each cell can be either alive or dead, where an alive cell is colored black (or green or any other color) and a dead cell is colored white. (Or, the programmer could reverse the whole thing.) The rules for living, dieing, staying alive, or staying dead are what Conway stated. To play the game, a user enters a pattern of live cells, then tells the computer to compute a next generation of every cell based on Conway's rules regarding a cell's lifetime. Only after every cell knows its fate is the whole board display-refreshed with the next-generation appearance. And then the whole process of next-generation computation and display is repeated. The "colony" of organisms is seen to grow or shrink, mutate or die out as the computer displays repetitive next-generations.

The rules are as follows: A living cell dies if it has less than 2 living neighbors (from neglect), or it dies if there are more than 3 living neighbors (from overcrowding). If a cell has exactly 2 or 3 living neighbors, the living conditions are just right and it survives. A dead cell stays dead unless it has exactly 3 living neighbors, which causes it to be born (ma, pa, and a midwife).

The user-entered patterns are what gives the game some interest to game players. Surprises and exotic patterns are common. Over the years, many interesting patterns have been discovered (glider, exploder, fishes, the R-pentomino, etc.) and published. Programmers usually get interested in making the generations appear faster and faster, and making the board appear larger and larger. The seeming limit is to let a single pixel on a screen be a single organism, and see how the colony (virus?) behaves when driven by the successor to Big Blue.

For my present incarnation of Life, the board is very simple and the coding is very basic - just enough to get it to work. In other words, the code is relatively easy to read, but not optimized in any sense (yet). A cell is 20px by 20px, and the board consists of 28 cells by 24 cells. The computer that runs the game is the user's own computer and her browser of choice. (So, I don't have to keep buying faster and faster computers.) The language is Javascript operating on an HTML 5 Canvas Graphical Layout System. Older browsers won't work.

The on-screen "controls" consist of buttons, textfields and a mouse. The mouse is used to enter starting patterns and to push buttons. Functions of the other controls are described below: Clear button: Step button: Run button: Pause Button: . . . . (Fill in.)

Much has been written about the Game of Life and much is accessible on the Web, where you can find many discovered starting patterns. A particularly good reference is Wikipedia: . Some people have really become obsessed with this simple "game". However, it has spawned the whole field of cellular automata. And, it just may advance our understanding of certain philosophical systems. One may also hope that it leads to answers in the field of cosmology and organic chemistry. Who knew?