Understanding Bézier Curves
Bézier curves are everywhere. In your CSS animation timing functions, in graphic editors, in typography, in car design and much more. If you want to model a smooth curve, chance’s are you’ll probably end up using a Bézier curve.
To me, these curves are a perfect example of the direct influence of mathematics in our daily lives as developers. Even though we might now want to understand every single mathematical aspect of what’s underneath our towering layers of abstraction(I certainly don’t), I think there is value in taking a small peak and gaining a deeper understanding on what are things actually made of.
This is my goal with this article. After it, you’ll have a mathematical and intuitive understanding of what exactly is a Bézier curve, why do we use them and how they work.
What is a Bézier curve?
Bézier curves are parametric curves (with the parameter t varying from 0 to 1) that are defined by a set of control points. These points’ positions in relation to one another define the shape of the curve.
If you’ve ever used a graphic editing software like Adobe Illustrator or Figma, you’ve already seen these control points in action. Notice in the gif below how as the points move, the curve’s shape changes accordingly.
You can also use as many control points as you like. The more control points you add, the greater the control you have over the final shape of your curve. As an example, the cubic-bezier function in CSS uses a bézier curve with 4 points (hence cubic) that describe the evolution of your animation.
What’s going on?
That’s great and all, but how do we get a curve from just positioning a bunch of points around?
The answer to that is in the mathematical basis for bézier curves — the Bernstein polynomials. A Bernstein polynomial of degree n is defined as a sum of Bernstein basis polynomials, each multiplied by a Bernstein coefficient.
Don’t get so hung up on the these formulas, there’s only a few key things you need to take from them.
First, what is their purpose? Well, to make a long story short, Bernstein polynomials were first used as a way to approximate any real continuous functions within a closed interval (see Stone-Weierstrass theorem for more details). In other words, by using these polynomials, we can approximate practically any function (model any curve) that we want to. This is really useful, as polynomials are generally a lot simpler to calculate and manipulate than other types of functions.
Second, how exactly does this approximation occur? Remember the Bernstein coefficients? That’s their job! Notice in the formula that the basis polynomials are always the same (they only vary according to the degree n) — the coefficient does the job of actually approximating the target function. The exact formula for approximating a function f is the following:
So, what exactly is a bézier curve? It’s a Bernstein polynomial where the Bernstein coefficients are the control points! So, when building a bézier curve, we’re essentially approximating a real function! It’s a direct application of the Bernstein polynomials.
This is what’s known as the explicit/mathematical definition of a Bézier curve. There’s still another way of looking at Bézier curves which I think is more powerful and intuitive, which is what we’ll explore now.
A different approach
There are a few famous forms of Bézier curves, with each being differentiated by its degree (how many control points it has). They are the linear, quadratic and cubic bézier curves. When studying this topic, you’ll probably encounter their formulas, which you can obtain by applying the formula based on the Bernstein polynomials.
Again, don’t get hung up on these formulas. There’s only one key thing you need to take from them.
Pay close attention to the formula of the linear Bézier curve. Notice how we have (1-t) and t times something. Without context, there’s nothing special about it, it’s just a basic linear function. But look what happens when we move things around a bit in the quadratic formula:
The pattern (1-t) and t times something repeats itself. We’re representing the quadratic curve P0P1P2 as (1-t) * (Bezier(P0P1)) + t * (Bezier(P1P2)) (go back to the previous image with different types of Bézier curves and notice the lines connecting the control points). You can actually test this out for higher degree curves and see that it stands. From this, we get a new recursive way to define a Bézier curve:
We also get a new way to evaluate a point in a Bézier curve, different from our original way that stems from the mathematical definition (Bernstein polynomials).
Imagine that we’re tying to calculate the point t=0.5 in a quadratic Bézier curve. We just saw that we can represent this curve as two linear Bézier curves with extremities being P0, P1 and P1, P2. By plugging 0.5 in our new recursive formula, we calculate t=0.5 in the line P0P1, then in P1P2 — which will give us two new points — , to then connect these two intermediate points with another line (remember that we have (1-t) and t multiplying the smaller degree curves) and calculate the final position of t=0.5.
Let me give you a visualization of what’s going on:
For each evaluated point t, we actually calculate it first in each of the smaller degree curves, to then connect them and calculate the desired point in the resulting line. This patterns repeats with higher curves as well:
Understanding this is important, because it is the explanation for a special topic that always comes up when studying Bézier curves: De Casteljau’s algorithm.
De Casteljau’s algorithm
This algorithm essentially uses this recursive definition to evaluate each point of the curve. It divides the calculation in levels, with the first level having the individual control points, the final level having your desired point, and the middle ones having all the intermediate points we calculate throughout the recursive definition. Let’ see how it works with a cubic curve:
Therefore, given that each point on level 0 is the control point itself, and considering an arbitrary point Pi on level j, De Casteljau’s algorithm tells us that its value will be:
Always remember that this is essentially using the recursive pattern in the Bézier curves, which are derived from the Bernstein polynomials.
Why Bézier curves?
Given everything we’ve said about Bézier curves, what’s the big deal with them? Why do we use them so much?
Essentially, they’re a way to build curves that can be scaled indefinitely, meaning that we can make them as detailed as we want them to be. Instead of creating super high degree curves, we can just concatenate smaller degree curves together and get pretty much any curve we want to.
Take the prime example of typography. Bézier curves enable us to create all kinds of different fonts, from simple monospace to beautiful display ones!
A final overview
To sum up everything we’ve learned in this article:
- Bézier curves are parametric curves that are defined by a set of control ponts
- Their mathematical origins come from the Bernstein polynomials, which are a way to approximate real functions.
- Bézier curves are Bernstein polynomials with the control points taking the place of Bernstein coefficients.
- Bézier curves are recursive, and each Bézier with Pn points can be represented as linear interpolation (a line) of the Bézier curves P0Pn-1 and P1Pn.
- De Casteljau’s algorithm essentially uses this recursive relation to calculate an arbitrary point of a Bézier curve.
- Bézier curves are really useful because they can be scaled indefinitely and allows us to create basically any curve that we want to.
