Bézier Curve
Understand the mathematics of Bézier curves
Bézier curves are used a lot in computer graphics, often to produce smooth curves, and yet they are a very simple tool. If you have ever used Photoshop you might have stumbled upon that tool called “Anchor” where you can put anchor points and draw some curves with them… Yep, these are Bézier curves. Or if you have used vector-based graphic, SVG, these too use Bézier curves. Let’s see how it works.
Definition
Given n+1 points (P0, …, Pn) called the control points, the Bézier curve defined by these points is defined as:
Where B(t) is the Bernstein polynomial, and:
You will notice that this Bernstein polynomial looks a lot like the k(th) term in Newton’s binomial formula, which is:
In fact, the Bernstein polynomial is nothing but the k(th) term in the expansion of (t + (1 - t))^n = 1. Which is why if you sum all the Bi up to n, you will get 1. Any ways.
Quadratic Bézier Curve
The quadratic Bézier curve is how we call the Bézier curve with 3 control points, since the degree of P(t) will be 2. Let’s calculate the Bézier curve given 3 control points and explore some properties we might find! Remember, eq. 1 holds for n+1 points, so in our case n=2.
Mind that P(t) does not return a number, but a point on the curve. Now we just have to choose three control points and evaluate the curve on the range [0, 1]. We can do this in Python quite easily.
You can notice that the curve starts and ends at the first and last control points. This result will be true for any number of points. Since t ranges from 0 to 1, we can prove this by evaluating P(t) at t=0 and t=1. Using eq. 1:
Because the curve goes from P0 to P2, in this case, P1 entirely determines the shape of the curve. Moving P1 around you might notice something:
The Bézier curve is always contained in the polygon formed by the control points. This polygon is hence called the control polygon, or Bézier polygon. This property also holds for any number of control points, which makes their manipulation quite intuitive when using a software.
Matrix representation
We can actually represent the Bézier formula using matrix multiplication, which might be useful in other contexts, for instance for splitting the Bézier curve. If we go back to our example we can rewrite P(t) as follows:
And so all the information about the quadratic Bézier curve is compacted into one matrix, M. Now, we might want to find the coefficients of that matrix without having to do all these steps, and in a way that is easily programmable. Since the coefficients of the matrix are simply the coefficients of the polynomial in front of each Pi, what we are looking for is the expanded form of the Bernstein polynomial eq. 2.
One more thing: if we expand Bi(t) we will get the polynomial in front of Pi, which corresponds to the i(th) column in the matrix. However, that is not really convenient and it would be easier to program if we could get rows instead. That said, you might notice that the i(th) row of the matrix is exactly the same as the reversed (n-i)(th) column, and the coefficients of the reversed (n-i)(th) column are nothing but the coefficients of B(n-i)(t) taken in decreasing powers of t.
You might want to refer to eq. 2 and eq. 3 if you’re having some troubles.
Therefore, the coefficients of the matrix are nothing but the coefficients in front of t, meaning:
Interpolation
One interesting application of Bézier curves is to draw a smooth curve going through a predefined set of points. The reason it is interesting is because the formula of P(t) produces points and is not of the form y=f(x), so one x can have multiple y’s (basically a function that can “go backward”). For instance we could draw something like this:
However, the mathematics to produce this result are not trivial so I’ve wrote a dedicated post for this:
In the meantime, here is how you can program the general version of the Bézier curve for any number of control points using eq. 1.
Run the program and you will get the graph displayed in the header.
That’s it for this introduction to Bézier curves. I hope you learned something and don’t hesitate to comment any question that you might have!
