grimoire

primitive

Linear Interpolation

Blending between a start and end value by a normalized parameter t — start*(1-t) + end*t — the foundational primitive behind most animation and range-mapping in creative code.

Also called: lerp · mix

Run it

One dot, one formula, and what happens past t = 1 start*(1-t) + end*t as a live readout · extrapolation: t outside [0,1] is not a special case, just the same line continuing · why chaining two constant-rate lerps on a shared t produces a corner
What it looks like when it goes wrong (2)
  • The formula never promised to stop at t = 1 — that clamp has to be added by the caller. Forget it in an animation loop (t = elapsed / duration keeps climbing after the tween should have finished) and the object keeps travelling past its target at the exact same rate it was closing in, rather than arriving and stopping.
  • The lower panel chains a second lerp after t = 1 instead of extrapolating the first one. Each segment is constant-rate on its own, but the two rates differ, so the join is a hard angle rather than a continuation — the wider the gap between start and end, the more violent that direction change looks. This is the exact discontinuity eased motion exists to remove.

Clean-room implementation — written from the described algorithm, not from source. Reuse policy

What it is

Blending between a start and an end value by a fraction t: start * (1 - t) + end * t. It is also called lerp or mix. This one line is what sits underneath most eased motion, gradients, and range-mapping in creative code — move this dot 30% of the way there and turn a 0–100 slider into a line width are the same operation.

How it works

  1. Get a start, an end, and a normalized t. The usual way to produce t is dividing elapsed time by total duration, so it climbs from 0 to 1 as an animation plays.
  2. Compute start * (1 - t) + end * t.
  3. Feed the result into whatever should change smoothly — a radius, a stroke width, a coordinate, a color channel.

There is no second step hiding inside it. lerp(0, 100, 0.5) returns 50 because t = 0.5 sits exactly halfway between the two boundary values the formula guarantees: lerp(start, end, 0) === start and lerp(start, end, 1) === end.

Parameters & tuning

The only knob is t, and the formula does not stop you at the ends. Because it is a plain weighted sum, t = 1.5 keeps moving past end at the same rate it was closing the gap, and t = -0.5 undershoots start the same way — extrapolation, not blending. Clamp t to [0, 1] for a hard stop; don’t if overshoot is what you want.

Notice too that the rate of change with respect to t is constant by construction — nothing here accelerates or decelerates. If motion driven by a bare lerp feels mechanical, that is the formula doing exactly what it promises; the fix is in how you shape t before it arrives here, not inside this line.

Where it’s been used

What’s on record here documents the primitive itself — DesLauriers’ own explainer, framed as general-purpose infrastructure behind “most animation and range-mapping” — rather than a specific named artwork crediting its use of lerp. Treat any claim that a particular piece “used lerp” as unremarkable until it says something more specific than that; almost everything does.

Variants & neighbours

Nothing supplied here ties this primitive to a specific alternative or extension, and that is worth stating plainly rather than papering over it. Two directions exist elsewhere in this encyclopedia that would be the natural neighbours once the graph connects them: non-linear easing curves that reshape t before this formula runs, trading the constant rate above for an accelerating or decelerating one; and multi-dimensional extensions such as bilinear interpolation, which is this same formula applied twice, once per axis.

Go deeper

Revision 2 · 1 source · Something wrong? Tell us.