Page 6: Bézier Curves

On the previous pages, we focused on interpolating curves. At the end, we had the problem that when we interpolate, we lack control over what happens in-between the interpolation sites. One answer to this would be “don’t interpolate”. This might seem counter-intuitive because interpolation seems so convenient. But, in practice, the most often used curve types in computer graphics are not interpolating.

We call curves that are not interpolating approximating curves because they approximate their control points, rather than interpolate them.

There are two common types of approximating curves in computer graphics: Bézier curves and B-Splines. Both are splines - they make complex shapes out of a series of smaller segments, with each segment being a polynomial. Both are very general, they work for any degree of polynomial. Both have elegant mathematics behind them, and good methods. For 2D, Bézier curves are far more common so we will focus on them. (B-Splines deserve their own workbook)

Confusingly, Bézier curves are sometimes called interpolating curves because they interpolate their first and last points (but not the points in between).

And a note: the correct (French) spelling of Bézier has an accent over the first e. Leaving off the accent is acceptable, because the curves are so common, the word “Bezier” has basically become an English word.

The video The Beauty of Bezier Curves covers the basics of Bézier curves in a visual manner. But make sure you understand all the concepts here.

Motivating Bézier Curves

Most things that discuss Bézier curves dive in to show you the math. Even the old version of this workbook introduced them by showing how they connected to Hermite cubics from previous pages.

Often, you are shown Bézier curves (either as math or just drawing with them). Then you are given a list of nice properties they have and expected to remember them.

To motivate Bézier we will consider a single curve segment where we know the beginning and the end points. Because we may have many points, we will refer to the first and last as $\mathbf{p_0}$ and $\mathbf{p_n}$ (we do have $n+1$ points). We will interpolate these two points. This is a choice because it lets us connect things together.

1. Bézier curve segments interpolate their first and last points

What should the curve do in between these two points? If we have no other information, a straight line is an obvious choice. In fact, a Bézier curve with just 2 points is the straight line between them.

The idea of Bézier curves is that we will add additional control points that influence what happens between $\mathbf{p_0}$ and $\mathbf{p_n}$. With Bézier curves, we can add any number of control points.

2. Bézier curve segments can have any number ($\geq2$) of control points

Note: each Bézier segment can have many control points, and we can have many segments to make up an overall curve.

Bézier curves are created so that each segment only depends on its control points, not the control points of other segments. The independence of segments give them locality - although, sometimes Bézier curves are said to not have locality because the entire segment depends on all of its control points.

3. Bézier curve segments only depend on their control points

Let us start by adding a single point. We now have 3 points, so we can call them $\mathbf{p_0}$, $\mathbf{p_1}$, and $\mathbf{p_2}$.

What should we do with the “middle” control point that we added between the beginning and end? One possibility is to interpolate it - but this has the problem that it either leads us back to line segments (so we don’t get a smooth piece). We want each segment to be smooth.

4. Bézier curve segments are smooth (they are single polynomials)

If we make a smooth curve that interpolates, the curve has to go out of its way to approach the point in a smooth way. Think about interpolating the middle point:

Instead of interpolating the interior control point, we will approximate it - it will influence the shape (the curve will go towards it, just not through it).

We want to keep the curve inside of the triangle - this is useful because it gives us a clear way to keep the curve within a boundary. It will also be useful algorithmically, because we have bounds on where the curve can go.

The inside of a triangle (or any convex polygon) is well defined. In general, we need to consider the “convex hull” of the control polygon. Intuitively, the convex hull is the shape you get if you enclose the points with a convex shape. For a convex shape (like a triangle), it is just the polygon itself.

5. Bézier curve segments stay within the convex hull of their control points.

We can use the polygon to suggest how the curve should go. If we start at $\mathbf{p_0}$, we should expect to “go towards” $\mathbf{p_1}$. This tells us the direction of the tangent - a scaling factor will be determined to make all of the other properties work out. But, the length of tangents doesn’t have a direct “user experience” meaning. The scaling factor works out to be $n-1$ (where $n$ is the number of points).

