Procedural feet + IK
16 legs, the same body path on both sides.
Left: every leg plays one fixed loop and ignores the ground.
Right: each foot target is cast onto the terrain, and FABRIK bends the leg to reach it.
The problem
A fixed walk cycle assumes flat ground. On rocks the feet sink in, and over a dip they paddle in the air. The left half plays one loop per leg in body space, with the same timing as the right.
How it works
- Gait timer. Step period T = max target distance ÷ speed = 0.6 m ÷ 0.78 m/s = 0.77 s. Every T ÷ 16 = 48 ms the next leg in the list takes a step. The order is a wave from tail to head, alternating sides.
- Foot target. When a leg steps, its target is the resting position pushed ahead by velocity × T ÷ 2. A ray is cast from a point above the hip toward that target, up to 2x the distance, and the foot lands where it hits the ground.
- Swing. During the 0.24 s step, the foot slides toward the target and lifts 0.14 m along the ground normal.
- FABRIK. Each 3-bone leg is solved with backward and forward passes, then each joint is rotated toward a pole above the hip so the knees point up.
What I hit
I expected steps to trigger when a foot gets too far from its target. The repo doesn't do that. Steps come from the timer, and the timer period comes from the max distance, so at constant speed it works out the same. The labels describe the timer because that is what the code does.
My build
C# ported to JavaScript in three.js 0.170. 9 body segments follow one path, 16 legs, bones of 0.12, 0.20 and 0.26 m. The body path and height are identical on both halves, so only the legs differ. The simulation runs at a fixed 60 Hz from t = 0 for every frame, so the result is deterministic.
Trade-offs
- No walk animation to author; terrain is handled per foot
- Leg count is a list, so 6 legs or 40 is the same code
- The body doesn't tilt to the terrain here (I didn't port that part)
- Timer-based steps can look stiff when the creature stops or turns sharply
When to use it
Spiders, crabs, centipedes and robots on uneven ground. Anything with more legs than you want to animate by hand.
Source and credits
Technique: procedural foot placement + IK from BattleDawnNZ/ProceduralAnimation.
Repo: github.com/BattleDawnNZ/ProceduralAnimation (MIT license), commit 027b923
Code: I ported the gait timer (CreatureController), foot target casting (ProceduralLegPlacement.Step / UpdateIkTarget / AdjustPosition) and the FABRIK solver with pole bend (FastIKFabric) from C# to JavaScript in three.js. The creature, terrain and scene are my own; no assets from the repo.
Topic inspired by @CodeerDev's procedural centipede animation.