Game of Life

Web implementation of Conway's classic cellular automaton. The grid is not a fixed-size board, it is an infinite plane you navigate with pan and zoom. Rendering is done straight to <canvas> and only paints cells inside the camera, so the simulation stays smooth even with large active patterns.

Mechanics#

1. Paint cells with the pencil or erase with the eraser

   The pencil/eraser selector flips what a click does. You can also drag to paint a streak. Conway's four rules apply regardless of where you paint.

2. Navigate the grid with pan and zoom

   Middle-click drag pans the camera. Mouse wheel zooms (between 0.5x and 5x). A button recenters the camera at the origin.

3. Load a classic pattern or roll a random one

   The pattern menu bundles Glider, Gosper gun, Simkin gun, Pulsar, Pentadecathlon, Lightweight spaceship, Garden of Eden and more, grouped by category (spaceships, oscillators, guns, static patterns). The Random button paints a 100×80 square at ~30% density.

4. Play, tweak speed, and watch the stats

   Three speeds (slow 500ms, medium 100ms, fast 50ms). The stats panel shows generations and alive-cell count in real time.

5. Save your pattern or download the board as PNG

   The save dialog drops your current pattern into the local list. The download button dumps the canvas to an image.

Keyboard shortcuts: Space play/pause, C clear, R random.

Under the hood#

The grid is not a fixed matrix, it is a Map<string, boolean> keyed by "x,y". That makes it effectively infinite without paying memory for empty cells, and simplifies zoom and pan. Each tick walks only the live cells and their 8 neighbours to compute the next generation. The renderer applies a zoom + camera transform to the canvas 2D context and only fills the cells inside the visible rectangle.

The UI is built on Radix primitives (sliders, tooltips, popovers, dropdowns), Tailwind for styling and framer-motion for a couple of transitions. There is an easter egg tucked away in there. I'll let you find it.