0% found this document useful (0 votes)
25 views14 pages

CH Bezier

The document discusses Bezier curves, including linear, quadratic, cubic, and general forms, detailing their definitions and properties. It explains how these curves are constructed using control points and introduces the de Casteljau algorithm for curve generation. Additionally, it covers applications in TrueType font design and presents exercises for further understanding.

Uploaded by

f20221605
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views14 pages

CH Bezier

The document discusses Bezier curves, including linear, quadratic, cubic, and general forms, detailing their definitions and properties. It explains how these curves are constructed using control points and introduces the de Casteljau algorithm for curve generation. Additionally, it covers applications in TrueType font design and presents exercises for further understanding.

Uploaded by

f20221605
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

MATH431: Bezier Curves

Justin Wyss-Gallifent

August 26, 2021

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:

b(t) = (1 − t)b0 + tb1 for t ∈ [0, 1]

It’s clear that this leads to a straight line from b0 to b1 .

2.2 Quadratic Bezier Curves


Definition 2.2.1. Given three control points b0 , b1 , and b2 we define the
quadratic Bezier curve (degree 2 Bezier curve) to be the curve parametrized by:

b(t) = (1 − t)2 b0 + 2t(1 − t)b1 + t2 b2 for t ∈ [0, 1]

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]

The quadratic Bezier curve is given by:

b(t) = (1 − t)2 [1; 5] + 2t(1 − t)[3; 1] + t2 [7; 8]


= [2t2 + 4t + 1; 11t2 − 8t + 5]

Here is a plot of the curve along with the three control points:
8 b2

6 b0

b1
2 4 6 8

Notice the following:


• The curve passes through the two end control points. It’s clear that this
will always be the case since b(0) = b0 and b(1) = b2 .
• The curve does not (necessarily) pass through the middle control point.
• The curve exits b0 in the direction of b1 .
• The curve enters b2 from the direction of b1 .
The final two notes can be clarified by drawing the lines tangent to the curve
at the start and end control points:

3
8 b2

6 b0

b1
2 4 6 8

This can be proven easily:


Theorem 2.2.1. For control points b0 , b1 and b2 the lines tangent to the
quadratic Bezier curve at t = 0 and t = 1 both intersect b1 .

Proof. Observe that for t = 0 we have:

b(t) = (1 − t)2 b0 + 2t(1 − t)b1 + t2 b2


b0 (t) = (2t − 2)b0 + (2 − 4t)b1 + 2tb2
b0 (0) = −2b0 + 2b1
b0 (0) = 2(b1 − b0 )

Since this is a multiple of b1 − b0 it follows that the vector tangent to the


curve at b0 points from b0 towards b1 . The proof for the other endpoint is
similar.

Exercise 2.1. Prove the result for the other endpoint.


Exercise 2.2. Find the parametrization for the quadratic bezier curve with the
three control points:

b0 = [1; 1]
b1 = [10; 1]
b2 = [10; 10]

2.3 Cubic Bezier Curves


Definition 2.3.1. Given four control points b0 , b1 , b2 , and b3 we define the
cubic Bezier curve (degree 3 Bezier curve) to be the curve parametrized by:

b(t) = (1 − t)3 b0 + 3t(1 − t)2 b1 + 3t2 (1 − t)b2 + t3 b3 for t ∈ [0, 1]

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]

The cubic Bezier curve is given by:

b(t) = (1 − t3 )[1; 1] + 3t(1 − t)2 [2; 8] + 3t2 (1 − t)[6; 0] + t3 [8; 7]


= [−5t3 + 9t2 + 3t + 1; 30t3 − 45t2 + 21t + 1]

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]

The order of the points is of course important.


Example 2.3. Given the four control points from our first example but rear-
ranged:

b0 = [1; 1]
b1 = [8; 7]
b2 = [2; 8]
b3 = [6; 0]

The cubic Bezier curve is given by:

b(t) = (1 − t3 )[1; 1] + 3t(1 − t)2 [8; 7] + 3t2 (1 − t)[2; 8] + t3 [6; 0]


= [23t3 − 39t2 + 21t + 1; −4t3 − 15t2 + 18t + 1]

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

2.5 Properties of Bezier Curves


Bezier curves have several properties, some of which we’ve seen. We present
them here as a series of theorems.
Theorem 2.5.1. The coefficients of b0 , ..., bn add to 1.

Proof. By the Binomial Theorem we have:


n  
X n i
t (1 − t)n−i = (t + (1 − t))n = 1n = 1
i
i=0

Theorem 2.5.2. Given n control points b0 through bn , the line tangent to


b(t) at b0 passes through b1 and the line tangent to b(t) at bn passes through
bn−1 .

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.

Proof. Since b(t) is a subset of CH the result follows.

