Smoke rings take turns slipping through each other, from pure vortex dynamics.
Each smoke ring is a thin-cored vortex ring sharing one axis with the others. A ring moves itself forward at the speed given by Kelvin's formula and is carried by every other ring's Biot-Savart field, which for coaxial circles is exact in terms of elliptic integrals computed with the arithmetic-geometric mean. The ring behind is squeezed smaller and faster while the one in front swells and slows, so the rear ring slips through the front one again and again, as Helmholtz predicted. Ninety thousand smoke tracers ride the same velocity field and are drawn either as a laser-sheet cross section that shows the rolled-up cores or spun around the axis into full 3D rings.
Try it. Click to puff a new ring where you click (its size is your distance from the axis), or drag left or right to aim and power it. Head-on fires two rings into each other, and Wall sends one into a plate where it spreads, sheds a secondary ring and rebounds. Switch between the light sheet and 3D views, and turn the 3D camera with the arrow keys.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a simulation of two smoke rings leapfrogging through each other, 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, in 2D:
- Make a canvas that fills the window, stays sharp on high-DPI screens, and resizes with the window. Paint it near black.
- A smoke ring seen in cross section is a pair of opposite point vortices. Create two pairs on the same horizontal axis, one behind the other: each pair has a vortex above the axis and its mirror below with opposite spin.
- Each frame, move every vortex by the velocity all the others induce on it (the Biot-Savart law for point vortices, with a small core radius added to the distance so nothing blows up). Use a midpoint (RK2) step.
- Watch the rear pair narrow and speed up, pass through the front pair, and then swap roles.
Once that works, make it beautiful:
- Add 20,000 passive smoke tracers, packed around each vortex at the start, and move them with the same velocity field. Draw them as tiny additive dots, or better, accumulate them into a density buffer, blur it slightly and tone map it to soft gray smoke so the rolled-up spirals show like a laser-sheet photograph.
- Let the camera follow the rings as they travel.
- Click to launch a new ring (a new vortex pair) from where you click, with its size set by your distance from the axis.
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 true axisymmetric rings using the elliptic-integral formula for a circular vortex, a wall made from mirror-image vortices, or two rings fired head-on into each other.