6. The tangent at the beginning of a Bézier curve segment is the vector from the first (beginning) point to the second point, scaled by $(n-1)$.

Notice that this works out for line segments as well. The scaling factor is 1 for line segments. The $n=2$ Bezier curve is a line segment.

I could write all the rules for the beginning and end of the curve - but it would be nice if the curve were symmetric. Going backwards should be the same as going forward. If you reverse the order of the points, you should get the same curve (just in reverse order).

7. Bézier curves are symmetric. If you reverse the points, you get the same curve (with the parameter going the opposite way).

We have specified how things start and end, and where the curve must stay, but what else happens in between?

We want the curve to be “relatively direct” based on the influence of the control points. We don’t want it making extra wiggles if it doesn’t have to. There shouldn’t be “extra” turns.

All of this is a bit hand-wavy - but it can be stated mathematically. Intuitively, the curve should turn as much as it needs to (since it does need to change direction), but have no “extra” changes in direction.

One way to think about it: if the curve has $n$ points, it has $n-1$ line segments connecting them; each line gives a direction the curve might go in a some point, this means it must make $n-2$ changes in direction, but it doesn’t need to make any more. The curve has fewer wiggles than control points.

A mathematical way to describe this is variation diminishing. If you draw any line, the curve can only cross that line at most $n-1$ times. To see this, imagine the control polygon: it has $n-1$ segments, so any other line can only cross it that many times (since two lines can only cross once). The curve has the same property.

8. Bézier curves are variation diminishing. A segment has fewer wiggles than control points.

Here is a picture that shows off the features for a Bézier segment with 4 points (it is a cubic):

The four points (black dots) are connected by thick cyan lines to show the “control polyline”. The resulting cubic Bézier curve is dark blue.

Notice that the “convex hull” shape is the light blue parallelogram - the dark blue curve stays inside of it. Also notice that any line we draw in the plane (I drew some dark red lines) can cross the polyline or the curve at most 3 (i.e., $n-1$ ) times.

And, one more feature that you might forget to ask for:

9. Bézier curves are affine invariant.

If you perform an affine transformation on a Bézier curve, you get a Bézier curve. More specifically, if you perform an affine transformation on the control points of a Bézier curve, you get the affine transformation of the curve itself. You only have to transform the control points (and draw the curve based on those new points): you do not need to compute all the points in the curve and transform them.

This property, transform the points is good enough to transform the curve, is called affine invariance.

There are actually even more features of Bézier curves that make them extremely useful, which is why they are the most common form of curves in computer graphics. They are built in to most APIs.

Bézier curves are very general. You can make them for any number of control points. In computer graphics, we generally use cubic (4 points) and quadratic (3 points) Bézier curves. We also use linear Bézier curves, but it’s easier to call these line segments. Almost always we use these simpler pieces and create complex shapes by combining pieces.

There are applications of higher-order Bézier curves in design. For applications where smoothness is critical, designers might need very high levels of continuity. For example, boat designers and airfoil designers need to create curves with more than $C(2)$ continuity, so they use higher order Bézier curves.

And, what makes Bézier curves even cooler is that you can get all these properties using curves that have very elegant mathematical derivations.

OK, What are Bézier Curves?

Before defining them mathematically, you should “feel” one - try it out and play with it.

You probably already have - if you’ve used a drawing program (like Adobe Illustrator or Inkscape), or just about any graphics creation program, the curves are Bézier (probably cubics).

First, here’s a diagram with Bézier curves with 2, 3, 4 and 5 points. You can see how the parameter goes from 0 to 1 with the slider.

Move the points around (you can drag the blue dots). Notice how the curves respond. They always interpolate the first and last points. The other points influence the shape of the curve, even though they are not interpolated. Notice how the curve stays in the convex hull, how it never gets too many wiggles, how its starting (ending) directions follow the first (last) line segments.

Don’t worry about looking at the programs ( 05-06-01.js and 05-06-01.html) - you’ll see how these things work soon enough.

On the next page we will see how we can construct these curves geometrically.

Next: DeCasteljau Constructions