Example 2.4. Consider the six control points:

b0 = [1; 2]
b1 = [4; 0]
b2 = [8; 3]
b3 = [5; 4]
b4 = [3; 3]
b5 = [6; 8]

The degree 5 Bezier curve is:

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.

2.6 Visual Construction


Visually speaking how is a Bezier curve being constructed? We’ll describe this
as we move through the degrees.
• A linear Bezier curve we understand, b(t) is simply the point t of the way
along the straight line from b0 to b1 .
• For a quadratic Bezier curve first construct the linear Bezier curve q0 (t)
using b0 and b1 and construct the linear Bezier curve q1 (t) using b1 and
b2 . Then we find b(t) by interpolating t of the way between these two.
Example 2.5. Given the three control points:

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

• For a cubic Bezier curve we need to go recursively further. We first con-


struct the linear Bezier curves q0 (t) using b0 and b1 , q1 (t) using b1 and
b2 , and q2 (t) using b2 and b3 . We next construct the linear Bezier surves
r0 (t) using q0 (t) and q1 (t) and r1 (t) using q1 (t) and q2 (t). Then we find
b(t) by interpolating t of the way between these two.
Example 2.6. Here is an example without too much cluttering detail for
the points [0; 11], [1; 1], [8; 1], and [10; 13] at t = 0.5.

10

2 4 6 8 10

• The pattern continues.

3 The de Casteljau Algorithm


Even though the formula for a Bezier curve is explicit and closed it is fairly
computationally intensive. For any
 given
 t-value we must calculate a sum and
n
each term in the sum involves an function which is itself fairly intensive.
m

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:

b0,i = bi For i = 0, ..., n


b1,i = (1 − t)b0, i + tb0,i+1 For i = 0, ..., n − 1
b2,i = (1 − t)b1,i + tb1,i+1 For i = 0, ..., n − 2
..
.
bj,i = (1 − t)bj−1,i + tbj−1,i+1 For i = 0, ..., n − j
..
.
bn,i = (1 − t)bn−1,i + tbn−1,i+1 For i = 0

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,0 = b0 b0,1 = b1 b0,2 = b2 ... b0,n−2 = bn−2 b0,n−1 = bn−1 b0,n = bn


b1,0 b1,1 b1,2 ... b1,n−2 b1,n−1
b2,0 b2,1 b2,2 ... b2,n−2
.. .. .. ..
. . . .
bn−1,0 bn−1,1
bn,0
In the above, the first row is simply b0 through bn . Each entry in succesive
rows is a linear combination of the entry directly above it and the entry above
and to the right, using the weights 1 − t and t respectively.
Example 3.1. Given the four control points:

b0 = [1; 1]
b1 = [2; 8]
b2 = [6; 0]
b3 = [8; 7]

11
For reference the cubic Bezier curve is parametrized by:

b(t) = (1 − t3 )[1; 1] + 3t(1 − t)2 [2; 8] + 3t2 (1 − t)[6; 0] + t3 [8; 7]


= [−5t3 + 9t2 + 3t + 1; 30t3 − 45t2 + 21t + 1]

Suppose we only needed to find b(0.1). Using the algorithm we proceed as


follows:
[1; 1] [2; 8] [6; 0] [8; 7]
[1.1; 1.7] [2.4; 7.2] [6.2; 0.7]
[1.23; 2.25] [2.78; 6.55]
[1.385; 2.68]
In this table, for example, the b1,0 entry is [1.1, 1.7] = (1 − 0.1)[1; 1] + 0.1[2; 8].
Thus b(0.1) = [1.385; 2.68]. This checks out in the parametrization above.
Moreover the algorithm gives us a method of subdividing the curve. To give
an example of how this would be useful, imagine an object in R2 described by
a set of curves where each curve is the Bezier curve for a given set of control
points. Suppose now that for just one of these curves we need to display part
of the curve. Perhaps the rest is hidden. Suppose we only wish to display the
part from t = 0 to t = 0.1. How could we isolate just that part?
Theorem 3.0.2. Suppose b(t) is the parametrization of the degree n Bezier
curve with control points b0 , ..., bn . Suppose t0 ∈ [0, 1] is chosen. The curves
parametrized by b(t) on [0, t0 ] and b(t) on [t0 , 1] are also degree n Bezier curves
and moreover we may obtain control points for these two curves according to
the following:
(a) For b(t) on [0, t0 ] use the left column of the table going downwards. In
other words use:
b0,0 , b1,0 , b2,0 , ..., bn,0

(b) For b(t) on [t0 , 1] use the diagonal edge of the table going up and to the
right. In other words use:

bn,0 , bn−1,1 , bn−2,2 , ..., b1,n−1 , b0,n

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

You might also like