A drop of pond water under a brightfield microscope, with a focus knob you can turn.
Sixteen kinds of micro-organism share the drop, each drawn in code and each moving the way it really does at a Reynolds number near 0.001, where nothing coasts and a swimmer stops the instant its cilia stop. Paramecia corkscrew along helical paths with metachronal waves running down their cilia and back up, pivot and retry when they bump into something (the avoidance reaction); rotifers spin their twin ciliated crowns into a feeding current; Vorticella bells snap their stalks into a coiled spring and slowly unwind; Volvox colonies roll with daughter colonies inside; diatoms glide back and forth along their raphe while an amoeba flows. Every organism sits at a depth in the drop, and the scene is drawn in ten depth layers: layers away from the focal plane are rendered small, blurred and scaled up, so the shallow depth of field costs almost nothing and swimmers drifting in depth are cross-faded between layers.
Try it. Drag the focus knob, scroll, or use the arrow keys to move the focal plane through the drop. Click to drop a clump of yeast and watch the ciliates find it and the rotifers suck it in, click a stalked organism to make it contract, and drag through the water to stir it (it stops the moment you do).
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a drop of pond water under a brightfield microscope 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 canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint a warm brightfield background: a radial gradient from cream to darker beige at the edges.
- Draw a paramecium in code: a slipper-shaped closed curve, filled with a faint translucent tint, outlined with a thin dark line plus a pale inner line (the refraction rim that makes brightfield cells readable). Add short cilia around the edge whose angles follow a wave that travels from front to back.
- Remember the water is all viscosity and no inertia at this size: never give organisms momentum. Each frame set a paramecium's velocity directly from what its cilia are doing, wobble its heading with a sine to fake the helical path, and when its front touches an obstacle, run the avoidance reaction: back up for half a second, pivot, swim off again.
- Add a few other organisms with simple rules: diatoms that glide slowly forward and back, a Volvox sphere made of dots on a rotating 3D sphere, and Vorticella bells on stalks that snap shut into a coil and slowly unwind.
Once that works, make it beautiful:
- Give every organism a depth and add a focus control (the mouse wheel or a slider). Draw the scene in a handful of depth layers; render each out-of-focus layer into a small offscreen canvas, blur it there with ctx.filter, and scale it back up, so depth of field is cheap.
- Click to drop a clump of yeast, and let the ciliates steer toward it and slow down once they are inside it.
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 rotifers with feeding currents, an amoeba with streaming pseudopods, or a darkfield mode.
