Air forced into honey between glass plates splits into branching fingers.
In a Hele-Shaw cell the honey obeys Darcy's law, so its pressure satisfies a Laplace equation, relaxed every frame with red-black SOR on a 286 by 286 grid. Air cells hold one minus surface tension times curvature (measured by counting air in a small disc), and honey cells on the interface fill with the flux pushed out of them until they turn to air, at a fixed total injection rate. Bumps that stick out see steeper gradients and outrun their neighbors, the Saffman-Taylor instability, while surface tension blunts and splits the tips. Grooves etched in the glass raise the permeability so fingers follow them like a growing snowflake, and the image is lit like a light table with Beer-Lambert honey color and a refracting meniscus.
Try it. Drag to etch grooves and watch fingers chase them. Tap to add another air port. Scroll or use the arrow keys to change the injection rate, A cycles growth anisotropy, P shows the pressure field, N jumps to the next scene and R restarts.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a viscous fingering simulation, air pushed into honey between two glass plates, 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.
- Use a square grid of about 200 by 200 cells. Each cell is honey or air. Start with a small disc of air in the middle; cells outside a big circle are the open edge.
- In a thin cell the honey's pressure p obeys Laplace's equation. Fix p = 1 in air and p = 0 at the edge, and relax the honey cells every frame with a few dozen sweeps of successive over-relaxation (each cell moves toward the average of its four neighbors, overshooting by a factor of about 1.9).
- Honey cells touching air gain "fill" equal to the pressure drop from their air neighbors. When a cell's fill passes a threshold, it becomes air. Give each cell a slightly random threshold.
- Draw honey amber and air pale cream with putImageData.
Once that works, make it beautiful:
- Add surface tension: for each air cell on the edge, count the air in a small disc around it and lower its pressure where the air is a sharp bump, so tips blunt and split instead of spiking.
- Scale growth so a fixed area of air is injected per second, and let the mouse wheel change the rate.
- Render smoothly: blur the air map a little, sample it bilinearly at screen resolution, and use a smoothstep around 0.5 with a thin dark line for the meniscus.
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 grooves drawn with the mouse that raise the permeability, anisotropic growth for crystal-like dendrites, or contour lines that show the pressure field.
