Thousands of chromatophores play passing clouds and camouflage on a cuttlefish.
A cuttlefish rests on the sea floor, its skin a display of over 4,000 chromatophores: yellow, orange and brown pigment sacs above white leucophores and blue-green iridophores. Each sac is pulled open by radial muscles under direct neural control, so here every one eases toward its motor drive with a time constant of about a seventh of a second, plus a little motor noise. The drive comes from neural fields over the mantle: in passing clouds a FitzHugh-Nagumo excitable medium paced at the rear sends dark bands with sharp fronts and soft trailing edges sweeping forward; for camouflage the animal measures the substrate around it (brightness, contrast, and whether the contrast comes in large blobs or fine grain), chooses one of the three body pattern classes cuttlefish use, uniform, mottle or disruptive with its white square, and blends it with a low-pass match of what lies nearby. The zebra display flashes bold transverse bands.
Try it. Drag on the sea floor to draw dark stones (hold Shift or use the right button for pale ones) and watch the skin re-read the background and change its pattern. Switch between camouflage, passing clouds and zebra, or between sand, pebbles, a laboratory checkerboard and a clear floor, with the buttons, the arrow keys or 1 to 3. Click the animal, or press Space, to startle it into a flash of eyespots.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a cuttlefish whose skin is made of thousands of living pixels, using 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, and resizes with the window. Paint a sandy sea floor with a little noise.
- Draw the mantle as an oval and scatter about 3,000 chromatophores inside it on a jittered grid. Give each a color (yellow, orange or dark brown, with the brown ones largest) and an expansion value between 0 and 1.
- Each frame, give every chromatophore a target expansion from a drive field, ease toward it quickly (a time constant of about 0.15 seconds, like a muscle), and draw it as a disc whose radius grows with expansion. Batch all discs of one color into a single path so it stays fast.
- For the first drive field, use a dark band that travels from the back of the mantle to the front every second or so.
Once that works, make it beautiful:
- Replace the band with a real excitable medium: a FitzHugh-Nagumo grid over the mantle, stimulated in a strip at the back, so dark 'passing clouds' sweep forward with sharp fronts and soft tails.
- Add camouflage: let the user draw dark and light stones on the sea floor, measure the brightness and contrast around the animal, and blend in a pattern: plain when the floor is smooth, mottled when it is grainy, and bold bands with a white square when the contrast comes in big blobs.
- Add fins that ripple along the sides, eyes with W-shaped pupils, and a soft shadow.
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 zebra display that flashes bands, a startle reaction with eyespots, or a magnifier that shows single chromatophores up close.
