Langton's 1984 loops copy their own genome and tile the plane with a glass colony.
This is Christopher Langton's self-reproducing cellular automaton, running the real 219-rule transition table: every cell has 8 states and looks only at its four neighbors. The starting loop is a sheathed tube whose core carries a genome of signals; copies stream out along an arm that grows, turns left four times, closes into a daughter loop and detaches, and both loops then repeat. Loops boxed in by neighbors lose their genome and die, so the colony grows as a diamond with a living rim of replicators around a darkening core. Each cell remembers when it last changed, which drives the glow of busy glass and the slow fading of dead loops, and neighbors in the same state are drawn as one leaded piece.
Try it. Click or tap to seed a new loop, drag to pan and scroll to zoom. Press Z to fly in to a loop that is replicating right now, 1 to 5 to change speed, space to pause and R to restart. Hover to see a magnifier.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build Langton's self-replicating loops, the 1984 cellular automaton, with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Use a dark background.
- Use a grid of about 300 x 200 cells, each holding a state from 0 to 7, in two Uint8Arrays (current and next).
- Each cell looks at its von Neumann neighborhood: itself plus north, east, south and west. The rule is Langton's published table of 219 transitions, each written as six digits CNESW then the new state. Use the standard table (Golly ships it as Langtons-Loops.rule) and expand each entry into all four rotations of N, E, S, W in a lookup array indexed by the five digits in base 8. A neighborhood that is not listed keeps its state.
- Stamp Langton's 10 x 15 starting loop in the middle of the grid, step the automaton with requestAnimationFrame, and draw each nonzero cell as a colored square with fillRect. You should see an arm grow, turn and close into a second loop after about 150 generations.
Once that works, make it beautiful:
- Run several generations per frame and only step the bounding box of nonzero cells (plus a one-cell margin), so the colony spreads quickly.
- Draw cells into an ImageData buffer and scale it up with drawImage.
- Give each state a jewel color, record the generation each cell last changed, and dim cells that have not changed for a while, so dead loops at the center darken while the living rim glows.
- Let a click stamp a new loop where you point, and add a camera that zooms to fit the colony.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as drawing it as leaded stained glass, comparing Byl's and Chou-Reggia's smaller loops, or Sayama's evoloops that mutate and evolve.
