Interpolation: lerp, smoothstep and remap

Interpolation answers the question “what lies in between?”: between two colors, two points, two positions of a door. This page starts with lerp, which walks a fraction of the way from A to B. Then it goes back from a number to a fraction, converts a number from one range to another, and shapes motion with smoothstep and easing curves. It ends with a trap that catches almost every camera that follows the player.

Why this matters

A game is always moving from one thing to another. A door opens, day turns to evening, moss gives way to stone, a camera catches up with the hero. If the change jumps, the eye sees a jolt. The in-between values are almost always computed with the same few simple formulas: lerp, inverse lerp, remap, smoothstep and smoothing toward a target. This page takes them in that order.

It helps to have read the lesson on vectors first. You met lerp in the lesson on color as blending by a mask. This page shows why it is built that way and what grows out of it.

Further in the article

1. Lerp: walk a fraction of the way
2. Inverse lerp: how far along are you?
3. Smoothstep: soft edges
4. Easing curves: speeding up and slowing down
5. The trap: lerp toward the target every frame
6. Interpolation in graphics
7. Where it breaks
8. Connections: the same idea in other fields
9. Key points
10. Test yourself