Page 8: Bézier Cubics

So far, we’ve described Bézier curves as these very general things. They can be any degree and give us a whole bunch of nice properties.

In computer graphics practice, we almost always use cubic and quadratic Béziers. To it makes sense to focus on them. Quadratics are less common then cubics: they were used in places where efficiency was critical (like drawing fonts).

Cubics are a good tradeoff for computer graphics: they are flexible enough to provide for $C(1)$ continuity, but not much bigger than is necessary. Cubic Béziers have a nice parallel to Hermite cubics that we learned about earlier in the workbook.

Cubic Bézier Curves

Hermite cubics are convenient because they make it easy to build $C(1)$ curves from pieces. We just need to match the end of one segment to the beginning of the next.

But, if you wanted to make a user interface for a Hermite cubic, you’d have a problem: how do you specify the derivative? The end points are points in the space of the curve, but the derivatives are something different.

A simple solution might be to do something like what we did to draw the tangent vectors on page 1: we can create a new point that is at the end of the tangent vector if the tangent vector starts at the curve end point. There’s another issue that the tangent vector is probably too long to be convenient, so we need to scale it down. When we drew the tangents on page 1, we scaled them by 40%, but that was arbitrary. And we can point the end tangent backwards, so we have symmetry. In other words, we can map the four “controls” of a Hermite cubic ($\mathbf{h_0}, \mathbf{h_1}, \mathbf{h'_0}, \mathbf{h'_1}$) to four “control points” as: $$\begin{aligned} \mathbf{p0} = & \mathbf{h0} \\ \mathbf{p1} = & \mathbf{h0} + \frac{1}{3} \mathbf{h'_0} \\ \mathbf{p2} = & \mathbf{h1} - \frac{1}{3} \mathbf{h'_1} \\ \mathbf{p3} = & \mathbf{h1}\end{aligned}$$

Or, as a picture:

These curve pieces are cubic Bézier segments.

Note that the picture in the book (Figure 15.10) is wrong: since the tangent arrows are 3 times the difference in the control points, they should be longer, not shorter.

It is probably easier to think of the curve tangents in terms of the Bézier points: $$ \mathbf{f'}(0) = \mathbf{h'_0} = 3 (\mathbf{p_1}-\mathbf{p_0})$$

The connection between cubic Bézier segments and Hermite segments makes them easy to convert. If we have a Hermite segment (or can get one, from some other cubic form like a cardinal), we can easily convert to Bézier form. This will be particularly useful because APIs usually support Béziers.

The scaling factor 3 is not arbitrary: it is the degree of the polynomial, or $n-1$ (since we like to talk about Bézier segments in terms of the number of points). For quadratic Bézier curves, the scaling factor is 2. (the tangent vector is twice the vector from the first to the second point).

The Bézier blending functions

As we’ve discussed, it is convenient to write the equations for polynomial curves as basis funciton curves, such that each control point is multiplied by a blending function. For cubic Béziers this would be: $$ \mathbf{f}(u)= b_{0,3}(u)\ \mathbf{p_0} + b_{1,3}(u)\ \mathbf{p_1} + b_{2,3}(u)\ \mathbf{p_2} + b_{3,3}(u)\ \mathbf{p_3} $$

Here, the $\mathbf{p_i}$ are the control points, and the $b_{i,3}$ are the Bezier blending functions. Notice that we wrote them with two subscripts: the second one (3) tells us that we want the blending functions of degree 3. Each blending function will be a cubic polynomial, so the overall function $\mathbf{f}$ is also a cubic polynomial.

We can write this more generally for any degree:

$$ \mathbf{f}(u)= \sum_{i=0}^d b_{i,d}(u)\ \mathbf{p_i}$$

Of course, the big question is “what are these Bézier blending functions.” It turns out they have a very simple form:

$$ b_{k,n}(u) = C(n,k)\ u^k\ (1-u)^{(n-k)}$$

Where $C(n,k)$ are the binomial coefficients

$$ C(n,k) = \frac{n!}{k!\ (n-k)!}$$

These basis functions are also known as the Bernstein Basis Polynomials.

Connecting Bézier Segments

In Computer Graphics, we typically create complicated shapes by connecting low-degree pieces. Most often, we use cubics.

With Bézier curves, we can control the continuity when we put two segments (each a Bézier curve) together.

• We can get $C(0)$ continuity by making sure that the last control point of the first segment is the same as the first control point of the second segment.
• We can get $G(1)$ continuity by having the last two points of the first segment and the first two points of the second segment be co-linear.
• We can get $C(1)$ continuity by having the vector between the last two points of the first segment be equal to the vector between the first two points of the second segment.

These continuity conditions work no matter how many points the Bézier curves have.

Note: with cubic Bézier curves, we cannot get better than C(1) continuity. The video The Continuity of Splines has a nice animated explanation.

General Bézier Curves

Cubic Bézier curves are a specific case: Bézier curves can be created for any degree. A first degree (two points) Bézier curve is a line segment. We can have degree 2 (quadratic, 3 points), degree 3 (cubic, 4 points), or any higher degree Bézier curves.

Bézier curves have many useful properties. These are described in the book, but they are so important, we will repeat them here:

1. A Bézier curve can be constructed for any number of points $n>1$.
2. A Bézier curve with $n$ control points is an $n-1$ degree polynomial.
3. Bézier curves are parameterized for $u$ in the range 0 to 1.
4. A Bézier curve interpolates its first and last points. That is, at $u$=0, it has the value of its first point and for $u$=1 it has the value of its last point.
5. Bézier curves are symmetric. If you reverse the order you get the same curve backwards. The parameter goes in the opposite direction.
6. The first derivative at the beginning of the curve ($u$=0) is proportional to the vector between the first and second point. By symmetry, the first derivative at the end of the curve ($u$=1) is proportional to the vector between the last points. The scaling factor is the degree of the curve. So for a cubic curve, the tangent vector is three times the vector between the first two points.
7. The Bézier curve is bounded by the convex hull of its control points. If you make a polygon from the control points, the curve stays inside of it.
8. Bézier curves are affine invariant – the affine transform of a Bézier curve is the curve created by performing the transform on the control points.
9. Bézier curves are variation diminishing. A Bézier curve has fewer “wiggles” than it does control points.

Really using Bézier Curves

On the next page, we will discuss how Bézier curves are presented in APIs.

Next: Béziers in APIs