Drawing with Bézier: Bézier Curves in Animation & Design

A Rigorous Introduction to Bézier Curves

One of the more intuitive and interesting geometric objects used in computer graphics and animation is the Bézier curve, popularized by French engineer Pierre Bézier in 1962 after he used them to design automobile bodies for Renault. Bézier curves are defined by a common parameterization, which provides them with several properties that make them easy to analyze and manipulate while still requiring no mathematical knowledge to use.

1200px-Bezier_curve.svg
A Bézier curve with four points: one starting point, one endpoint, and two control points, P_1 and P_2.

Bézier curves are generated using a starting point and endpoint, and several control points between them. The choice of start, end, and control points in between determine how the curve is drawn; thus, the user only has to manipulate these points to create a wide variety of curves in a very computationally efficient way.

To see how this works geometrically, you can use Jason Davies’ Bézier Curves tool to construct your own linear, quadratic, cubic and quartic curves.

We can look at low order Bézier curves to gain some intuition regarding their general form.

Linear Curves

Linear Bézier curves are simply a line segment connecting two predefined control points. Let \overrightarrow{b_0}(p_0,q_0) and \overrightarrow{b_1}(p_1,q_1) \in \mathbb{R}^2 be two control points for the parameterization

(x(t),y(t))=(1-t)(p_0,q_0)+t(p_1,q_1) for t\in[0,1].

Note that x(t)=(1-t)p_0+tp_1 and y(t)=(1-t)q_0+tq_1. In our parameterization, t describes time; our curve is constructed by using the equation to generate the values of (x,y) on the curve over the time range [0,1]. We can write this in vector form, as

\overrightarrow{B}(t)=(1-t)\overrightarrow{b_0}+t\overrightarrow{b_1} for t\in[0,1].

Bézier_1_big
Constructing a linear Bézier curve in red. Source.

Note that as an immediate consequence we have \overrightarrow{B}(0)=\overrightarrow{b_0} and \overrightarrow{B}(1)=\overrightarrow{b_1}. This makes sense; at the beginning of the construction the equation is at the first control point, and at the end of the construction it arrives at the second.

Quadratic Curves

From there, the equation for a quadratic Bézier curve seems fairly intuitive. Let \overrightarrow{b_0}(p_0,q_0), \overrightarrow{b_1}(p_1,q_1), and \overrightarrow{b_2}(p_2,q_2) \in \mathbb{R}^2 be the three control points for our curve. Then, we define our quadratic Bézier curve by

\overrightarrow{B}(t)=(1-t)^2\overrightarrow{b_0} + 2(1-t)t\overrightarrow{b_1} + t^2\overrightarrow{b_2}, t \in [0,1].

Bézier_2_big
Constructing a quadratic Bézier curve. Source.

Cubic Curves

We can write our cubic Bézier curve as we might expect; the quadratic case looks like a binomial expansion, and the cubic case continues that trend. Let \overrightarrow{b_0}, \overrightarrow{b_1}, \overrightarrow{b_2} and \overrightarrow{b_3} be the control points of our curve as defined above. Then we can write

\overrightarrow{B}(t)=(1-t)^3\overrightarrow{b_0} + 3(1-t)^2 t\overrightarrow{b_1} + 3(1-t)t^2 \overrightarrow{b_2} + t^3 \overrightarrow{b_3}, t \in [0,1].

Bézier_3_big
Constructing a cubic Bézier curve. Source.

One interesting property of our Bézier curves that is made clear by these images is that the start and endpoints of the curves appear to be tangent to the line between the first two and last two control points. For the linear case, this is obvious. For higher dimensions, we can evaluate the derivative of our equation at t = 0 and t = 1 to prove it. For instance, for our cubic formula,

