How Elastic Man's Face Works: Soft-Body Physics in the Browser

Elastic Man looks like a joke and is actually a small physics engine. The face is a mesh of a few thousand points joined by springs. When you drag one point, the springs attached to it stretch, the points next to them get pulled a little, and the pull spreads out across the face until it fades. When you let go, every spring wants to return to its rest length at once, which is what produces the wobble: the skin overshoots, comes back, overshoots less, and settles.

Why the eyes lag

The eyeballs are rigid spheres sitting in sockets that are part of the soft mesh. When the skin around them moves, the sockets move first and the eyes follow, so they always seem a beat late. The lids are their own thin strips of mesh, which is why you can peel one down over the eye and watch it roll back up.

Medium vs High

The quality switch does not change the simulation. It changes how the skin is drawn — subsurface scattering, shadows and the number of triangles. On a Chromebook with an integrated GPU, High can drop the frame rate enough that the wobble looks like a slideshow. Medium keeps the same physics at a steady rate, and the toy is better for it.

Who built it

David Li, whose other browser experiments include fluid and cloth simulations, released Elastic Man as a WebGL demo. The version on this site is that original build, served from elasticman.org so it loads with the page.