Cells running one tiny learned rule grow a gecko from a single seed and heal its wounds.
Each dish is a neural cellular automaton after Mordvintsev and colleagues' Growing Neural Cellular Automata: every cell of a 32 x 32 grid holds 12 numbers (color, alpha and 8 hidden signals), perceives its neighbors through Sobel filters, and adds the output of the same small network (36 inputs, 40 hidden units, 12 outputs, about 2,000 weights) to its state, with half the cells firing at random each step. From a single live cell, that shared rule grows the whole organism, holds it steady, and regrows whatever is cut away. The three rules were trained by a JavaScript trainer written for this demo, with backpropagation through time over 48 to 72 steps, a pool of past states and deliberate damage, and ship as 16-bit weights. Train one from scratch runs the same backprop in your browser on a 24 x 24 grid, about 20 iterations a second, with a live loss curve and a growth test of the latest weights.
Try it. Swipe across a creature to cut it and watch it regenerate; tap an empty dish to plant a new seed. Press H to see three hidden channels as color, the cells' private coordinate signals. Click Train one from scratch (or press T) to train a fresh rule live; 1 to 3 replant one dish (or pick the training target) and R replants them all.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a neural cellular automaton that grows a shape from a single cell, 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 32 x 32 grid where each cell holds 12 floats: red, green, blue, alpha and 8 hidden channels. Seed only the center cell (alpha and hidden channels set to 1).
- Each step, every cell builds a 36-number perception vector: its own 12 values plus Sobel x and y gradients of each channel over its 3 x 3 neighborhood. Feed it through a tiny network (36 -> 40 with ReLU -> 12) and add the output to the cell's state. Update only a random half of the cells each step, and zero any cell with no neighbor whose alpha exceeds 0.1.
- Draw the grid into an ImageData and scale it up with drawImage.
Then train it:
- Pick a target: draw a simple emoji-like shape into a 24 x 24 area of an offscreen canvas, and read back premultiplied RGBA.
- Write the backward pass by hand: run 40 steps forward, storing each state and each step's random firing mask, compute the mean squared error of RGBA against the target, then backpropagate step by step through the network and the Sobel filters. Normalize each weight tensor's gradient and apply Adam with a learning rate of 0.002.
- Train in small slices inside requestAnimationFrame and plot the loss on a log scale.
Once that works, make it beautiful:
- Keep a pool of grown states to train from, and damage some of them, so the rule learns to persist and to heal.
- Let a mouse drag erase cells, and render each cell as a soft rounded tile so the organism looks like living tissue.
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 visualizing the hidden channels, saving trained weights to reuse, or training several shapes at once.
