A crawling white blood cell hunts a bacterium among red cells, in grainy phase contrast.
The neutrophil is an active contour of 84 membrane nodes, not an animation: actin polymerisation pushes the membrane out where the cell is protruding, membrane tension smooths it, near-constant cytoplasmic volume pulls in the rear as the front advances, myosin pinches the rear into a trailing uropod, a slightly lumpy cortex keeps the flanks rounded but irregular, and red blood cells are stiff obstacles that the cell must shove aside or squeeze past. The cell reads the bacterium's chemoattractant around its rim and keeps a persistent polarity; pseudopods are born near the front, and the ones pointing up the gradient grow while the rest retract, so it steers by splitting and choosing pseudopods and repolarises, rounding briefly, when its target moves behind it. On contact the membrane flows around the bacterium into a phagocytic cup that closes, and the bacterium fades gently inside a phagosome. Every object is drawn as optical thickness into a small buffer that is blurred to make the bright halos of phase contrast optics, then film grain, flicker and the odd scratch recreate the look of the classic 1950s film of this chase.
Try it. Drag the bacterium to lead the neutrophil on a chase around the red cells, or click anywhere to put down a new bacterium (Space drops one somewhere random).
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a white blood cell chasing a bacterium 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 mid-gray background.
- Represent the cell as a closed ring of about 80 points. Each frame move every point by a sum of forces: tension that pulls it toward the midpoint of its neighbors, a pressure along the outward normal proportional to how far the area is from its rest value, and a protrusion force along the normal that is strongest on the side facing the target.
- After each step, redistribute the points evenly along the outline so the mesh stays healthy.
- Put a small bacterium nearby that jiggles randomly, and some circular red blood cells that push the cell's points out of themselves. Let the protrusion direction turn gradually toward the bacterium so the cell keeps a persistent front.
- When the bacterium is inside the outline, it has been engulfed: let it fade away and place a new one.
Once that works, make it beautiful:
- Fake phase contrast microscopy: draw everything as grayscale thickness into a small offscreen canvas, read the pixels, blur them with a box blur, and set brightness to background minus thickness plus a bright halo wherever the blurred value exceeds the sharp one.
- Draw a thin lamellipodium at the front, a thicker body with a lobed nucleus and jiggling granules behind it, and add film grain and a little flicker.
- Let me drag the bacterium to lead the chase.
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 competing pseudopods, a phagocytic cup that wraps around the bacterium, or several cells hunting at once.
