Breed images grown by tiny neural networks by picking the ones you like.
Each image is painted by a compositional pattern-producing network: a small feed-forward net asked, for every pixel, what color belongs at (x, y), given x, y, the distance from the centre and a bias. Its hidden nodes apply sin, cos, Gaussian, abs, tanh, sigmoid or identity, and composing them yields symmetry, repetition and repetition with variation, which is why the results look grown rather than drawn. Genomes evolve NEAT-style, as in the Picbreeder experiment: connection genes carry innovation numbers, mutations perturb weights, split connections with new nodes and add links, and crossover aligns two parents gene by gene, so networks grow more complex over the generations. You are the fitness function; when you are away, an autopilot breeder picks for you with a small taste model (contrast, a preferred level of detail, two-dimensional structure, symmetry, color and novelty) and its ghost cursor shows each choice.
Try it. Click the images you like, then press Breed (or Enter) to grow the next generation from them; pick two or more to cross them over. Use the magnifier on a tile (or hover and press Z) to see it at full resolution beside a diagram of its network. Undo steps back a generation, A toggles the autopilot, and New garden starts over.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive evolution toy where I breed images made by small neural networks (CPPNs, as in the Picbreeder experiment), 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:
- 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.
- A genome is a list of nodes and weighted connections. Inputs are x, y, the distance r from the centre and a bias; three outputs become a color. Hidden nodes each have an activation: sin, Gaussian, abs, tanh or sigmoid. Connections only go forward, from a node of lower order to a higher one.
- Render each genome by evaluating the network at every pixel of a small offscreen canvas (about 100 by 100) and draw it scaled up as one tile in a 4 by 3 grid.
- Mutation perturbs weights, sometimes splits a connection by inserting a new node, and sometimes adds a new connection.
- Clicking a tile selects it; pressing Enter fills a new grid with mutated children of the selected tiles, keeping one parent unchanged.
Once that works, make it beautiful:
- Render tiles a few rows per frame so the page never stalls, and swap a finished generation in with a staggered fade.
- Map the outputs through a cosine palette stored in the genome, so each lineage keeps a family color scheme.
- Add crossover between two selected parents, aligning connection genes by innovation number as in NEAT.
- Add a zoom view showing one image at full resolution next to a diagram of its network.
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 an autopilot that picks by a taste score, undo with a lineage strip, or animating the images by feeding time in as an extra input.
