Foam

What it is

Foam is an interactive soap-foam simulation: a two-dimensional raft of bubbles that coarsens in front of you, drawn on a plain 2D canvas with no WebGL and no 3D library. The raft is a periodic power diagram, a weighted Voronoi tessellation on a torus, rebuilt every frame by half-plane clipping each site against the neighbours a uniform grid hands it. Each site's weight takes a damped Newton step per frame so its cell's area tracks a target area. The raft is seeded on a hexagonal lattice sized for about 110 to 290 bubbles depending on the viewport, then aged through sixty coarsening steps before the first paint, so the first frame is already a polydisperse foam. The seed comes from the low sixteen bits of the clock in milliseconds, so two visits almost never start from the same raft.

The physics is the textbook of two-dimensional foams. Von Neumann's law sets each bubble's fate from its side count alone: the target area changes at a rate proportional to n minus 6, so pentagons shrink and vanish, heptagons grow, and hexagons hold, with the rate set so a bubble of mean area with five sides is gone in forty seconds. A bubble whose target drops below 2.5 percent of the mean area vanishes, and a popped bubble hands its area to its neighbours in proportion to the film each shared with it, give or take a few percent of jitter, over 0.3 seconds. Sites drift toward their cell centroids each step, which is what lets a squeezed raft settle and lets neighbours swap. Where three films meet, the junction is relaxed toward the Fermat point of its three neighbouring junctions, Plateau's 120 degrees; each film is drawn as a curve bowing toward the lower-pressure bubble, its sag set by the pressure difference with a display gain of two and capped at 22 percent of the edge length. Hovering or holding a bubble shows its side count, its fate (seconds to live, holds, growing or popping) and its film thickness in nanometres.

No colour is picked. A 256-entry lookup table holds the reflectance of a soap film in air, computed with the Airy two-interface formula at a refractive index of 1.33 and normal incidence, integrated from 390 to 710 nanometres against a Gaussian fit of the CIE 1931 observer and converted to sRGB, for thicknesses from 0 to 1400 nanometres. Each bubble's film starts between 900 and 1300 nanometres thick and drains exponentially with a time constant between 35 and 55 seconds, so its colour walks the thin-film series downward through the higher orders, the magenta and green bands and first-order yellow to silver-white; below 45 nanometres it is the black film, and the bubble ruptures 6 to 26 seconds after that. On the dark theme the film colour is added to a dark ground; on the light and sunset themes it tints the page's surface colour multiplicatively, so a black film reads as a dark cell. The Plateau borders are dark on light themes and bright on dark, and a radial highlight gives each bubble a dome.

Tap a bubble to pop it and the neighbours rush in; drag to squeeze the raft with a Gaussian hand whose radius is between 36 and 72 pixels, and neighbour swaps ripple through the foam. Fresh raft blows a new, already-aged raft; Hex raft lays a perfect honeycomb in which every bubble has six sides, so nothing coarsens until a pop, yours or a film's own rupture, breaks the symmetry; x4 ages the raft four times faster. With reduce-motion on, ageing stops and pops resolve instantly. A raft that empties refills itself after 1.2 seconds, and the canvas is capped near 2.2 megapixels so every cell's gradient fill stays cheap.

How to use it

• Tap a bubble to pop it; its neighbours take the area and the films re-settle.
• Drag across the raft to squeeze it; neighbours swap as the bubbles slide past.
• Hover or hold a bubble to read its side count, its fate and its film thickness.
• Hex raft lays a perfect honeycomb; pop one cell and watch the disorder spread.
• x4 ages the raft four times faster; Fresh raft blows a new, already-aged one.

More experiments

• Chladni Plate — canvas, physics, simulation
• Snow Crystal — webgl, glsl, cellular-automaton
• Shatter Type — Canvas, Computational Geometry, Voronoi

See every experiment