Elastic Man

How Elastic Man Works: Who Made It and What Is Simulated

Published · Updated · 3 min read

Elastic Man is a single head on a black screen with one instruction under it: "pull the skin". It was made by David Li, an artist and programmer who builds interactive pieces for the browser, and it was first published by Adult Swim in late 2017. The head is Morty Smith from Rick and Morty, which is why the face looks the way it does: round, wide-eyed, with a short brown fringe. David Li still lists it on his own site as "[adult swim] Elastic Man", next to later projects such as Blob Opera and Choir.

It is a simulation, not an animation

Nothing in Elastic Man is a pre-made animation. The game's script splits the head into parts and simulates them separately: the face mesh, the left and right eye, the hair, the nose, both ears and rings of points around the mouth. The heavy maths for the face, eyes and hair runs in a compiled WebAssembly module (the file is called face-wasm.wasm), and the skin itself is updated on the graphics card in shader passes with names like distance constraint and attachment constraint.

In plain terms, every point of the skin wants to stay a set distance from its neighbours and to stay attached to the head. When you drag one point, its neighbours get pulled along, and when you let go, all of them try to get back to where they belong at once. That is the wobble. Because it is worked out fresh each frame, no two pulls look exactly alike.

Why the head turns

If you drag a point far enough out to the side, the code stops just stretching the skin and starts turning the whole head towards your pointer. When you let go, the head eases back to face you. It turns a little faster while you are holding on than when it drifts back, which is why a long sideways pull ends with a slow, lazy return.

Wrinkles on desktop

On a laptop or desktop the game also runs a separate wrinkle simulator. Parts of the face carry a wrinkle strength, and when the skin there is squashed together, creases are drawn into it. Phones and tablets get a simpler version: the script swaps the wrinkle simulator for a static skin and removes the Quality switch, so the face is lighter to run but a little smoother-looking.

The sounds are made live

There are no audio files in the game folder. The squelches come from a small synthesizer compiled into the page (the code calls it "facesynth"), and the game feeds it numbers every frame: whether you are dragging, how far and in which direction the skin has moved, the volume and surface area of the face, and how fast the eyes are moving. The mixer has five channels, named gloop, slap, slosh, stretch and master.

The slap is the one most people notice. It plays when the point you let go of snaps back past its resting place. Browsers do not allow sound before you interact with a page, so the game tries to switch the audio on when you click or release the face. If you hear nothing at first, pull once and let go.

The build on this site is a copy of that WebGL version, served from elasticman.org. The original Adult Swim page and David Li's other work are listed at david.li.

Play Elastic Man — the full game, free →

More from the blog

More games