Liquid metal has four properties that make it visually distinct: surface tension pulls droplets into spheres, metallic reflection creates complex lighting, viscosity makes it flow slower than water but faster than honey, and cohesion keeps separate blobs drawn together. Simulating all four in real-time on Canvas2D required a 1980s technique called metaballs, combined with spring physics and careful rendering tricks.
Metaballs as Influence Fields
Each source point emits an influence field that falls off with the inverse square of distance:
const influence = radius * radius / (distance * distance + 0.1)
Sum all influences at each canvas position. Where the total exceeds a threshold, you are inside the liquid surface. The threshold check creates smooth boundaries -- adjacent influence fields merge seamlessly, which is what makes this look like liquid rather than a collection of circles.
Rendering in 2x2 pixel blocks instead of individual pixels cuts computation by 75% with negligible visual impact.
Physics Layer
Surface tension via spring forces. Each fluid point has a rest position in a grid. A spring force pulls it back toward rest, creating the "rubber sheet" behavior where disturbed liquid returns to shape. The spring constant controls how quickly droplets coalesce.
Viscosity via velocity damping. Each frame, velocity is multiplied by (1 - viscosity * 0.02). High values make the metal thick and sluggish. Low values make it thin. This single parameter changes the entire feel of the simulation.
Interaction forces push nearby points away from the mouse. Points within 100 pixels get a radial force proportional to their proximity. This creates realistic ripple patterns on mouse drag.
Metallic Rendering
The physics produces organic shapes. Making them look metallic requires two tricks.
Color mapping with environment-dependent hue shifts: the base color (150 + intensity * 105) gets slight red/green/blue biases modulated by sin(x * 0.01 + time * 0.001). This simulates color temperature variation across the surface, like real metal reflecting different light sources.
Animated radial gradient highlights simulate environmental lighting. Static metal looks dead. Three slowly orbiting highlight sources sell the illusion of a complex reflected environment.
Tuning Over Accuracy
The hardest part was not the algorithms. It was parameter tuning. Physical accuracy was not the goal -- emotional accuracy was. The simulation needs to feel like liquid metal even if the underlying physics are simplified. Surface tension strength, viscosity-to-responsiveness ratio, and reflectivity all required hours of reference footage comparison and user feedback to converge on values that felt right.
Try the liquid metal experiment.