← Explorations
Creature Skeletons
One rule, stay close behind, turns circles into swimming creatures.

The whole trick is one rule

Every creature in Creature Lab, the fish, the snake, the six-legged thing with tentacles, runs on a single rule: stay exactly one link behind the point ahead of you. In code, that rule is four lines:

function constrainDistance(pos, anchor, linkSize) { const dx = pos.x - anchor.x; const dy = pos.y - anchor.y; const d = Math.hypot(dx, dy); // how far apart are we now? const s = linkSize / d; // how much too far (or too close)? return { // slide along the line between us x: anchor.x + dx * s, y: anchor.y + dy * s }; }

That is a distance constraint. The point does not chase, steer, or think. It gets snapped to the circle of radius linkSize around its anchor, at the spot closest to where it already was. The motion you see, the smooth trailing, the whip of a tail, is not programmed anywhere. It falls out of the rule.

A chain is the rule applied down the line

function resolve(chain, headTarget) { chain.joints[0] = headTarget; // the head goes where it wants for (let i = 1; i < chain.joints.length; i++) { chain.joints[i] = constrainDistance( // everyone else just obeys chain.joints[i], chain.joints[i - 1], chain.linkSize); } }

Joint 1 follows the head. Joint 2 follows joint 1. By the time the loop reaches the tail, a motion at the head has rippled down the whole body, which is exactly how a rope, a snake, or a streamer behaves.

Solving constraints one after another, letting each fix ripple into the next, has a real name: the Gauss-Seidel method. You just used a tool that engineers use to solve giant systems of equations. On a creature it converges in one pass because each joint has only one anchor.

The angle limit keeps it from folding

A pure distance chain can fold back through itself, and a tight turn collapses it into a scribble. Real spines do not do that. So each joint also refuses to bend more than a few degrees from the joint ahead of it. Small limit: a stiff fish. Big limit: a floppy noodle. That one number is the Flexibility slider in Creature Lab.

The body is just circles

Give every joint a radius and the skeleton becomes a body: the outline walks down the right side of the circles, around the tail, and back up the left. Head wide, middle wider, tail narrow, and suddenly it reads as a fish. Eyes are two dots placed relative to the head joint. Fins are ellipses pinned to a joint's angle. There is no drawing of a fish anywhere in the code. There are only circles on a chain.

Legs run the chain from BOTH ends

A leg has a new problem: the hip is attached to the body and the foot needs to be planted on the ground. Two pinned ends, with the knee free in the middle. The trick is called FABRIK, forward and backward reaching inverse kinematics, and it is humble: run the distance rule from the foot up, which pins the foot but pulls the hip loose, then run it from the hip down, which pins the hip again. Textbook FABRIK repeats that pair of passes until both ends line up. Creature Lab runs just one pair each frame: the leg starts from where it was a moment ago and the foot only creeps, so a single pass keeps up, and the leg settles over a few frames of walking.

function fabrik(chain, foot, hip) { chain.joints[0] = foot; // pass 1: pin the foot for (let i = 1; i < chain.joints.length; i++) chain.joints[i] = constrainDistance(chain.joints[i], chain.joints[i - 1], chain.linkSize); chain.joints[chain.joints.length - 1] = hip; // pass 2: pin the hip for (let i = chain.joints.length - 2; i >= 0; i--) chain.joints[i] = constrainDistance(chain.joints[i], chain.joints[i + 1], chain.linkSize); }

Walking is FABRIK plus one decision: the foot stays planted where it is until the body has moved so far that the leg cannot reach, and only then does it step to a new spot. Feet that never slide are what make the lizard in Creature Lab look alive.

Where this idea came from

This technique is used all over real games and animation tools. Our version is based on the open source project animal-proc-anim by argonautcode, and the constraint explanations by Johnathon Selstad. The same idea, pushed further, gives you ropes, cloth, ragdolls, and soft bodies. It is one of the best power-to-weight ratios in all of game programming.

Creature Lab's engine is the code you saw above, plus paint. Open the Bones view in the app and you are looking at these exact circles and links.

Check yourself