The Bubble Point

Artificial Noodles ·

The story behind The Bubble Point

Inspired by Bubble point on Wikipedia

Built with Three.js · Custom ShaderMaterial · Instanced particles · Hot-metal color ramp

Techniques Raycasted press-and-hold interaction · Concentric heat ring shader · Particle fountain with gravity and bounce · Exponential crater cooling · Expanding shockwave rings

Direction Press and hold to build pressure. Release to erupt.

Result A dark liquid surface that erupts into volcanic particle cascades — each eruption scars the landscape with a glowing crater that slowly cools from white through orange to deep red

The Story

The bubble point is the exact temperature at which the first bubble of vapor forms in a heated liquid. Below this threshold, the liquid holds. Every molecule vibrates, collides, transfers energy — but the surface tension wins. The liquid maintains its composure.

Then you cross the threshold. One degree, one fraction of a degree, and the first bubble nucleates. Not gradually — suddenly. The calm surface breaks. What was contained is released. What was potential becomes kinetic.

This is a phase transition — one of physics’ most dramatic phenomena. The system doesn’t degrade smoothly from one state to another. It snaps. There’s a threshold, and on either side of it, the world behaves differently. Below the bubble point: liquid. Above it: eruption.

The interesting thing about phase transitions is that the calm before them is real calm. The liquid at 99° looks identical to the liquid at 50°. Nothing about its surface betrays how close it is to breaking. Every calm surface conceals its proximity to eruption.

The Take

A deep midnight blue surface fills the screen — liquid, dark, subtly animated with slow noise patterns. A prompt suggests: “press and hold.”

You press. Concentric heat rings radiate from your finger. The surface flushes through the hot-metal spectrum — deep purple at the edges, through crimson, through orange, to a bright yellow-white center. The rings pulse outward. The longer you hold, the more rings appear, the more intense the center becomes. You’re building pressure. You can feel the threshold approaching.

You release. The surface erupts. Hundreds of particles blast upward from the point where your finger was — bright white and yellow at the core, cooling to orange, red, and finally purple as they arc through the air and fall back. A shockwave ring races outward across the surface. At the center, a glowing crater remains — the scar of the eruption.

The crater cools slowly. White fades to yellow, yellow to orange, orange to deep red. It never fully disappears. Each eruption permanently marks the landscape.

Press again somewhere else. Build pressure. Release. Another eruption, another crater. The surface transforms from pristine liquid into a volcanic field — a landscape of phase transitions, each one a record of the moment you pushed past the threshold.

After enough eruptions, text emerges from the scarred surface: “every calm surface is a lie waiting to be told.”

The Tech

Three.js Scene

A perspective camera looks down at the liquid surface from a slight angle — enough to see particles erupting upward, enough to read the surface as a landscape. The surface is a single large plane with a custom ShaderMaterial. Particles are rendered as Points with additive blending.

Surface Shader

The liquid surface combines three octaves of simplex noise at different scales and speeds, producing a subtle living texture in deep midnight blue. The shader handles four dynamic effects:

  1. Heat rings — during a press, concentric Gaussian rings radiate from the press point. A hot-metal color ramp maps hold duration to color: 0s = deep purple, 1s = crimson, 2s = orange, 3s = yellow, 4s = white. Each ring’s intensity decreases with distance from center.

  2. Craters — persistent glow marks at eruption sites. Each crater has an inner bright glow and a wider ambient glow, colored by the hot-metal ramp based on remaining intensity. Craters cool exponentially — taking about 30 seconds to fade noticeably.

  3. Shockwaves — expanding rings triggered on release. Each shockwave is a Gaussian ring that expands outward and fades, colored with the hot-metal ramp.

  4. Edge treatment — the surface fades smoothly to the background color at its edges, with a subtle center vignette for depth.

Hot-Metal Color Ramp

Both the shader and the JavaScript particle system share a five-stop color ramp modeled on blackbody radiation: deep purple (cool) → crimson → orange → yellow → white-hot. This ramp unifies the entire visual language — heat rings, craters, shockwaves, and particles all speak the same thermal vocabulary.

Particle System

Each eruption spawns 150–500 particles (scaling with hold duration) from a pre-allocated pool of 6000. Three particle types create visual variety:

Particles obey gravity (18 m/s²), bounce off the surface with 30% restitution, and fade based on remaining life. Colors track the hot-metal ramp — bright white at birth, cooling to deep red before death.

Press-and-Hold Interaction

Raycasting converts screen coordinates to surface intersection points. The hold duration directly controls:

A minimum hold of 150ms prevents accidental taps from triggering eruptions.

Camera Shake

Each eruption applies a camera shake proportional to eruption intensity. The shake decays exponentially, creating a visceral impact feel.

Mobile

Touch events map directly to press-and-hold. An idle auto-eruption demo triggers after 3 seconds of no interaction, placing eruptions at random surface positions to demonstrate the effect.

Experience The Bubble Point →

Source: Bubble point on Wikipedia