Thirteen dots on black, and you see a person walking, running, dancing or carrying a box.
Johansson's biological motion display: thirteen dots at the head, shoulders, elbows, wrists, hips, knees and ankles of a procedural 3D body. Each action is a set of joint angle curves over the gait cycle (a phase-shifted cosine at the hip, the two humps of real knee flexion built from periodic Gaussians, arms swinging against the legs) turned into positions by forward kinematics, and for walking the pelvis height is solved so the lower ankle just touches the ground, which gives the natural bob. Mood and weight bend those curves the way they bend in people, and the projection is orthographic, as in the original films. Scrambled-walker mask dots, position scrambling and inversion break the percept even though every dot keeps its exact motion, and a built-in 2-down-1-up staircase measures how many mask dots you can tolerate. Marey mode takes the walker off the treadmill: the body advances by exactly the distance its planted foot sweeps back, and twelve exposures per stride build up a chronophotograph plate tinted by time.
Try it. Pick walk, run, carry, dance or jumping jacks (keys 1 to 5) and drag to turn the figure. Sliders set mood, weight, speed, mask dots, position scrambling and phase desynchronization; I turns it upside down, K shows the skeleton and C (or the Marey button) sends it walking across a chronophotograph plate. 'Test your perception' hides a walker among mask dots: say which way it faces with the arrow keys (or tap a side) and the staircase finds your threshold, upright and inverted.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a point-light walker, Gunnar Johansson's famous biological motion display, with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), resizes with the window and is painted black.
- Model a side view of a body as joints: head, shoulder, elbow, wrist, hip, knee and ankle, with a left and a right copy of each limb (13 points).
- Drive it with a gait phase p that runs from 0 to 1 every second or so. Hip angle is a cosine of p, knee flexion is a small bump early in the cycle plus a big bump around p = 0.7 (use Gaussians), and the arms swing opposite to the legs. The left side uses p + 0.5.
- Turn the angles into positions with forward kinematics (each segment hangs from its parent at its angle), then raise the pelvis so the lower ankle touches the floor. That alone gives the body its natural bob.
- Draw only a white dot at each joint. No lines. It should still unmistakably look like a person walking.
Once that works, make it beautiful and make it break:
- Give the dots a soft glow and optionally faint trails, so the ankle's loop and the wrist's arc show up.
- Add sliders for speed, stride and arm swing, and a mood setting that drops the head and shrinks the swing when sad.
- Add a button that flips the display upside down, and one that adds noise dots copying the joints' motions at random places and phases. Notice how quickly the person disappears.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a 3D body you can rotate, a running or dancing gait, or a little experiment that measures how many noise dots I can tolerate.
