Jeremiah is a procedurally animated creature that evokes the behavior of predatory insects. I used the uncannily natural feel of live-calculated motion combined with sharp starts and stops to give the sense of a restrained predator. Extra legs always ups that icky feeling too.
Jeremiah is a p5.js sketch that runs live on OpenProcessing. Its motion is entirely generative, with no preset animations: everything is calculated fresh on each frame. The head moves along a path driven by noise, and every other part of the creature reacts downstream of that movement according to a small set of rules. The body follows the head on springs, the legs grip the edges of the canvas, and the feelers trail behind the head.
The parts of Jeremiah on a single frame, cropped to the top right corner of the canvas.
The head
The head orbits the center of the 600 x 600 pixel canvas. As it goes, two things change over time: how far it is from the center, and how quickly it turns. Both are controlled by the same Perlin noise value, which wanders smoothly between 0 and 1.
Distance. The head always stays between 50 and 300 pixels from the center. A high noise value pulls it in toward the middle, and a low one pushes it out toward the edges.
Turning. When the noise value is above 0.5 the head turns clockwise, and when it is below 0.5 the head turns counterclockwise, turning faster the further the value gets from 0.5. Each time the value crosses 0.5, the head slows to a stop and reverses direction. On top of that, a second noise value that changes four times as fast speeds the turning up and slows it down.
Since distance and turning are tied to the same noise value, the head moves much faster when it is far out from the center than when it is close in. Holding the mouse down doubles the turning speed and keeps the head between 200 and 300 pixels from the center.
The head’s path over 200 frames, with older parts lighter. The dashed circles mark the closest and farthest it can get from the center.
The body
The body is a chain of 31 segments with a tail at the end, and each segment is connected to the one in front of it by a spring with a rest length of 6 pixels. On every frame, the sketch works its way back from the head to the tail, moving each segment toward the one in front of it. Rather than closing the whole gap at once, a segment covers 80 percent of the distance beyond the rest length.
This is a common, simplified way to simulate a spring. The pull on each segment grows in proportion to how far the spring is stretched past its rest length, which is Hooke’s law. In a full physics simulation, that pull would change the segment’s velocity, so the segment would speed up, overshoot, and bounce back and forth before settling. The Nature of Code walks through that version in p5.js. Jeremiah skips velocity and uses the pull to move the segment directly, so there is no momentum to carry it past the rest length, and the body eases into place without bouncing. A body that bounced like that would look unnatural. Moving points straight to where a constraint wants them, instead of simulating forces, is also the core idea behind position based dynamics, a technique used to simulate things like cloth, rope, and soft bodies.
Because the whole chain updates in order within a single frame, the body follows the path the head took, cutting slightly inside the curves. While the head is moving, the springs never quite catch up, so the faster the head goes, the more the gaps between segments grow. At top speed the body stretches to almost twice its resting length. Each segment is drawn as a white line 20 pixels thick with rounded ends, which makes the chain read as one smooth body.
The body at two head speeds, drawn at the same scale. Each dot is a segment.
The legs
Every other segment has a leg, for 16 legs in total. Rather than standing on a floor, the feet grip the box that encloses Jeremiah, which is the edge of the canvas. On each frame, the sketch finds the point on that box closest to a leg’s hip. Whenever the foot needs a new spot, it lands at a random point on the same edge, within 200 pixels to either side of that closest point.
This hip is closest to the left edge, so its foot lands somewhere in the shaded range.
Once a foot has been placed, it stays planted while the hip and knee keep moving. It only takes a step once the hip gets 400 pixels away from the foot along the edge, or when a different edge becomes the closest one to the hip. The new spot is chosen the same way as the first, and the foot jumps there in a single frame.
Even though each foot jumps instantly, the number of legs and the smooth motion of the body make the eye read each jump as a quick step. That saved me from having to program the more complex kinematics of actually moving each foot through the space in between.
Four frames of the same leg, from oldest (lightest) to newest (darkest).
Between the hip and the foot is the knee, which is pulled by two springs, one attached to each. When a leg is created, the rest lengths of its two springs are picked at random between 90 and 150 pixels, so every leg ends up with slightly different proportions. On each frame, the sketch compares each spring’s current length to its rest length. If a spring is too long, the knee moves toward that spring’s end by half the difference, and if it is too short, the knee moves away from it by half the difference. The moves from the two springs are added together.
Over a few frames, this brings the knee to the point where both springs are at their rest length, which is where the two dashed circles in the diagram below cross. There are two of these points, one on each side of the line from the hip to the foot, and the knee settles on whichever side it is already on. If the foot is farther away than the two rest lengths added together, the circles never meet, so the leg pulls straight. The knee then sits halfway across the gap between the two circles, and the upper and lower leg each stretch by the same amount to cover the distance.
The arrows follow the knee from one frame to the next until it settles.
The feelers
The head has 50 feelers. Each one is a chain of 11 points, and like the body, each point follows the point in front of it, with the first point following the head. The rule for following is different, though. A body segment is held at a rest length by its spring: if it gets closer than 6 pixels to the segment ahead, the spring pushes it back out. Feeler points have no rest length, and on each frame, each point does two things in order:
1.It moves 10 percent of the way toward the point in front of it. On its own, this step would pull the point a little closer every frame, until the whole feeler collapsed onto the head.
2.It shifts by a small, fixed offset called its drift. Each feeler is given one random drift when it is created, between -1 and 1 pixels on each axis, and every point on that feeler uses the same drift on every frame.
Top: one frame. Bottom: the next frame.
The drift is what keeps a feeler from collapsing. To see why, call the distance between a point and the point in front of it D, and the size of the drift d. To keep things simple, assume the drift points straight away from the point ahead, as it does in the diagram. On each frame, step 1 pulls the point in by 0.1 × D, and step 2 pushes it back out by d. Which one wins depends on D:
If 0.1 × D is less than d, the push is bigger, so the point moves out and D grows.
If 0.1 × D is more than d, the pull is bigger, so the point moves in and D shrinks.
If 0.1 × D equals d, the two cancel out and the point stays where it is.
In every case, the point ends up where 0.1 × D = d, which is at D = 10 × d. That is the equilibrium marked in the diagram. For example, with a drift of 1 pixel, a point 10 pixels away gets pulled in 1 pixel and pushed out 1 pixel, so it doesn’t move.
A real feeler’s drift can point in any direction, not just straight away from the point ahead. That doesn’t change the result. The sketch applies both steps to the x and y coordinates separately, and the same reasoning works on each axis on its own, so the point still settles 10 × d away from the point ahead. The only difference is that it settles in whichever direction its drift points.
When the head is stationary, every point reaches its equilibrium. All of a feeler’s points share the same drift, so each one sits 10 × d beyond the point ahead of it, in the direction of the drift, and the feeler forms a straight line 110 × d long.
When the head moves, each point’s equilibrium moves too, since it is always 10 × d from the point in front. Call the distance between a point and its equilibrium e. The pull and the push together move the point 0.1 × e toward its equilibrium each frame. If the head moves v pixels per frame, the point can only keep pace once 0.1 × e = v, so it falls behind until e is about 10 × v, or roughly 10 frames’ worth of movement. Each of the 11 points lags this much behind the one in front of it, so the tip of a feeler ends up roughly 100 frames behind the head, which is why the feelers sweep back along the path the head just took.
The same 50 feelers with the head stationary and moving. One feeler is drawn in black.
How the parts work together
The head is the only part of Jeremiah that moves on its own, wandering around the center of the canvas on a path driven by noise. Everything else is a reaction to something it is attached to. The body follows the head’s path on springs, and because those springs lag behind, it stretches out when the head speeds up and pulls back together when the head slows down. The legs hang off the body, so the body carries their hips along with it. Their feet stay planted on the edges of the canvas until a hip moves too far away, then jump to a new spot, while each knee keeps settling between its hip and foot on its own pair of springs. The feelers hang off the head and ease along behind it, sweeping back over the same path the body is following.
Since each part only responds to the part it is connected to, a change in the head’s movement works its way through the whole creature. When the head slows to a stop and turns back, the body pulls back to its resting length, the feelers swing around to trail the other way, and the legs keep stepping to new footholds as the hips move past them. Each of these rules is simple on its own, but layering them makes all of the parts move together as one creature.