Thin-film iridescence live WebGL2
This browser cannot run WebGL2, so the bubble is resting as a picture. Open the page in a current browser to blow your own.
Keyboard: B blows a bubble, S starts a bubble storm, P pops them all, R starts over.
Real soap-bubble colour, worked out light wave by light wave. Blow one from your fingertip, let two drift together into a double bubble, then pop them into a spray of droplets.
A soap film is a few hundred nanometres thick. Light reflects from its outer and its inner surface, and the two copies overlap. Where their waves line up a colour gets brighter; where they fall out of step it cancels. Every thickness has its own colour.
For each pixel the page finds the film thickness at that spot, sums the reflection at fourteen wavelengths from violet to red for both polarisations of light, and turns the spectrum into a screen colour. Nothing is a painted gradient.
Gravity drains the film, so every bubble is thicker at the bottom and thinner on top. A slow swirl stirs it into moving bands. As a bubble ages its crown turns dark, which means the film is almost gone, and then it bursts.
Each bubble's surface is 642 points on springs. Knock two together and both flatten where they meet, then ring back into shape. Touch them gently and they join, meeting at 120 degrees with a shared wall that bows into the bigger one.
The film is only a few hundred nanometres thick. Light bounces off its outer and inner surface, and the two reflections overlap. Depending on the thickness, some wavelengths line up and get brighter while others cancel, so each thickness shows its own colour.
Calculated. For every pixel the page works out the film thickness at that spot, then adds up the reflection at 14 wavelengths from violet to red, for both polarisations of light, and converts that spectrum into a screen colour.
When two bubbles touch gently they share a wall instead of bouncing. The page keeps them at the distance where the three films meet at 120 degrees, the angle real soap films always settle to, and bends the shared wall into the bigger bubble because the smaller one has the higher pressure.
Yes. It runs on WebGL2, which current phone and desktop browsers support. It lowers its resolution when frames run slow and stops drawing when the stage is off screen or the tab is hidden.
Yes. Bubble is a website template from Apex Flow Digital. You get this page, the engine source and one config file where you set the wordmark, the five film presets and every colour.