The Material That Flinches
The story behind The Membrane
Inspired by Electroactive polymer on Wikipedia
Built with Three.js · ShaderMaterial · WebGLRenderTarget (Ping-Pong FBO)
Techniques 2D Wave Equation · Fresnel Iridescence · Blinn-Phong Specular · Caustic Approximation · Subsurface Scattering · Height-Field Normal Mapping
Direction Simulate electroactive polymer physics as a touchable surface with real Maxwell stress instability and snap-through failure
Result A breathing iridescent membrane that dimples under your cursor, builds stress under sustained pressure, and tears open with a shockwave when the threshold breaks
The Story
In the 1990s, materials scientists discovered something unsettling: certain polymers, when placed between flexible electrodes and hit with voltage, would contract, expand, and bend like biological tissue. They called them “artificial muscles.” The name stuck because the resemblance is primal — a thin, soft membrane that twitches in response to stimulus isn’t a machine. It’s doing what life does: converting energy to motion through soft matter.
The physics is governed by Maxwell stress: P = epsilon-naught times epsilon-r times E-squared. The electric field squeezes the membrane. As it compresses, it gets thinner. A thinner membrane means a stronger field. A stronger field means more compression. This is a positive feedback loop — and it has a breaking point. Push past a critical threshold and the material doesn’t degrade gradually. It snaps through — a catastrophic, instantaneous state change from one stable configuration to another. Not a failure. A phase transition.
We wanted to put that physics on a screen you could touch.
The Take
The experience opens on a warm, bright surface. Not dark — deliberately warm. The membrane breathes: a slow, multi-frequency oscillation that creates organic iridescent patterns across the surface. Move your cursor close and the membrane bulges toward you, attracted. Press down and it dimples, ripples spreading outward through the wave equation. The deformation is real physics — not tweened, not eased, not animated. Computed.
Hold your finger down and the stress builds. A warm glow appears around your touch point, shifting toward red. Hold too long — about two seconds — and the membrane snaps through. The surface tears open with a shockwave that radiates in concentric rings. For a moment, you see through the rupture to a dark void beneath. A purple glow rims the tear. Then it heals. The spring forces pull the membrane back to rest. The breathing resumes. It waits for you to try again.
The Tech
The entire experience runs in two GLSL fragment shaders and a ping-pong framebuffer.
The physics simulation stores the membrane state in a 256x256 float texture — red channel for height, green channel for velocity. Each frame, a physics shader reads from texture A and writes to texture B, then they swap. The update is a discretized 2D wave equation: each texel’s acceleration equals the Laplacian of its neighbors (wave propagation) minus a spring force pulling toward rest (elastic return) minus viscous damping (energy loss). The wave speed is 0.35 in texel units — safely below the CFL stability limit of 0.5 — producing ripples that cross the screen in about seven seconds.
Mouse interaction injects force into the simulation. When the cursor hovers (no press), a small positive Gaussian force lifts the membrane toward the cursor — the “attraction” effect. When pressing, a negative force pushes it down. Both forces are aspect-ratio-corrected so the Gaussian is circular on screen despite the square simulation grid. The breathing is two sine waves at different frequencies (0.5 Hz and 0.87 Hz) with spatial variation — each texel gets a slightly different phase based on its UV position, creating the organic, non-uniform undulation.
The snap-through is triggered by CPU-side hold tracking. After 1.8 seconds of sustained pressure, a massive negative impulse (-0.15, versus the normal push of -0.002) fires for three frames. This drives the height to approximately -0.87 in the center — well past the void reveal threshold. The wave equation then naturally propagates the shockwave outward as concentric rings. The spring force and damping bring the center back to rest over the next few seconds.
The render shader reads the height field and produces the final visual. Surface normals are computed from finite differences between neighboring texels, scaled by 15x for visible shading detail. The Laplacian serves double duty as a caustic approximation — where the surface is concave, light focuses (brighter); where convex, it spreads (dimmer). A Fresnel term at steep normal angles drives thin-film iridescence: the rainbow color is mapped through HSV using a phase that combines the Fresnel factor, absolute height, and velocity, so any deformation creates rainbow shimmer. Two Blinn-Phong specular lights provide glossy highlights. Below height -0.35, a dark void begins to show through the membrane, rimmed by a purple edge glow. The whole surface blends to a warm cream background at the screen edges through a distance-based fade.
No Three.js scene graph. No particles. No geometry beyond a full-screen quad. The entire visual is computed per-pixel in the fragment shader from a 256x256 physics texture. The membrane IS the shader.
The Experience
You open it. A warm, bright surface breathes in front of you. Soft pinks and lavenders shift through iridescent patterns. It’s alive before you touch it.
Move your cursor. The surface lifts toward you — attracted. Press down and it dimples. Ripples spread outward, reflecting off the pinned edges, interfering with each other. Caustic light patterns dance across the surface. The membrane remembers your touch in the physics — energy doesn’t disappear, it propagates.
Hold. The area around your finger warms, glowing red. Something is building. Hold longer. The membrane is thinning. The positive feedback loop is running. And then — snap. The surface tears open. A shockwave explodes outward in concentric rings. Through the rupture, you see void: dark, deep, empty. The membrane was a skin over nothing.
Then it heals. The spring forces pull the tear closed. The ripples settle. The breathing resumes. The membrane doesn’t judge you for breaking it. It just reforms and waits.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.