A draining soap film swirls with true thin-film colors until it turns black and pops.
Every color here is computed from a thickness in nanometers. Light bouncing off the front and back of the film interferes, so the program evaluates the Airy reflectance at 81 wavelengths, weights it by the CIE color matching functions under daylight, and stores the resulting sRGB in a table from 0 to 2,400 nm. The thickness field rides a stable-fluids flow: thinner film is lighter and rises, thicker film sinks, and thin patches pulled from the side borders climb as swirling plumes. Gravity drains the film into a profile close to the classic square root of depth over time, so bands of gold, magenta, blue and green slide downward while a black film too thin to reflect grows from the top until the film bursts and the frame is dipped again.
Try it. Drag to stir the film. Hold space (or the right mouse button) to blow on it. Click (or press P) to pop it, and press R to dip a fresh film. Hover to read the thickness under the pointer.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a soap film simulation with physically correct interference colors, 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 on a near-black background, sharp on high-DPI screens.
- Write a function that turns a film thickness in nanometers into a color. For wavelengths from 380 to 780 nm in 5 nm steps, compute the reflectance of a water film (refractive index 1.33) with the two-beam formula: R = 2r^2(1 - cos(phase)) / (1 + r^4 - 2r^2 cos(phase)), where r = (n - 1)/(n + 1) and phase = 4 pi n d / wavelength. Weight each wavelength by an approximation of the CIE x, y, z color matching functions, convert XYZ to linear sRGB, white balance so a flat spectrum is white, and gamma encode.
- Precompute that into a lookup table from 0 to 1500 nm, and draw it as a horizontal strip first to check it: black, then white, gold, magenta, blue, green, and paler bands after that.
- Fill a low-resolution grid (about 200 by 120) with a thickness that grows from 50 nm at the top to 1000 nm at the bottom, plus some smooth noise, color it with the table into ImageData, and scale it up to the canvas.
Once that works, make it alive:
- Add a simple stable-fluids velocity field (semi-Lagrangian advection and a Jacobi pressure solve) and advect the thickness along it.
- Let thinner film rise and thicker film sink by adding an upward force proportional to how much thinner a cell is than the average of its row.
- Slowly thin the whole film over time so the bands drift downward, and let the mouse stir the flow.
Explain the physics 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 black film that grows at the top and then bursts, bicubic advection for sharper swirls, or a spherical bubble with thickness varying over its surface.
