Canvas Conway's Game of Life — Free Cellular Automaton Snippet

Conway's Game of Life is the classic cellular automaton: a grid of cells that are either alive or dead, evolving generation by generation according to four simple rules based purely on each cell's living neighbor count. This snippet implements it fully on the Canvas 2D API, with a typed-array grid, play/pause/step/random controls, and an adjustable simulation speed.

A Uint8Array grid, not a 2D array of booleans

The grid is stored as a single flat Uint8Array(COLS * ROWS), indexed with a helper idx(x, y) => y * COLS + x. A typed array of 1s and 0s is both faster to allocate and iterate than a nested array of arrays, and it maps cleanly onto the two states a Life cell can have — no need for a richer data structure for a strictly binary grid.

Neighbor counting wraps at the edges

countNeighbors checks all eight surrounding cells, but wraps out-of-bounds coordinates back around with (x + dx + COLS) % COLS — so the grid behaves like a torus, where the right edge is a neighbor of the left edge and the bottom wraps to the top. This is the standard way to avoid dead zones at the grid boundary that would otherwise behave differently from interior cells.

Rules apply to a snapshot, not in place

step() is the heart of the simulation: it builds a brand new next array and computes every cell's next state purely from the *current* grid, following Conway's four rules — a live cell with 2 or 3 neighbors survives, a dead cell with exactly 3 neighbors becomes alive, everything else dies or stays dead. Applying the rules to a fresh buffer (rather than mutating grid cell by cell) is essential: mutating in place would let cells computed earlier in the loop affect the neighbor counts of cells computed later in the same generation, corrupting the simulation.

A real play/pause loop with adjustable tick rate

loop(ts) runs every frame via requestAnimationFrame, but only calls step() when enough time has passed based on the speed slider (1000 / speed ms between generations) — decoupling the simulation's tick rate from the display's refresh rate, so speed changes take effect immediately without restarting the loop. Pausing simply stops the interval check from ever triggering step, while clicking a cell is only allowed while paused, matching the classic editable-then-run interaction.

Customizing it

Change COLS/ROWS for a finer or coarser grid, tweak the random seed density in randomize, or seed a specific classic pattern (glider, blinker) programmatically instead of randomizing. Pair it with tic tac toe game or whack a mole game for more canvas-and-grid-based casual games.