Bezier Curves from the Ground Up (2016)

Bezier Curves from the Ground Up

Logo Created using Figma

Zerø Wind

Jamie Wong

December 29, 2016

Bezier Curves from the Ground Up

This post is also available in Japanese: 一から学ぶベジェ曲線.

How do you describe a straight line segment? We might think about a line segment in terms of its endpoints. Let’s call those endpoints $ P_0 $ and $ P_1 $.

To define the line segment rigorously, we might say “the set of all points along the line through $ P_0 $ and $ P_1 $ which lie between $ P_0 $ and $ P_1 $“, or perhaps this:

$$ L(t) = (1 - t) P_0 + t P_1, 0 \le t \le 1 $$

Conveniently, this definition let’s us easily find the coordinate of the point any portion of the way along that line segment. The midpoint, for instance, lies at $ L(0.5) $.

L(0.5)

$$ L(0.5) = (1 - 0.5) P_0 + 0.5 P_1 = \begin{bmatrix} 0.5(P_{0_x} + P_{1_x}) \\ 0.5(P_{0_y} + P_{1_y}) \end{bmatrix} $$

We can, in fact, linearly interpolate to any value we want between the two points, with arbitrary precision. This allows us to do fancier things, like trace the line by having the $ t $ in $ L(t) $ be a function of time.

L(0.5)

If you got this far, you might now be wondering, “What does this have to do with curves?“. Well, it seems quite intuitive that you can precisely describe a line segment with only two points. How might you go about precisely describing this?

It turns out that this particular kind of curve can be described by only 3 points!

This is called a Quadratic Bezier Curve. A line segment, donning a fancier hat, might be called a Linear Bezier Curve. Let’s investigate why.

First, let’s consider what it looks like when we interpolate between $ P_0 $ and $ P_1 $ while simultaneously interpolating between $ P_1 $ and $ P_2 $.

B0,1(0.00)

B1,2(0.00)

$$ \begin{aligned} B_{0,1}(t) = (1 - t) P_0 + t P_1, 0 \le t \le 1 \\ B_{1,2}(t) = (1 - t) P_1 + t P_2, 0 \le t \le 1 \\ \end{aligned} $$

Now let’s linearly interpolate between $ B_{0, 1}(t) $ and $ B_{1, 2}(t) $…

B0,1,2(0.00)

$$ \begin{aligned} B_{0,1,2}(t) = (1 - t) B_{0,1}(t) + t B_{1,2}(t), 0 \le t \le 1 \\ \end{aligned} $$

Notice that the equation for $ B_{0, 1, 2}(t) $ looks remarkably similar to the equations for $ B_{0, 1} $ and $ B_{1, 2} $. Let’s see what happens when we trace the path of $ B_{0, 1, 2}(t) $.

We get our curve!

Higher Order Bezier Curves

Just as we get a quadratic bezier by interpolating between two linear bezier curves, we get a cubic bezier curve by interpolating between two quadratic bezier curves:

$$ \begin{aligned} B_{0,1,2,3}(t) = (1 - t) B_{0,1,2}(t) + t B_{1,2,3}(t), 0 \le t \le 1 \\ \end{aligned} $$

You may have a sneaking suspicion at this point that there’s a nice recursive definition lurking here. And indeed there is:

$$ \begin{aligned} B_{k,...,n}(t) &= (1 - t) B_{k,...,n-1}(t) + t B_{k+1,...,n}(t), 0 \le t \le 1 \\ B_{i}(t) &= P_{i} \end{aligned} $$

Or, expressed (concisely but inefficiently) in TypeScript, it might look like this:

type Point = [number, number]; function B(P: Point[], t: number): Point { if (P.length === 1) return P[0]; const left: Point = B(P.slice(0, P.length - 1), t); const right: Point = B(P.slice(1, P.length), t); return [(1 - t) * left[0] + t * right[0], (1 - t) * left[1] + t * right[1]]; // Evaluate a cubic spline at t=0.7 B([[0.0, 0.0], [0.0, 0.42], [0.58, 1.0], [1.0, 1.0]], 0.7)

Cubic Bezier Curves in Vector Images

As it happens, cubic bezier curves seem to be the right balance between simplicity and accuracy for many purposes. These are the kind of curves you’ll most often see in vector editing tools like Figma.

A cubic bezier curve in Figma

You can think of the two filled in circles ● as $ P_0 $ and $ P_3 $, and the two diamonds ◇ as $ P_1 $ and $ P_2 $. These are the fundamental building blocks of more complex curved vector constructions.

Font glyphs are specified in terms of bezier curves in TrueType (.ttf) fonts.

A lower-case "e" in Free Serif Italic shown as a vector network of cubic bezier curves

The Scalable Vector Graphics (.svg) file format uses bezier curves as one of its two curve primitives, which are used extensively in this:

The Cubic Spline Tiger in SVG format.

Cubic Bezier Curves in Animation

While bezier curves have their most obvious uses in representing spacial curves, there’s no reason why they can’t be used to represented curved relationships between other quantities. For instance, rather than relating $ x $ and $y $, CSS transition timing functions relate a time ratio with an output value ratio.

Transition timing functions defined by bezier curves

Cubic bezier curves are one of two ways of expressing timing functions in CSS (steps() being the other). The cubic-bezier(x1, y1, x2, y2) notation for CSS timing functions specifies the...

Bezier Curves from the Ground Up (2016)

Related Articles

Incident with Github.com

(no title)

Scientists reverse brain aging, with a nasal spray

NHS apologises and admits Palantir have access to identifiable patient data

Cursor Origin