Five populations climb a rugged fitness landscape, then get stranded when it shifts.
Every vertex of this low-poly island is a genotype and its height is fitness. Five populations of 72 individuals evolve by Wright-Fisher selection: each generation, every child picks a parent with probability proportional to exp(beta times fitness), then usually takes a one-step mutation to a neighboring genotype and very rarely a big leap, the only way across a deep valley. The terrain mixes a broad additive hill with a correlated random field, and the dial K plays the role of epistasis in Kauffman's NK model: it shrinks the additive share and the correlation length, so one smooth mountain shatters into many local peaks that trap populations. The mesh is drawn back to front with the painter's algorithm and each individual is drawn right after the quad in front of it, so peaks hide what is behind them.
Try it. Click the terrain to change the environment: the landscape reshapes in a glowing wave from that point and the populations must climb again. Pick K from 0 to 11 to smooth or roughen it, drag to rotate, and Shift-click (or right-click) to replace the weakest population with a new colony. Click the view, then use the number keys or up and down for K, Space to pause and R to restart.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an evolving population on a 3D fitness landscape 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 48 by 48 grid of heights. Each grid point is a genotype and its height is its fitness. Build the heights from a few smooth bumps plus a small 2D noise function you write yourself, then normalize them to the range 0 to 1.
- Draw it as an isometric heightfield: project each grid point to the screen (x minus y for screen x, x plus y halved for screen y, minus the height), then fill one quadrilateral per grid cell, drawing from the back row to the front row so nearer quads cover farther ones (the painter's algorithm). Color each quad by height, from blue water through green to white peaks, and darken it by a simple light direction.
- Create a population of 100 individuals, all starting at one low point. Every 0.4 seconds, make a new generation: each child picks a parent with probability proportional to exp(8 times fitness), then with probability 0.3 moves to a random neighboring grid point.
- Draw each individual as a bright dot sitting on the terrain.
Once that works, make it beautiful:
- Animate each child hopping in a small arc from its parent's position to its own.
- Run several populations in different colors from different starting points, and plot each population's mean fitness over time.
- Add a ruggedness slider that blends between one smooth hill and a fine-grained noise field, and let a click regenerate the terrain so the populations have to climb again.
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 real NK landscape over bit-string genomes, recombination between individuals, or slowly drifting terrain that populations must track.