\overrightarrow{B'}(t) = -3(1-t)^2\overrightarrow{b_0} + 3(1 -4t + 3t^2)\overrightarrow{b_1} + 3t(2-3t)\overrightarrow{b_2} + 3t^2\overrightarrow{b_3}, t \in [0,1].

Therefore, \overrightarrow{B'}(0) = -3\overrightarrow{b_0} + 3\overrightarrow{b_1} = 3 \overrightarrow{(b_1 - b_0)} and \overrightarrow{B'}(1) = -3\overrightarrow{b_2} + 3\overrightarrow{b_3} = 3\overrightarrow{(b_3 - b_2}, as expected.

General Construction of Bézier Curves

More generally, we can define a Bézier curve with n+1 control points as follows. Let \overrightarrow{b_0}\ldots\overrightarrow{b_n} be a set of control points for our curve. Then our curve is parameterized by

\overrightarrow{B}(t) = \sum_{i=0}^n \overrightarrow{b_i} B_{i,n}(t)

where

B_{i,n}(t) = \{\frac{n!}{(n-i)!i!}(1-t)^{n-i}t^i if 0 \leq i \leq n
\{0 otherwise.

This term $latex \frac{n!}{(n-i)!i!}(1-t)^{n-i}t^i$ is a Bernstein polynomial or Bernstein basis function. This may seem difficult to compute, but the term $latex \frac{n!}{(n-i)!i!}$ is actually familiar; it is the binomial coefficient, denoted {{n}\choose{i}}, and gives rise to the binomial expansion in our Bézier curves that we noted earlier.

Important Properties of Bézier Curves

A consequence of this definition is that Bézier curves are invariant under affine transformations such as rotation, reflection, translation and scaling. Thus, our Bézier curves can be dynamically generated and moved within an animation without much difficulty. A proof of this is available in Marsh’s Applied Geometry for Computer Graphics and CAD, Chapter 6.7.

For t \in [0,1], our values for t are non-negative, and therefore the sum of our coefficients is given by the binomial theorem as (t + (1-t))^n = 1^n = 1. It follows (with some extra work) that Bézier curves satisfy the convex hull property. That is, given a set of points X = \{x_0, x_1, \ldots, x_n\}, the convex hull of X, denoted CH\{X\}, is defined as the set of points

CH\{ X \} = \{a_0x_0 + \ldots + a_nx_n | \sum_{i=0}^n a_i = 1, a_i \geq 0 \}.

For all t \in [0,1], $\overrightarrow{B}(t) \in$ CH\{\overrightarrow{b_0}, \ldots, \overrightarrow{b_n} \}. Therefore every point of a Bézier curve lies inside the convex hull of its control points.

ConvexHull.png
The convex hull of the black points is represented by the blue 6-sided polygon.

We can imagine this convex hull by drawing a circle around all of our control points, and shrinking/fitting it to the points until the vertices of our polygon are a subset of the control points and all of our control points are contained within it. This property is actually incredibly helpful for working with and rendering Bézier curves; for any curve of any dimension, we can easily determine the region in which the curve will appear.

Rendering Bézier Curves

The properties of Bézier curves make them very efficient and simple to render. The simplest method is de Casteljau’s algorithm, which creates the curve recursively. (Mathematician Paul de Casteljau first developed the curves in 1959). I will not go into the algorithm in detail here (it is simple but clever, and takes some lengthy explanation before it becomes intuitive), but Pomax’s A Primer on Bézier Curves gives an example of the algorithm with a great walk through its steps. All of the images used in this page are examples of constructing Bézier curves using de Casteljau’s algorithm.

ComplexBezierCurve.gif
Constructing a fifth-order Bézier curve. Lower order curves between the points are also shown. Source.

Interacting with Bézier Curves

Bézier curves can also be manipulated in several clever ways to give us more freedom in designing curves.

We can create additional control points through subdivision, by cutting a curve at the parameter value t = \alpha to give two curve segments \overrightarrow{B_{left}}(t) and \overrightarrow{B_{right}}(t), defined over [0, \alpha] and [\alpha, 1], respectively, which can be manipulated independently. Control points for \overrightarrow{B_{left}}(t) and \overrightarrow{B_{right}}(t) can be determined by applying de Casteljau’s algorithm to $\overrightarrow{B}(t)$ with t = \alpha. A more thorough explanation of this concept, with a proof, is available in Marsh’s Applied Geometry for Computer Graphics and CAD, Chapter 6.9.

Running de Casteljau’s algorithm in reverse allows us to manipulate Bézier curves by picking up and moving any point to change the shape of the curve.  Informally, the method is possible because de Casteljau’s algorithm relies on relationships between the control points of a Bézier curves, and we can use the higher-order points used in the algorithm to construct the curve at each value of t (points that are “between” our control points and our curve) to manipulate the curve at that point t. The method is intensive, but Pomax’s A Primer on Bézier Curves contains a fantastic in-depth explanation of this as well.

How Do We Use Bézier Curves?

Bézier curves are useful because they can be efficiently created with a small number of inputs (control point) and are both incredibly intuitive and easily manipulated.

Fonts

microsoft_truetype.gif
M glyph with Bézier curves from Microsoft.

The outlines of TrueType and Postscript fonts are constructed using quadratic and cubic Bézier curves, respectively, rather than pixels. This allows fonts to be scaled across a wide range of font sizes and transformed by italicization or other processes without breaking or showing compression artifacts; when we manipulate these fonts, we simply perform operations on the control points, rather than altering an image or arrangement of pixels, so that we still end up with clean, smooth curves on all of our fonts. An approachable introduction to this topic can be found here.

Computer-Aided Design

For all the reasons mentioned above, Bézier curves are also commonly used in many Computer-Aided Design (CAD) packages to model smooth curves. Higher-order curves are more precise, but computationally expensive to create, so curve subdivision can be used to render complex curves that are actually composites of several lower-order curves. In either case, Bézier curves are an effort-efficient and computationally efficient means of designing and generating curves.

Lamborghini-Indomable-CAD-Wireframe-lg
Lamborghini Indomable CAD Wireframe by carbodydesign.com

Animation

However, one of the most interesting uses of Bézier curves is in their use as parameters for motion in animation. Bézier curves provide an easy means of designing smooth paths or functions that control aspects of an animation, such as the position of an object, or a transformation on the object. To see how this works, look at these two (1) (2) animations I created using the “Pixar in a Box” animation tool created by Pixar and Khan Academy.

One looks light and bouncy, while the other is dense and heavy. These animations were made by controlling only four parameters, whose values were mapped by Bézier curves on a 2D plane with coordinates (x,y)=(frame, parameter) with a user-defined number of control points (you can play with this by clicking on the link to the tool above). Using Bézier curves makes it easy to create smooth animations because the data we use as inputs are smooth across time.

800px-2012_WTCC_Race_of_Japan_(Race_1)_opening_lap.jpg
Turn from the opening lap of the World Touring Car Championship, Japan, 2012. Source.

Bézier curves have many related application useful within and beyond the fields of animation and graphics. They are great for generating and smoothing paths used by Artificial Intelligence, especially racing lines and vehicle paths, both in video games and animation and the real world. Simply by their cleverness, they make it possible to create complicated shapes while avoiding a lot of computation and a lot of effort. Instead of working hard to create a nice curve for an animation, or an AI path, we simply give it some parameters (or tell it to find its own), make a few adjustments, and let Bézier do the work.

Bibliography

  • Casselman, Bill. “From Bézier to Bernstein.” American Mathematical Society. American Mathematical Society, n.d. Web. 18 May 2017.
  • Davies, Jason. “Animated Bézier Curves.” Jason Davies. N.p., n.d. Web. 18 May 2017.
  • Marsh, Duncan. Applied Geometry for Computer Graphics and CAD. London: Springer-Verlag, 2010. Print.
  • Martins, Fabio Duarte. “Bezier Curves and Type Design: A Tutorial.” Scannerlicker. Scannerlicker, 16 Apr. 2014. Web. 18 May 2017.
  • Pomax. “A Primer on Bézier Curves.” Github. N.p., n.d. Web. 18 May 2017.
  • Stamm, Beat. “The Raster Tragedy at Low Resolution.” Microsoft. Microsoft, Mar. 1998. Web. 18 May 2017.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s