Two hundred translucent triangles evolve from chaos into a painted landscape.
A landscape is painted in code (sky, sun, hazy ranges, a mirrored lake, a shore of pines) and shrunk to a 120 by 75 target. The painting starts as two hundred random translucent triangles. Thousands of times a frame a hill climber nudges a vertex, shifts, tints or fades one shape, swaps two in the stack, or respawns one, and keeps the change only if the squared pixel error drops. A custom rasterizer recomposites only the bounding box a change touches, so each proposal costs a few hundred pixels, and the frame you see is the same genome drawn as crisp vector paths.
Try it. Paint on the canvas with the swatches to give it a new goal and watch the shapes chase your strokes. Press 1, 2 or 3 (or use the buttons) to switch to triangles, circles or brush strokes without losing the painting, N for a new scene and R to restart from chaos.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an evolutionary art toy with JavaScript and the HTML canvas element: translucent triangles that slowly evolve to copy a picture. 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:
- Paint a target picture in code on a small offscreen canvas, about 100 x 64 pixels: a sunset sky gradient, a sun, two layers of mountains and a dark lake. Read its pixels once with getImageData.
- Represent a painting as 100 triangles, each with three vertices, an RGB color and an alpha between 0.1 and 0.6. Start them at random.
- To score a painting, draw it onto a second small canvas of the same size, read its pixels back, and sum the squared difference from the target over every pixel and channel. Lower is better.
- Each frame, try a batch of mutations: copy the current painting, change one triangle a little (move a vertex, shift its color or alpha), score it, and keep it only if the score improved. That is a hill climber.
- Show the evolved painting scaled up next to the target, plus a running count of improvements.
Once that works, make it beautiful and fast:
- Draw the evolved painting at full size with real canvas paths each frame, so it stays crisp no matter how small the scoring canvas is.
- Make mutation step sizes random on a log scale, so some are big jumps and most are fine tuning.
- Plot the error over time on a small chart, and put the painting in a frame on a dark wall.
- Let the mouse paint onto the target so the triangles have to chase your strokes.
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 writing your own triangle rasterizer that only rescores the rectangle a mutation touched (far faster than getImageData), switching the shapes to circles or brush strokes, or breeding a small population with crossover.
