The Beauty of Bézier Curves: From Interpolation to Motion

A camera can fly along a path, and a track can bend through a game world. But a useful path must also tell us which way it points, how sharply it turns and how far an object has traveled. In her 2021 video, Freya Holmér builds those answers from a remarkably small operation: interpolation between points.

Her examples include a rollercoaster and the editable tracks in her game Flowstorm. Connecting curve segments produces a spline; this discussion concentrates on the individual Bézier segments, especially cubics, rather than the wider family of splines.

Linear interpolation, or lerp, blends two points A and B: lerp(A, B, t) = (1 − t)A + tB. At t = 0 it gives A; at t = 1 it gives B; at t = 0.5 it gives their midpoint. Here t ranges from 0 to 1.

With three control points P0, P1 and P2, lerp along both adjacent edges using the same t, then lerp between the two results. As t changes, that final point traces a quadratic Bézier curve. With four control points, perform the same operation in three layers: three intermediate points, then two, then one. The final point traces a cubic. Moving the control points changes the path without changing the construction.

02:58View full image

At 02:58, the blue segment joins the two intermediate points; the white point traces the curve as the shared parameter changes.

The nested procedure is called de Casteljau's algorithm. Holmér values it for numerical stability and for being easy to remember: repeatedly interpolate the preceding points. Expanding those lerps and collecting the control points produces the equivalent cubic Bernstein form:

P(t) = (1 − t)³P0 + 3(1 − t)²tP1 + 3(1 − t)t²P2 + t³P3.

Each polynomial is a weight on a control-point vector. For t between 0 and 1 the weights are nonnegative and add to one: the first has all the weight at the start, and the last has it at the end. The weighted sum and the nested construction produce the same point at the same t.

05:03View full image

At 05:03, the displayed expanded coefficients are the same weights written in polynomial form. Holmér also uses a three-dimensional Bézier curve in RGB color space to blend the colors in this visualization.

The first derivative P′(t) is the vector rate of change with respect to t. For a cubic it is itself a quadratic Bézier curve, with control vectors 3(P1 − P0), 3(P2 − P1) and 3(P3 − P2). Differentiating again gives a linear curve; the third derivative is constant. This degree reduction is a general property of Bézier derivatives.

Holmér uses velocity, acceleration and jerk as an intuition for these successive derivatives. Those names refer directly to physical motion only with an appropriate time parameterization: if t changes with time, physical velocity also depends on how fast t changes. In particular, P′(t) alone is not automatically velocity per second.

Where P′(t) is nonzero, normalizing it gives a unit tangent, the direction along the curve. In the planar example, rotating that direction 90 degrees gives a perpendicular normal. Offset points along the normal can help construct a road around a path. A zero derivative cannot be normalized; and in 3D a tangent has many perpendicular directions, so a road frame needs an additional orientation choice.

07:33View full image

At 07:33, the arrow illustrates the local derivative direction; the formula at left describes how it varies with t.

For a planar parametric curve with nonzero P′(t), signed curvature is κ = det(P′, P″) / |P′|³. The determinant captures the relation between the first and second derivatives; the denominator accounts for the parameter's local rate. The sign indicates turning direction under the chosen orientation, while the magnitude tells how tightly the path bends.

An osculating circle matches the curve's local curvature. Its ordinary, nonnegative radius is 1 / |κ|; the sign of κ instead indicates the side of the turn. In Holmér's example the sign changes through zero at an inflection. At zero curvature there is no finite osculating-circle radius; at zero derivative the formula itself is singular, so this calculation does not define curvature there.

10:35View full image

At 10:35, the curve changes color as the plotted curvature changes sign. The circle illustrates a local match, not a radius for the whole path.

A bounding box encloses the curve and can provide a cheap first rejection before a more expensive intersection test. A box around all control points is easy to construct but may be much larger than the actual curve. To find a tight axis-aligned box, examine x(t) and y(t) separately.

For a cubic, each coordinate derivative is at most quadratic. Solve x′(t) = 0 and y′(t) = 0, retain real roots in [0, 1], and evaluate the curve at those candidate parameters and at both endpoints. The smallest and largest x and y values among these evaluations define the box. A stationary point is a candidate, not necessarily a boundary of the final box. If a derivative degenerates to a linear or constant expression, handle that lower-degree case instead of blindly applying the quadratic formula.

11:50View full image

At 11:50, the colored points mark coordinate extremes on the curve; endpoints also have to be considered, even when they are not highlighted as interior extrema.

Arc length is distance measured along the path, rather than straight across it. For a general cubic Bézier, its length integral has no elementary closed form; particular curves can have simpler exact lengths. A practical estimate samples the curve at successive t values, joins adjacent samples with line segments and sums their lengths. More samples can improve the approximation but require more computation.

This distinction matters for animation: knowing the total length does not by itself reveal how far along the curve a given t lies.

Holmér first proposes setting t = distance / total length. In her initial example it appears to work: half the total distance seems to land at t = 0.5. She then changes the control points and shows the shortcut failing. Equal increments of t generally produce uneven distances, because the magnitude of P′(t) can vary along the curve. Equal t increments over equal time therefore need not give constant physical speed.

15:35View full image

At 15:35, the displayed t = distance / arc length is the setup for a counterexample, not a general conversion rule. The particular shape makes it look convincing before the curve is changed.

Sample a sequence of t values and store each alongside the cumulative length of the connecting segments up to that sample. Given a desired distance, find the neighboring cumulative-distance entries and estimate the corresponding t between them; evaluate P(t) at that estimated parameter. Repeating this for equally spaced distances produces approximately even positions and, when distance advances uniformly with time, approximately uniform motion.

18:30View full image

At 18:30, the graph maps sampled parameters to cumulative distance; its changing slope makes the nonuniform relationship visible. The table is an approximation, not an exact inverse: sample resolution affects accuracy, storage and computation. This is Holmér's practical approximation to arc-length parameterization.

Holmér closes by stressing that Bézier curves are only part of the larger spline family, which also includes B-splines. For this 2021 production, she says the animations other than external footage were made in Unity, using a custom timeline, code, her Maths library and Shapes vector graphics plugin. A custom recorder exported PNG sequences for editing in DaVinci Resolve. These are details of that video's workflow, not a claim about her current tools.