Herbivores and predators with tiny neural brains evolve in a pastel petri dish.
Every creature is steered by its own neural network. Seven vision rays fan across its field of view and report how close the nearest plant, herbivore, predator and dish wall are; those 28 numbers, its energy and two memory values pass through 10 tanh neurons to outputs for turning, speed and the memory it keeps for the next step. Nothing is trained: moving costs energy, eating restores it, and a creature with enough energy splits in two, passing on its weights with small mutations and a slight shift of hue, so lineages show up as color families. Brains that happen to steer toward food leave more copies, the populations swing through predator and prey cycles in the chart, and over minutes you can catch predators loitering around the fertile patches where herbivores graze. The first seconds run in fast-forward, so you join after a couple of simulated minutes of evolution.
Try it. Click any creature to watch its brain: the rays light up by what each eye sees, and every connection glows with the signal flowing through it. Drag to sprinkle food. Click the view, then press F to fast-forward, Space to pause, Escape to deselect and R to restart with new random brains.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a tiny evolving ecosystem of creatures with neural network brains, using 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:
- Draw a large circular dish in the middle of a canvas that fills the window. Scatter about 150 green plant dots inside it, and keep regrowing them at random spots up to that number.
- Add about 40 creatures with a position, heading, speed and energy. Give each one a brain: a small neural network with random weights, written by hand as arrays (no libraries), with one hidden layer of 8 tanh neurons and 2 outputs, turn and speed.
- For inputs, give each creature 5 eyes spread across a 180 degree field of view. For every plant within 100 pixels, work out its angle relative to the heading, find the eye whose slice it falls in, and set that eye's input to how close it is (1 when touching, 0 at the edge of sight). Add the creature's energy and a constant 1 as extra inputs.
- Every frame, run the network, turn and move the creature, keep it inside the dish and subtract energy for moving. Eating a plant adds energy. When energy runs out it dies. When energy passes a threshold it splits: the child copies the brain with a few weights nudged by small random amounts.
- Draw creatures as little rounded bodies with eyes, pointing along their heading.
Once that works, make it beautiful:
- Add predators that eat the plant eaters, give every eye separate inputs for plants, prey and predators, and plot both populations over time.
- Click a creature to draw its vision rays and a diagram of its network, with neurons and connections colored by their live activity.
- Use a soft pastel palette, a glassy rim on the dish and a gentle shadow under each creature.
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 a fast-forward button, recurrent memory neurons, or letting body size and eye range evolve too.
