Escolar Documentos
Profissional Documentos
Cultura Documentos
by
John Kennedy
Mathematics Department
Santa Monica College
1900 Pico Blvd.
Santa Monica, CA 90405
jrkennedy6@gmail.com
Except for this comment explaining that it is blank for
some deliberate reason, this page is intentionally blank!
Bezier Curves 1
A Brief Introduction to Bezier Curves
Assume we are given two endpoints labeled and and two control points labeled and as I I G G
" # " #
shown in Figure below. "
C
2
E
1
C
1
E
2
. Figure 1. Two endpoints E and E and two control points C and C
1 2 1 2
We would like to create a smooth curve whose endpoints will be and . Our curve should have I I
" #
the additional property that the slope of the tangent line leaving should be the same as the slope of I
"
the line connecting points and . In fact, the reason point is called a control point is that the I G G
" " "
position of relative to determines the slope of the curve as it leaves point and starts bending G I I
" " "
towards point . In general, the curve need not go through or even be near either or . I G G
# " #
Similarly, we want our curve to finish by going through the endpoint , but as it does so, we want I
#
the shape of the curve to match the direction of the line segment connecting to . Thus acts as a G I G
# # #
control point, but its control over the shape of the curve is influenced primarily by 's position relative G
#
to the point . The control points and are independent of one another. It is only the relative I G G
# " #
positions of and and then that of and that will help determine the shape of the curve we G I G I
" " # #
would like to draw. Figure 2 below shows an example of a curve that represents the kind of shape we
would like to generate.
Bezier Curves 2
E
1
C
1
C
2
E
2
Figure 2. An example smooth curve connecting E and E whose shape is
1 2
controlled by the two points C and C . The segments E C and C E
1 2 1 1 2 2
are tangents to the curve at the curve's two endpoints E and E .
1 2
We can imagine there could be many such ways to generate a curve like that shown in Figure 2
above. In fact, we could simply draw the curve by using a freehand sketch, but there must be a simple
way to do it using mathematics. Cubic polynomials turn out to fill the bill quite nicely. As will be shown
below, these polynomials are neither too simple to accomplish the task at hand, nor are they too
complex to actually work with.
A first attempt might be to try quadratic (2nd degree) polynomials, but these have only one
nonconstant derivative and we are trying to make use of two independent tangents at the curve
endpoints. After some reflection we might think we could gain even more control by using 4th or 5th or
even 6th degree polynomials, but while this is true, the resulting formulas become more complex and on
a computer they take up more memory and more execution time. Cubic polynomials turn out to be
sufficiently rich but not overly burdensome.
Given two endpoints and and given two control points ( and I B C I B C G B C
" " " # # # " $ $
G B C ) + , - . + , - . \
# % % B B B B C C C C
find the cubic parametric coefficients , , , , , , , for the curve whose
and coordinates are parametrized by the cubic equations: ]
\> + > , > - > .
B B B B
$ #
] > + > , > - > .
C C C C
$ #
Bezier Curves 3
in which is the variable parameter. The domain for may be assumed to be the closed interval . > > ! "
We require the following four conditions hold.
1. when we have (this means the curve starts at the point ) > ! \! B ] ! C I
" " "
2. when we have (this means the curve finishes at the point E ) > " \" B ] " C
# # 2
3. when , slope > ! I G
" "
.]
.\
>!
.]
.>
.\
.>
|
$+ > #, > -
$+ > #, > -
C C C
#
B B B
#
(this means the starting part of the curve bends consistent with the direction determined by the
line segment connecting and ) I G
" "
4. when , slope > " G I
# #
.]
.\
>"
.]
.>
.\
.>
|
$+ > #, > -
$+ > #, > -
C C C
#
B B B
#
(this means the ending part of the curve bends consistent with the direction determined by the
line segment connecting and ) G I
# #
From condition we can easily set and calculate that . So is found 1. > ! \! . B .
B " B
immediately. Similarly, so is easy to find. A little more work will be required to ] ! . C .
C " C
determine the remaining six values, , , , , , and . Taken together, conditions and + , - + , -
B B B C C C
2. 3. 4.
determine the following system of 4 equations with essentially 6 unknowns:
+ , - . B
+ , - . C
-
- B B
C C
$+ #, -
$+ #, - B B
C C
B B B B #
C C C C #
C
B $ "
$ "
C C C
B B B % "
% "
While this underdetermined system can be solved (it is tedious to solve!) we will instead rewrite the
form of our parametric equations for the and coordinates of points on the curve. Later in this paper \ ]
we will show that
Bezier Curves 4
\> " > B $>" > B $> " >B > B
] > " > C $>" > C $> " >C > C
$ # # $
" $ % #
$ # # $
" $ % 2
This reformulation of the parametric equations has many advantages. In these forms it is much easier
to see that and so that condition is satisfied. It also a simple matter to \" B ] " C
# #
2.
determine that we still have and . So the endpoint conditions on our curve are \! B ] ! C
" "
satisfied.
If we then calculate the derivatives and we can also more easily see that conditions and
.\ .]
.> .>
3.
4. are also satisfied. We will now do this, but only for the function. The results for are \> ] >
identical.
.\
.>
# # # #
" $ % #
$" > B $" > $> #" > B '>" > $> B $> B
Thus and . Similarly we can show
| |
.\ .\
.> .> >! >"
$B $B $B $B
" $ % #
| |
.] .]
.> .> >! >"
$C $C $C $C
" $ % #
and
Finally,
|
.]
.\ >!
>!
.]
.>
.\
.>
$C $C C C
$B $B B B
" $ $ "
" $ $ "
I G slope of
" ".
|
.]
.\ >
>
1
1
.]
.>
.\
.>
$C $C C C
$B $B B B
% # # %
% # # %
G I slope of
# #.
As an aside, the parametric equations for the and coordinates can be rearranged in the following B C
format which has the advantage of explicitly showing the coefficients on the powers of in terms of the >
coordinates of the original four points , , , and . The justifications for these equations are I G G I
" " # #
derived later in this paper.
\> B $B $B B > $B 'B $B > $B $B > B
] > C $C $C C > $C 'C $C > $C $C > C
" $ % # " $ % " $ "
$ #
" $ % # " $ % " $ "
$ #
Bezier Curves 5
The Amazing Midpoint Property of Bezier Cubic Curves
Finally, we will discuss one of the more spectacular properties of Bezier cubic curves. We have
arranged things so that and . If is any point on the curve then I \! ] ! I \" ] " T
" #
T \> ] > > ! > " > , for some value of where . The question is, what happens when ?
"
#
This should of course be the midpoint" on the curve that connects and . See Figure 3 below. I I
" #
M
E
1
M
1
C
1
M
4
M
2
M
5
C
2
M
3
E
2
Figure 3. A more detailed view of the Bezier curve in terms of midpoints.
M is the midpoint of the segment connecting E and C .
1 1 1
M is the midpoint of the segment connecting C and C .
2 1 2
M is the midpoint of the segment connecting C and E .
3 2 2
M is the midpoint of the segment connecting M and M .
4 1 2
M is the midpoint of the segment connecting M and M .
5 2 3
M is the midpoint of the segment connecting M and M which is
4 5
the same point obtained by computing and . \ ]
" "
# #
Substituting in the coordinate formulas we can calculate 's coordinates from the two > Q
"
#
equations
\> " > B $>" > B $> " >B > B
] > " > C $>" > C $> " >C > C
$ # # $
" $ % #
$ # # $
" $ %
Bezier Curves 6
\ B B B B Q B
" " $ $ "
# ) ) ) )
] C C C C Q C
" " $ $ "
# ) ) ) )
_ _
_ _
" $ % #
" $ % #
's -coordinate
's -coordinate
Point 's coordinates can also be found after first computing five other midpoints. See Figure 3 Q
above. The points , and , and are the midpoints of the three segments that were originally Q Q Q
" # $
drawn and connecting the original four points , , and , and . I G G I
" " # #
We can then draw the two segments which connect the three midpoints , , and . These two Q Q Q
" # $
segments also have midpoints which we label as and in Figure 3. The segment connecting Q Q Q
% & %
and also has a midpoint and it is surprising that this point is the same that is found when we let Q Q
&
>
"
#
in the above coordinate equations. To prove this for yourself all you need do is calculate all the
midpoint coordinates, an easy exercise. But hold on, there is even more!
Note in Figure 3 that the point could have been used as the control point associated with Q I
" "
because the segment has the same slope as the segment . (Similarly could be I Q I G Q
" " " " $
considered as the control point that determines the curve's slope as the curve approaches .). Now I Q
#
is a point on the curve and we can now consider the section of the curve between and . Forget I Q
"
about the rest of the curve. Imagine is the final endpoint. What point would control the slope as the Q
curve approaches from the left? Well looking at Figure 3 it would appear that the segment has Q Q Q
%
a slope that nearly matches the curve's slope at . Could be considered a control point associated Q Q
%
with the new endpoint ? This is what we will investigate next. Q
We claim that the curve's tangent line slope at is the same as the slope of the segment . So Q Q Q
%
we calculate
|
.\
.> >
"
#
B B B B
$ $ $ $
% % % %
" $ % #
Similarly,
|
.]
.> >
"
#
C C C C
$ $ $ $
% % % %
" $ % #
So the Bezier curve slope at the point should be given by: Q
|
.]
.\ B B B B >
>
C C C C
"
#
"
#
" # $ %
" # $ %
.]
.>
.\
.>
$ $ $ $
% % % %
" $ % #
$ $ $ $
% % % %
" $ % #
C C C C
B B B B
Q curve slope at .
Bezier Curves 7
Lastly we calculate the and coordinates of and then we calculate the slope of the segment B C Q
%
Q Q B Q C
% %
. Actually we only calculate the -coordinate of because the -coordinate calculations are
similar.
Q Q
" #
B B
and
B B B B
# #
" $ $ %
so that . Q
%
B
B #B B
%
" $ %
Similarly, we can calculate that and once we have 's coordinates we can Q Q
% %
C
C #C C
%
" $ %
directly calculate the slope of . Q Q
%
the slope of Q Q
%
C C $C $C C #C C
" # $ " $ % %
) %
B B $B $B B #B B
" # $ " $ % %
) %
C C C C
B B B B
" # $ %
" # $ %
This last value matches the value calculated above using the derivatives. It is also possible to
calculate the coordinates of the midpoint and then average those with the coordinates of and Q Q
& %
show that the result yields the coordinates of . Q
The argument we just gave starting with the four original points , , , and , and their I G G I
" " # #
associated midpoints can be applied recursively to the four points , , , and as well as the I Q Q Q
" " %
four points , , , and because these are other sets of endpoints and control points along a Q Q Q I
& $ #
Bezier curve. In fact, it is possible in a computer graphics program to draw an entire Bezier curve, not
by using the parametrized equations, but by simply recursively calculating and plotting a series of nested
midpoints. The curve always lies within the convex hull determined by the original four points , , I G
" "
G I
# #
, and .
Earlier we gave a linear system of four equations and six unknowns and stated that the system was
tedious to solve. In fact, the system is consistent and has an infinite number of solutions with two
parameters. We can make wise use of a couple of degrees of freedom in the system to guarantee the
midpoint property. We not only require explicit starting and ending values for and at and \ ] > !
> " \ B B B B ] C C , we can further stipulate that and
" " " $ $ " " "
# ) ) ) ) # ) )
" # $ % " #
$ $
) )
$ %
C C .
A further result is that will determine the midpoint between and , \ \! \
j j
" "
% #
on the curve
although this is not stipulated. It will also be true that will determine the midpoint \
j
$
%
on the curve
between and All other points will be proportionally distributed with respect to \ \"
"
#
on the curve
the -variable. Later in this paper we will make these ideas more explicit and we will be able to see more >
visually how various -values determine points . > on the curve
Bezier Curves 8
Fitting the additional points at for both and is what gives the unique form to the Bezier > \ ]
"
#
coordinate functions and which is the embodiment of the midpoint property. Since the two \> ] >
original endpoints must be distinct, so must the three midpoints which we can sandwich between them
for the values of and . > > >
" " $
% # %
Further Examples
Examples which illustrate the three possible Bezier curve types are shown in Figure 4 below.
Included are examples of a loop and an example in which and are on opposite sides of the curve. G G
" #
Three of the examples in Figure 4 below have been drawn with symmetry between , , , and , I G G I
" " # #
and when that is the case the same symmetry will be inherited by the resulting curve. But of course,
Bezier curves in general need not have any symmetry.
As was mentioned earlier, an arbitrary Bezier curve will usually not pass through either control
point, but it is possible to construct examples in which the curve coincidentally passes through a control
point. The distance a control point is placed from its corresponding endpoint also affects the shape of the
curve. So both the direction and the relative distance of a control point from its endpoint are important.
Many graphics drawing programs make it easy to draw and experiment with Bezier curves on a
computer screen.
Bezier Curves 9
C
1
C
1
C
1
C
1
C
2
C
2
C
2
C
2
E
1
E
1
E
1
E
1
E
2
E
2
E
2
E
2
Figure 4. Various examples of Bezier curves.
Bezier Curves 10
Putting It Altogether, Splines Made Easy
A common exercise for students is to join two mathematical curves. Making endpoints match will
only make the resulting curve continuous, but the real challenge is to make the connection look smooth
at the point which forms the join. This is normally done by insuring the one-sided limits representing the
tangent line slopes are the same on both sides of the joining point. This same technique can be applied to
join several Bezier curves. The condition for making a smooth join between Bezier curves is to simply
require that the two control points and their common end point all be co-linear.
A smooth joining of two Bezier curves is shown in Figure 5 on the next page. In this figure, the first
Bezier curve has the standard labeling for its control and endpoints. Since the endpoint of the first curve
is the starting point for the second curve, the second curve's endpoints are labeled as and . The I I
# $
corresponding control points are labeled as and . G G
$ %
Note that , , and all lie on the same straight line. When this is the case the transition from G I G
# # $
one curve to the next will look smooth. Any number of Bezier sections may be combined in this fashion
to make completely arbitrary curves of increasing complexity. In fact, one of the major applications of
Bezier curves in computer graphics is to make the outline forms of individual text font letters. The so-
called True Type fonts that are supplied with Microsoft Windows were designed using Bezier splines.
Each letter you type on the keyboard gets translated into the drawing of several connected and filled
Bezier curves. Extremely fine control over letter shapes is easily accomplished using Bezier splines. The
last figure in this paper shows an example of how Bezier curves can be used to make a font letter
outline.
Bezier Curves 11
C
1
C
2
C
3
C
4
E
1
E
2
E
3
Figure 5. A smooth joining of two Bezier curves at their common endpoint E
2
.
Bezier Curves 12
Examples of Bezier curves which inherit and exhibit symmetry from the control and endpoints
appear in Figure 6 below. In fact, in three of the four subfigures the control and endpoints are arranged
as the four corners of a square, but the type of generated curve depends on the ordering of the points. In
the fourth subfigure below the control and endpoints are arranged in the shape of an isosceles trapezoid
and the Bezier curve looks like a hairpin with its symmetry corresponding to the shape of the points.
C
1
C
2
C
1
E
1
E
2
E
1
C
2
E
2
E
2
C
2
C
1
E
1
E
2
C
1
C
2
E
1
Figure 6. Various examples of Bezier curves which exhibit symmetry inherited from the
symmetrical placement of the control and endpoints.
The next part of this paper sets up and shows the step-by-step solution of the system of equations.
Bezier Curves 13
Bezier System Solution
We assume and We parametrize the curve by two general cubic polynomials. We can G B C I B C G B C I B C
" $ $ " " " # % % # # #
identify eight conditions that can be used to uniquely identify the eight unknowns.
\> + > , > - > .
B B B B
$ #
] > + > , > - > .
C C C C
$ #
1. \! + > , > - > . B
B B B B "
$ #
>!
|
2. ] ! + > , > - > . C
C C C C "
$ #
>!
|
3.
.] >
.>
.\>
.>
>! >!
C C C C
#
B B B B $ "
#
$ "
$+ > #, > - -
$+ > #, > - - B B
C C
4. \ + , - . B B B B
" " " " " " $ $
# ) % # ) ) ) )
B B B B " # $ %
5. ] + , - . C C C C
" " " " " " $ $
# ) % # ) ) ) )
C C C C " # $ %
6.
.] >
.>
.\>
.>
>" >"
C C C C C C
#
B B B B B B % #
#
% #
$+ > #, > - $+ #, -
$+ > #, > - $+ #, - B B
C C
7. \" + , - . B
B B B B #
8. ] " + , - . C
C C C C #
After discovering the easy values (when ) that and we are led to the following system of six equations in six > ! . B . C
B " C "
unknowns:
Bezier Curves 14
7. + , - B B
B B B # "
8. + , - C C
C C C # "
3. ( ) C C - B B - !
$ " B " $ C
4.
" " " ( " $ $
) % # ) ) ) )
B B B " # $ %
+ , - B B B B
5.
" " " ( " $ $
) % # ) ) ) )
C C C " # $ %
+ , - C C C C
6. $C C + #C C , C C - $B B + #B B , B B - !
% # B % # B % # B # % C # % C # % C
Below is the initial matrix that represents the linear system that needs to be solved: ' '
+ , - + , -
B B B C C C
_
_ _
( ) ( )
" " " ! ! ! B B
! ! ! " " " C C
! ! C C ! ! B B !
" # % ! ! ! (B B $B $B
! ! ! " # % (C C $C $C
$C C # C C C C $ B B
# "
# "
$ " " $
" # $ %
" # $ %
% # % # % # # % # % # %
# B B B B ! ( ) ( )
Now perform the row operations: and "V9A" V9A% $C C V9A" V9A'
% #
_
_ _
( ) ( ) ( )
" " " ! ! ! B B
! ! ! " " " C C
! ! C C ! ! B B !
! " $ ! ! ! 'B $B $B
! ! ! " # % (C C $C $C
! C C # C C $ B B # B B
# "
# "
$ " " $
" $ %
" # $ %
# % % # # % # %
( ) B B $C C B B
# % % # # "
Bezier Curves 15
Next perform V9A% V9A#
_
_ _
( ) ( ) ( )
" " " ! ! ! B B
! " $ ! ! ! 'B $B $B
! ! C C ! ! B B !
! ! ! " " " C C
! ! ! " # % (C C $C $C
! C C # C C $ B B # B B
# "
" $ %
$ " " $
# "
" # $ %
# % % # # % # %
( ) B B $C C B B
# % % # # "
Next perform and then " V9A# V9A" C C V9A# V9A'
% #
_
_ _
( ) ( )
" ! # ! ! ! &B B $B $B
! " $ ! ! ! 'B $B $B
! ! C C ! ! B B !
! ! ! " " " C C
! ! ! " # % (C C $C $C
! ! C C $ B B # B
" # $ %
" $ %
$ " " $
# "
" # $ %
% # # % #
B B B 'B $B $B C C $C C B B
% # % " $ % % # % # # "
Now factor from the bottom-right element. $C C
% #
_
_ _
( ) ( )
" ! # ! ! ! &B B $B $B
! " $ ! ! ! 'B $B $B
! ! C C ! ! B B !
! ! ! " " " C C
! ! ! " # % (C C $C $C
! ! C C $ B B # B
" # $ %
" $ %
$ " " $
# "
" # $ %
% # # % #
B B B $C C #B B B B B
% # % % # " $ % # "
Bezier Curves 16
Continue to simplify the bottom-right element.
_
_ _
( ) ( )
" ! # ! ! ! &B B $B $B
! " $ ! ! ! 'B $B $B
! ! C C ! ! B B !
! ! ! " " " C C
! ! ! " # % (C C $C $C
! ! C C $ B B # B
" # $ %
" $ %
$ " " $
# "
" # $ %
% # # % #
B B B $C C B B B B
% # % % # " # $ %
Perform Here we implicitly assume , which is not necessarily valid. However, certain pairs of points are
"
C C
V9A$ C C
( )
$ "
$ "
guaranteed to be distinct. At the end of the solution we will see that this assumption doesn't alter the final conclusion even if C C
$ "
_
_ _
( ) ( )
" ! # ! ! ! &B B $B $B
! " $ ! ! ! 'B $B $B
! ! ! ! !
! ! ! " " " C C
! ! ! " # % (C C $C $C
! ! C C $ B B # B
" # $ %
" $ %
B B
C C
# "
" # $ %
% # # % #
1
" $
$ "
B B B $C C B B B B
% # % % # " # $ %
Now perform and and # V9A$ V9A" $ V9A$ V9A# C C V9A$ V9A'
% #
_
_ _
" ! ! ! ! &B B $B $B
! " ! ! ! 'B $B $B
! ! ! ! !
! ! ! " " " C C
! ! ! " # % (C
#B B
C C
" # $ %
$B B
C C
" $ %
B B
C C
# "
"
" $
$ "
" $
$ "
" $
$ "
1
C $C $C
! ! ! $ B B # B B B B $C C B B B B
# $ %
# % # % # % % # " # $ %
C C B B
C C
( ) ( )
# % " $
$ "
Bezier Curves 17
Now perform 1 and V9A% V9A& $B B V9A% V9A'
% #
_
_ _
" ! ! ! ! &B B $B $B
! " ! ! ! 'B $B $B
! ! ! ! !
! ! ! " " " C C
! ! ! ! " $ 'C
#B B
C C
" # $ %
$B B
C C
" $ %
B B
C C
# "
"
" $
$ "
" $
$ "
" $
$ "
1
$C $C
! ! ! ! B B #B B $B B C C $C C B B B B
$ %
% # % # % # # " % # " $ # %
C C B B
C C
# % " $
$ "
Now perform and We implicitly assume " V9A& V9A% V9A' B B
"
B B
% #
% #
_
_ _
" ! ! ! ! &B B $B $B
! " ! ! ! 'B $B $B
! ! ! ! !
! ! ! " ! # &C C $C $C
! !
#B B
C C
" # $ %
$B B
C C
" $ %
B B
C C
" # $ %
" $
$ "
" $
$ "
" $
$ "
1
! ! " $ 'C $C $C
! ! ! ! " # $C C $C C
" $ %
C C B B $C C B B
C C B B B B
# " % #
# % " $ % # " $
$ " % # % #
Perform " V9A& V9A'
_
_ _
" ! ! ! ! &B B $B $B
! " ! ! ! 'B $B $B
! ! ! ! !
! ! ! " ! # &C C $C $C
! !
#B B
C C
" # $ %
$B B
C C
" $ %
B B
C C
" # $ %
" $
$ "
" $
$ "
" $
$ "
1
! ! " $ 'C $C $C
! ! ! ! " $C C
" $ %
C C B B $C C B B
C C B B B B
" $
0
# % " $ % # $ "
$ " % # % #
Bezier Curves 18
Perform C C B B V9A'
$ " % #
_
_ _
" ! ! ! ! &B B $B $B
! " ! ! ! 'B $B $B
! ! ! ! !
! ! ! " ! # &C C $C $C
! ! ! !
#B B
C C
" # $ %
$B B
C C
" $ %
B B
C C
" # $ %
" $
$ "
" $
$ "
" $
$ "
1
" $ 'C $C $C
! ! ! ! C C B B C C B B $C C B B C C $C C C C B B
" $ %
# % " $ $ " % # % # $ " $ " " $ $ " % #
0
Factor from the bottom-right element. $C C
$ "
_
_ _
" ! ! ! ! &B B $B $B
! " ! ! ! 'B $B $B
! ! ! ! !
! ! ! " ! # &C C $C $C
! ! ! !
#B B
C C
" # $ %
$B B
C C
" $ %
B B
C C
" # $ %
" $
$ "
" $
$ "
" $
$ "
1
" $ 'C $C $C
! ! ! ! C C B B C C B B $C C C C B B C C B B
" $ %
# % " $ $ " % # $ " % # $ " " $ % #
0
Perform Here is where we assume more distinct points.
"
C C B B C C B B
V9A'
# % " $ $ " % #
_
_ _
" ! ! ! ! &B B $B $B
! " ! ! ! 'B $B $B
! ! ! ! !
! ! ! " ! # &C C $C $C
! ! ! !
#B B
C C
" # $ %
$B B
C C
" $ %
B B
C C
" # $ %
" $
$ "
" $
$ "
" $
$ "
1
" $ 'C $C $C
! ! ! ! " $C C
" $ %
$ "
0
Bezier Curves 19
Perform and $ V9A' V9A& # V9A' V9A%
_
_ _
" ! ! ! ! &B B $B $B
! " ! ! ! 'B $B $B
! ! ! ! !
! ! ! " ! ! C C $C $C
! ! ! ! "
#B B
C C
" # $ %
$B B
C C
" $ %
B B
C C
" # $ %
" $
$ "
" $
$ "
" $
$ "
1
! $C 'C $C
! ! ! ! " $C $C
" $ %
" $
0
Perform and and V9A' V9A$ V9A' V9A# V9A' V9A"
B B $B B #B B
C C C C C C
" $ " $ " $
$ " $ " $ "
_
_ _
" ! ! ! ! ! B B $B $B
! " ! ! ! ! $B 'B $B
! ! ! ! ! $B $B
! ! ! " ! ! C C $C $C
! ! ! ! " ! $C 'C $C
! ! ! ! " $C $C
" # $ %
" $ %
" $
" # $ %
" $ %
" $
1
0
Now we can show the final solution of the Bezier cubic polynomials in which we show the solution coefficients:
\> B B $B $B > $B 'B $B > $B $B > B
] > C $C $C C > $C 'C $C > $C $C > C
" # $ % " $ % " $ "
$ #
" $ % # " $ % " $ "
$ #
These equations can also be rearranged to yield the parametric solutions as:
\> > $> $> " B > B $> '> $>B $> $> B
] > > $> $> " C > C $> '> $>C $> $> C
{ }
{ }
$ # $ $ # $ #
" # $ %
$ # $ $ # $ #
" # $ %
Bezier Curves 20
or
\> " $> $> > B > B $>> #> "B $> " >B
] > " $> $> > C > C $>> #> "C $> " >C
{ }
{ }
# $ $ # #
" # $ %
# $ $ # #
" # $ %
or we write the final answer in the simpler and more symmetric form:
\> " > B $>" > B $> " >B > B
] > " > C $>" > C $> " >C > C
$ # # $
" $ % #
$ # # $
" $ % 2
Bezier Curves 21
Yet Another Way To Do It
There is another way to approach the whole idea of a Bezier curve and to derive the formulas for
such curves. First, we start with four arbitrary but non-collinear points, labeled as and in T T T T
" # $ %
Figure 7 below. These four points are somewhat like the four points in Figure 1 at the start of this paper.
T T T T
# $ " %
and will be the control points while and are the endpoints.
T
"
T
T
#
$
%
T
Figure 7. An initial configuration of four points.
When these four points are connected in the order of their subscripts, we can think that we have
made three consecutive but connected vectors, and and T T T T T T
" # # $ $ %
Bezier Curves 22
Next we choose a value where and we define three new points, and such that > ! > " T T T
& ' (
these points divide the vectors and and into the fixed ratio that is . For instance, if T T T T T T >
" # # $ $ %
> !$(& T T T T then will be chosen to be closer to but such that is of the distance away from
& " & "
$
)
but going in the direction of along the vector Similarly, points and would be constructed T T T T T
# " # ' (
to be of the distance that is the length of the vectors and , but away from the starting points
$
)
# $ $ %
T T T T
of those vectors respectively. Consider Figure 8 below where we show the approximate positions of the
three new points and that could correspond to taking T T T > !$(&
& ' (
We may write simple equations with vectors that define these three new points.
>
T T T T T T
T T T T T T
| | | | | | | | | | | |
| | | | | | | | | | | |
" & # ' $ (
" # # $ $ %
T
"
T
T
#
$
T
&
T
'
(
%
T
T
Figure 8. The construction of three additional points and , using a -value T T T >
& ' (
$
)
Bezier Curves 23
In Figure 8 we have also drawn two new line segments or vectors and . T T T T
& ' ' (
Now we construct two new points and that like all constructed points are chosen to be the T T
) *
same relative distance away from the starting points of the vectors along which they lie. lies on the T
)
vector while lies on the vector . T T T T T
& ' * ' (
>
T T T T
T T T T
| | | | | | | |
| | | | | | | |
& ) ' *
& ' ' (
T
"
T
T
#
$
T
&
T
'
(
T
%
*
)
T
T
T
Figure 9. The additional points and , constructed using T T >
) *
$
)
Bezier Curves 24
Finally, we are about to finish an entire construction for a Bezier curve. The last point we construct
will be labeled and it is this point that should be on the Bezier curve. We construct in the same T T
"! "!
manner that we constructed and Our final point lies on the vector but it is T T T T T T T T
) *
just one vector in Figure 9, we were able to find the unique point on that vector in Figure 10 that is the
point on the Bezier curve, corresponding to the original -value that we started with. >
Now we could apply this technique by starting with a sprinkling of a finite set of points, say
uniformly spaced along the vector . For each point along we would just repeatedly apply T T T T
" # " #
what is described in the previous paragraph. In a nutshell, this is de Casteljau's Algorithm. Because
modern computers are so fast, this algorithm can be replaced with direct calculations using the
parametric equations we derived for and However, de Casteljau's Algorithm is still important B> C>
because it gives us another way to develop and to think about Bezier curves.
Text in Relation to Bezier Curves
The figure below shows a Bezier curve, along which we have written a happy birthday message. The
mathematics involved in spreading the text along the curve has to do with figuring out the exact spacing
and placement of the individual letters in the message. The baseline of each letter is parallel to the
tangent line at each corresponding letter-midpoint on the curve.
H
a
p
p
y
B
i
r
t
h
d
a
y
Happy Birthday
Figure 12. Illustration of the problem of mapping text from a straight segment onto a Bezier curve.
Bezier Curves 31
This particular example is noteworthy because the font we are using does not have a fixed width for
all letters. The letter in particular has a relatively short horizontal width compared to the width of the 3
letters and . As the curve bends more towards its end, the placement of the last few letters and their L F
relationship to arc length along the curve is very subtle. De Casteljau's Algorithm provides a simple
means of mapping the straight blue underline length of the straight message onto the interval and ! "
from there, the parametric equations can determine the corresponding points on the curve for the
midpoint of each individual letter.
What is illustrated in Figure 12 is a classic problem faced by map makers. Imagine the Bezier curve
is either a river or a highway on a map and you need to place a text description along that object. To do
this requires a deeper understanding of how to map objects in one domain to another. Another problem
is to decide what side of the curve to use for the text labeling and what direction to use to run the text
along the curve. Note the differences between Figure 12 on the previous page and Figure 13 below.
H
a
p
p
y
B
i
r
t
h
d
a
y
Happy Birthday
Figure 13. The same text but on the other side of the curve and running in the opposite direction.
The next figure actually contains a number of Bezier curves connected and filled to form a fancy
letter in a font design program. The font is named CommercialScript BT. Compare Figure 14 on the F
next page with Figure 15.
Bezier Curves 32
Figure 14. A fancy letter in a font design program that uses Bezier curves to shape letters. F
Figure 15. The points of multiple connected Bezier curves that define the outline of the fancy letter . F
Bezier curves are truly remarkable creatures whose applications in the field of computer graphics,
and computer text in particular, are pervasive. They are sufficiently rich and yet simple to apply.