Drift at a growing colony's edge splits red and green bacteria into jagged sectors.
A colony seeded from a well mixed drop of red and green fluorescent bacteria spreads across an agar plate. Only cells on the edge can divide, so the front is a tiny, constantly resampled population, and genetic drift sorts it into pure red and green sectors whose jagged boundaries wander and annihilate, as in Hallatschek and Nelson's 2007 experiments. The model is Eden growth on a hexagonal lattice over patchy agar that roughens the front; a beneficial mutant simply divides more often, so its sector bulges out ahead of its neighbors. Every cell is one pixel in an ImageData buffer, with glowing fresh growth, a downsampled fluorescent bloom and a cached glass dish.
Try it. Click the colony edge to drop a beneficial mutant in a new color, or Shift-click for a neutral one. Up and down change the mutant's growth advantage, Space drops one at random and R pours a new plate. Left alone, it seeds mutants itself.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a "gene surfing" simulation with JavaScript and the HTML canvas element: a bacterial colony made of red and green strains expands across a petri dish, and genetic drift at its edge splits it into sectors. 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 and paint a dark background with a circular "agar plate" in the middle.
- Use a grid of about 400 by 400 cells stored in a Uint8Array: 0 is empty, 1 is red, 2 is green. Cells outside the plate are walls.
- Seed a small disc in the center with a random 50/50 mix of red and green cells, and keep a list of "frontier" cells next to empty ones.
- Each frame, repeat a few thousand times: pick a random frontier cell, pick a random empty neighbor, and fill it with the same color. If the picked cell has no empty neighbors, remove it from the list. This is the Eden growth model.
- Draw the grid with one ImageData pixel per cell and putImageData, scaled up to the plate with drawImage.
Once that works, make it beautiful:
- Vary each cell's brightness slightly so the colony has a fluorescent, grainy texture, and add a soft glow by drawing a blurred, downscaled copy on top with "lighter" blending.
- Draw a glass rim with a few bright highlight arcs.
- Let me click the colony edge to add a third color with a 30% faster growth rate: pick frontier cells with probability proportional to their strain's rate and watch its sector bulge outward.
- Count the color changes around the edge and show how many sectors are left.
Explain the key ideas in short code comments, especially why only edge cells dividing makes drift so strong. When you're done, tell me how to open it and suggest three directions I could take it next, such as a hexagonal grid for rounder colonies, a linear front instead of a circle, or plotting heterozygosity as the colony grows.
