Jelly Pour

Design Notes

Concept: A fullscreen lava-lamp made of 8 candy-colored jelly blobs. Tilt an iOS/Android device to pour them around; blobs sing pentatonic notes when they merge, making music impossible to get wrong.

Metaball math: Each blob contributes a field value using a Hermite smoothstep falloff (t² (3−2t) where t = 1−d/r), capped at zero outside the radius. Summing all 8 fields and thresholding at 1.0 gives the classic lava-lamp goo shape. Colors are blended proportionally to each blob’s field weight.

Smooth-min (smin): Inigo Quilez’s polynomial smin blends the iso-surface transitions — the shader uses smoothstep thresholds on the total field to produce bright rims + additive halos at merge zones.

Performance (Van Der Merwe Apr 2026): Hermite falloff instead of exp(), fixed 8 blobs, noise capped at 2 octaves, devicePixelRatio capped at 2 — halves GPU load on 3× phones.

Physics: Each frame a tiny CPU step applies gravity (from device tilt via deviceorientation gamma/beta → smoothed gravity vector), DAMPING=0.985, edge RESTITUTION=0.55, and soft blob–blob repulsion within 16% normalized radius. Velocities capped at 0.5 for gentle motion.

Sound: C-major pentatonic (C4–E5). Each blob owns one note. Merges trigger a sine+triangle voice → feedback delay shimmer → DynamicsCompressor limiter. A low C–E–G ambient pad swells with the slosh metric (mean blob speed).

Degradation: iOS DeviceOrientationEvent requestPermission called inside the start-button tap. If no tilt events arrive within 1.8s, auto-switch to pointer-drag fallback. WebGL failure shows a readable notice while ambient pad plays on.

References: Damian Van Der Merwe, “Painting with Math: Building an Interactive Lava Lamp Shader from Scratch” (damianvandermerwe.com, April 3, 2026). Inigo Quilez, smooth-min / SDF techniques (iquilezles.org). Related prototypes: 83-kids-tilt-rain, 169-kids-marble-run, 84-wave-fluid.

Limitations: Physics is a simple Euler-integration CPU step with no true fluid simulation. Blobs don’t visually split — they only look merged in the shader field.

Next cycle: True SDF-signed distance field for per-blob outlines; gyroscope-assisted 3-axis tilt; Karplus-Strong pluck voices instead of sine+triangle; save a “melody” from blob collisions.