Give a computer a start and an end — two positions, two orientations — and ask for the "in‑between." There is no single answer. Lerp walks the straight chord and blends the raw numbers; slerp swings the true arc at a steady turning rate; easing keeps the path but bends time. Drag the blue and pink craft, spin their headings, then scrub t and watch three different "middles" appear at once. How you interpolate is a design decision, not a law of nature.
Linear interpolation (lerp). The workhorse: blend two quantities in a straight line and scale the blend by t ∈ [0,1].
Spherical interpolation (slerp). For orientations, blend along the arc at constant angular speed. On the circle/sphere of unit directions,
Here the craft's position‑slerp swings around a movable pivot p: interpolate the polar angle on the shortest arc and the radius linearly,
Easing. Easing never touches the path. It replaces the clock with a reparametrised time t' = e(t), then interpolates as usual with t'. A valid easing pins the ends, e(0)=0, e(1)=1, and is free in between:
The equal‑t tick dots make easing legible: they sit at t = 0, 0.1, …, 1, but the craft sits at e(t), so where e is steep the dots race apart and where e is flat they crowd.
Why slerp needs 3D in general. Real orientations live on the unit quaternions (a 3‑sphere); slerping them is the honest way to blend two 3D rotations without the wobble and gimbal artefacts of blending Euler angles. This 2D lab is that idea's shadow — it links directly to the repo's quaternions and Hopf‑fibration pieces.
Where you meet it. Camera fly‑throughs, character animation "tweening," morph transitions, keyframe curves in After Effects/Blender, texture and colour blends, and robot trajectory planning are all this same three‑way choice: blend the numbers, blend the geometry, or blend the time.
Real computation. Each frame the sketch reads the live pose handles (positions and headings of A and B and the pivot) and recomputes, from scratch: the lerp chord as (1−t)A+tB; the slerp arc by interpolating the shortest polar angle about the pivot with a linearly‑blended radius; the lerp heading by blending the raw heading unit vectors and taking atan2; the slerp heading by advancing the angle along the shortest arc at constant rate; and the eased pose by feeding t'=e(t) into the straight‑line blend. Nothing is tabled or pre‑rendered.
Cross‑checks on screen. The "turn‑rate" readout numerically differentiates each heading (finite difference around t); slerp reports a flat rate while lerp visibly varies — the textbook signature. Path lengths are integrated by sampling each curve at 240 points and summing segment lengths, so the slerp arc always reports longer than the lerp chord for the same endpoints, matching "a chord is the shortest path." The equal‑t ticks are placed at exact tenths of t, so their spacing is a direct read‑out of local speed e'(t).
Honest limits. True orientation slerp lives on unit quaternions; the 2D reduction used here is exact for planar rotations (a single angle) but is a simplification of the full 3D story — flagged, not hidden. When the two headings are exactly antipodal the shortest arc is ambiguous; the code picks the positive direction deterministically rather than pretending the choice doesn't exist.
Built to sit beside the repo's other applets (Quaternions, Hopf fibration #21, Matrices #40, Eigenvectors #23). Idea #41 from the 45 maths visual‑teaching ideas list. Tech: p5.js + KaTeX, self‑contained single file, no build step.