CH Bezier
CH Bezier
Justin Wyss-Gallifent
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 Bezier Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.1 Linear Bezier Curves . . . . . . . . . . . . . . . . . . . . . 2
2.2 Quadratic Bezier Curves . . . . . . . . . . . . . . . . . . . 2
2.3 Cubic Bezier Curves . . . . . . . . . . . . . . . . . . . . . 4
2.4 General Bezier Curves . . . . . . . . . . . . . . . . . . . . 7
2.5 Properties of Bezier Curves . . . . . . . . . . . . . . . . . 7
2.6 Visual Construction . . . . . . . . . . . . . . . . . . . . . 9
3 The de Casteljau Algorithm . . . . . . . . . . . . . . . . . . . . . 10
4 TrueType Font Design . . . . . . . . . . . . . . . . . . . . . . . . 13
4.1 Font Specification . . . . . . . . . . . . . . . . . . . . . . 13
4.2 Transformations . . . . . . . . . . . . . . . . . . . . . . . 13
1
1 Introduction
If we wish to store a curve or surface it’s impractical to store every point. The
solution is to somehow represent entire curves using small amounts of data. In
general there are many ways to do this, for example a circle can be stored using
a center and radius, a curve can be stored using a parametrization, and so on.
The approach we will take in this chapter is to define a curve using a number
of control points. The simplest example would be defining a straight line using
the two end points, and that’s where we will start.
2 Bezier Curves
2.1 Linear Bezier Curves
Definition 2.1.1. Given two control points b0 and b1 we define the linear
Bezier curve to be the curve parametrized by:
Notice what is happening here. At t = 0 the vector b0 is the only thing ac-
counted for and at t = 1 the vector b2 is the only thing accounted for. For
intermediate values of t the function b(t) assigns a shifting weight to the vari-
ous control points.
Here are a sampling of the values of the coefficients for each of the three vectors:
t (1 − t)2 2t(1 − t) t2
0 1 0 0
0.1 0.81 0.18 0.01
0.2 0.64 0.32 0.04
0.3 0.49 0.42 0.09
0.4 0.36 0.48 0.16
0.5 0.25 0.50 0.25
0.6 0.16 0.48 0.36
0.7 0.09 0.42 0.36
0.8 0.04 0.32 0.64
0.9 0.01 0.18 0.81
1.0 0 0 1
2
We see that the coefficients start weighted to that of b0 and shift at the end to
b2 . They never get completely to b1 although they tend there in the middle.
Let’s look at a simple example in R2 .
Example 2.1. Given the three control points:
b0 = [1; 5]
b1 = [3; 1]
b2 = [7; 8]
Here is a plot of the curve along with the three control points:
8 b2
6 b0
b1
2 4 6 8
3
8 b2
6 b0
b1
2 4 6 8
b0 = [1; 1]
b1 = [10; 1]
b2 = [10; 10]
4
Let’s look at a simple example in R2 .
Example 2.2. Given the four control points:
b0 = [1; 1]
b1 = [2; 8]
b2 = [6; 0]
b3 = [8; 7]
Here is a plot of the curve along with the four control points. In addition we’ve
added the tangent lines at the start and end points:
8 b1
b3
6
2
b0 b2
2 4 6 8
We see similar behavior as the quadratic in that the tangent lines at the start and
end points intersubsection the point directly after and before them respectively.
Exercise 2.3. Find the parametrization for the cubic bezier curve with the
four control points:
b0 = [0; 0]
b1 = [10; 0]
b2 = [0; 10]
b3 = [10; 10]
Exercise 2.4. Find the parametrization for the cubic bezier curve with the
5
four control points:
b0 = [5; 5]
b1 = [10; 5]
b2 = [10; 10]
b3 = [15; 10]
b0 = [1; 1]
b1 = [8; 7]
b2 = [2; 8]
b3 = [6; 0]
Here is a plot of the curve along with the four control points. In addition we’ve
added the tangent lines at the start and end points:
8 b2
b1
6
b0 b3
2 4 6 8
We see similar behavior as the quadratic in that the tangent lines at the start and
end points intersubsection the point directly after and before them respectively.
6
2.4 General Bezier Curves
Definition 2.4.1. Given n+1 control points b0 , b2 , ... ,bn we define the degree
n Bezier curve to be the curve parametrized by:
n
X n i
b(t) = t (1 − t)n−i bi for t ∈ [0, 1]
i
i=0
Proof. We have:
b(t) = (1 − t)n b0 + nt(1 − t)n−1 b1
"n−1 #
X n
i n−i
+ t (1 − t) bi
i
i=2
+ tn bn
b0 (t) = −n(1 − t)n−1 b0 + n (1 − t)n−1 − t(n − 1)(1 − t)n−2 b1
"n−1 #
X n
iti−1 (1 − t)n−i − ti (n − i)(1 − t)n−i−1 bi
+
i
i=2
n−1
+ nt bn
0
b (0) = −n(1 − 0)n−1 b0 + n (1 − 0)n−1 − 0(n − 1)(1 − 0)n−2 b1
"n−1 #
X n
i−1 n−i i n−i−1
+ i0 (1 − 0) − 0 (n − i)(1 − 0) bi
i
i=2
n−1
+ n0 bn
b0 (0) = −nb0 + nb1
= n(b1 − b0 )
The result follows. The proof for bn is similar.
7
Exercise 2.5. Prove the result for bn .
Definition 2.5.1. Given a set of n + 1 points b0 , ..., bn the convex hull of the
points is defined as:
( n
)
X
CH(b0 , ..., bn ) = b0 b0 + .. + bn bn | b0 , ..., bn ∈ [0, 1] ∧ bi = 1
i=1
Visually speaking the convex hull can be pictured by stretching an elastic band
so that it is as small as possible and still contains all the control points. For
example here is the convex hull for a set of eight points:
Theorem 2.5.3. For all t, b(t) lies within the convex hull of the control points.
b0 = [1; 2]
b1 = [4; 0]
b2 = [8; 3]
b3 = [5; 4]
b4 = [3; 3]
b5 = [6; 8]
b(t) = [−20t5 + 80t4 − 80t3 + 10t2 + 15t + 1; t5 + 35t4 − 70t3 + 50t2 − 10t + 2]
Here is a plot of the curve along with the six control points and the convex hull.
8
8 b5
4 b3
b4
b2
b0
2
b1
2 4 6 8
Theorem 2.5.4. For any linear transformation T the Bezier curve constructed
using the T (bi ) is equivalent to the Bezier curve constructed using the bi and
then transformed using T .
Proof. This follows from the fact that the Bezier curve is constructed as a linear
combination of the bi and the fact that the transformation is linear.
b0 = [1; 1]
b1 = [4; 10]
b2 = [10; 7]
To find b(0.25) we construct linear Bezier curves q0 (t) from [1; 1] to [4; 10]
and q1 (t) from [4; 10] to [10; 7]. We then go 0.25 of the way along the line
from q0 (0.25) to q1 (0.25)
9
b1
10 q1 (0.25)
q1 (t)
8 q0 (t)
b2
6
b(0.25)
4
q0 (0.25)
2
b0
2 4 6 8 10
10
2 4 6 8 10
10
Given a value of t the de Casteljau Algorithm can locate a specific point fairly
efficiently. The algorithm is recursive as follows:
Theorem 3.0.1. Suppose b(t) is the degree n Bezier curve for control points
{b0 , ..., bn }. To find b(t) proceed as follows: Define:
Then:
b(t) = bn,0
Proof. Omitted. However the general idea can be seen in the visual construction
from earlier. We contruct a succession of sets of intermediate points each as a
linear combination of the previous set.
While this may look particular confusing the algorithm can be displayed easily
as a set of rows of numbers:
b0 = [1; 1]
b1 = [2; 8]
b2 = [6; 0]
b3 = [8; 7]
11
For reference the cubic Bezier curve is parametrized by:
(b) For b(t) on [t0 , 1] use the diagonal edge of the table going up and to the
right. In other words use:
Proof. Omit.
Example 3.2. Using the above cubic if we split the Bezier curve at t = 0.1
then the curve parametrized by b(t) on [0, 0.1] can be contructed using control
points:
[1; 1], [1.1; 1.7], [1.23; 2.25], [1.385; 2.68]
and the curve parametrized by b(t) on [0.1, 1] can be contructed using control
points:
[1.385; 2.68], [2.78; 6.55], [6.2; 0.7], [8; 7]
12
4 TrueType Font Design
4.1 Font Specification
TrueType fonts are created using Bezier curives in that each letter is created by
a set of linear and quadratic Bezier curves.
Example 4.1. For example suppose we wished to create a version of the Greek
letter π. We might use a horizontal bar for the top, a vertical bar for the left
lower part. and a vertical bar which curves to the right for the right lower part.
We might create each of these as follows in a 16 × 16 grid:
Horizontal bar: [0 ; 16] and [16 ; 16]
Lower left: [5 ; 0] and [5 ; 16]
Lower right: [11 ; 16] and [11 ; 0] and (16 ; 0].
If we create the Bezier curves for each of these we get the following.
Horizontal bar: [16t ; 16]
Lower left: [5 ; 16t]
Lower right: [5t2 + 11 ; 16t2 − 32t + 16]
Here is the result. The control points have been drawn in red, black and blue
for each of the horizontal, lower left and lower right respectively.
20
15
10
5 10 15 20
4.2 Transformations
Because Bezier curves may be tranformed by tranforming the control points,
this allows us to translate, rotate, reflect, and scale by doing these things to the
control points.
Example 4.2. Suppose we wish to rotate our letter π by 1.2 radians about the
point [2; 3]. To do this we simply rotate the points and recreate the curves. To
rotate the points we multiply by the transformation T (2, 3)R(1.2)T (−2, −3).
13
The resulting rotated points are:
Horizontal bar: [−10.84 ; 5.847] and [−5.043 ; 20.76]
Lower left: [5.883 ; 4.709] and [−9.029 ; 10.51]
Lower right: [−6.855 ; 16.1] and [8.057 ; 10.3] and [9.869 ; 14.96]
If we create the Bezier curves for each of these we get the following.
Horizontal bar: [5.798t − 10.84 ; 14.91t + 5.847]
Lower left: [5.883 − 14.91t ; 5.798t + 4.709]
Lower right: [−13.1t2 + 29.83t − 6.855 ; 10.46t2 − 11.6t + 16.1]
Here is the picture:
25
20
15
10
−10 −5 5 10 15
14