A Brief Introduction To Bezier Curves
by John Kennedy Mathematics Department Santa Monica College 1900 Pico Blvd. Santa Monica, CA 90405
[email protected]
Except for this comment explaining that it is blank for some deliberate reason, this page is intentionally blank!
A Brief Introduction to Bezier Curves Assume we are given two endpoints labeled I" and I# and two control points labeled G" and G# as shown in Figure " below.
C 2
C 1
E 2 E 1
Figure 1.
Two endpoints E1 and E2 and two control points C1 and C2 .
We would like to create a smooth curve whose endpoints will be I" and I# . Our curve should have the additional property that the slope of the tangent line leaving I" should be the same as the slope of the line connecting points I" and G" . In fact, the reason point G" is called a control point is that the position of G" relative to I" determines the slope of the curve as it leaves point I" and starts bending towards point I# . In general, the curve need not go through or even be near either G" or G# . Similarly, we want our curve to finish by going through the endpoint I# , but as it does so, we want the shape of the curve to match the direction of the line segment connecting G# to I# . Thus G# acts as a control point, but its control over the shape of the curve is influenced primarily by G# 's position relative to the point I# . The control points G" and G# are independent of one another. It is only the relative positions of G" and I" and then that of G# and I# that will help determine the shape of the curve we 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
1
C 2 C 1
E 2
E 1
Figure 2.
An example smooth curve connecting E1 and E2 whose shape is controlled by the two points C1 and C2 . The segments E1 C1 and C2 E2 are tangents to the curve at the curve's two endpoints E1 and E2 .
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 I" ÐB" ß C" Ñ and I# ÐB# ß C# Ñ and given two control points G" (B$ ß C$ Ñ and G# ÐB% ß C% Ñ find the ) cubic parametric coefficients +B , ,B , -B , .B , +C , ,C , -C , .C for the curve whose \ and ] coordinates are parametrized by the cubic equations: \Ð>Ñ œ +B >$ ,B ># -B > .B ] Ð>Ñ œ +C >$ ,C ># -C > .C
Bezier Curves
2
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 \Ð!Ñ œ B" ß ] Ð!Ñ œ C"
(this means the curve starts at the point I" )
2. when > œ " we have \Ð"Ñ œ B# ß ] Ð"Ñ œ C#
(this means the curve finishes at the point E2 )
.] 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 I" and 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 G# and I# ) From condition 1. we can easily set > œ ! and calculate that \Ð!Ñ œ .B œ B" . So .B is found immediately. Similarly, ] Ð!Ñ œ .C œ C" so .C is easy to find. A little more work will be required to determine the remaining six values, +B , ,B , -B , +C , ,C , and -C . Taken together, conditions 2. 3. and 4. determine the following system of 4 equations with essentially 6 unknowns: +B ,B -B .B œ B# +C ,C -C .C œ C# -C C$ C" œ -B B$ B" $+C #,C -C C% C" œ $+B #,B -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
3
\Ð>Ñ œ Ð" >Ñ$ B" $>Ð" >Ñ# B$ $># Ð" >ÑB% >$ B# ] Ð>Ñ œ Ð" >Ñ$ C" $>Ð" >Ñ# C$ $># Ð" >ÑC% >$ C2 This reformulation of the parametric equations has many advantages. In these forms it is much easier to see that \Ð"Ñ œ B# and ] Ð"Ñ œ C# so that condition 2. is satisfied. It also a simple matter to determine that we still have \Ð!Ñ œ B" and ] Ð!Ñ œ C" . So the endpoint conditions on our curve are satisfied. .] If we then calculate the derivatives .\ .> and .> we can also more easily see that conditions 3. and 4. are also satisfied. We will now do this, but only for the \Ð>Ñ function. The results for ] Ð>Ñ are identical.
.\ .>
œ $Ð" >Ñ# B" Ò $Ð" >Ñ# $> † #Ð" >ÑÓ † B$ Ò '>Ð" >Ñ $># Ó † B% $># B#
.\ Thus .\ .> >œ! œ $B" $B$ and .> >œ" œ $B% $B# . Similarly we can show .] .> >œ!
Finally,
.] .\ >œ! .] .\ >œ1
œ $C" $C$ and .] .> >œ" œ $C% $C#
œ
.] .> .\ .> >œ!
œ $B" $B$ œ B$ B" œ slope of I" G". " $ $ "
œ
.] .> .\ .> >œ1
œ $B% $B# œ B# B% œ slope of G# I#. % # # %
$C $C
C C
$C $C
C C
As an aside, the parametric equations for the B and C coordinates can be rearranged in the following format which has the advantage of explicitly showing the coefficients on the powers of > in terms of the coordinates of the original four points I" , G" , G# , and I# . The justifications for these equations are 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
4
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 I" œ Ð\Ð!Ñß ] Ð!ÑÑ and I# œ Ð\Ð"Ñß ] Ð"ÑÑ. If T is any point on the curve then T œ Ð\Ð>Ñ, ] Ð>ÑÑ for some value of > where ! Ÿ > Ÿ ". The question is, what happens when > œ "# ? This should of course be the “midpoint" on the curve that connects I" and I# . See Figure 3 below.
C 2 M 2 C 1 M 4
M 5
M
M 3
M 1
E 2 E 1
Figure 3.
Substituting > œ equations
A more detailed view of the Bezier curve in terms of midpoints. M1 is the midpoint of the segment connecting E1 and C1 . M2 is the midpoint of the segment connecting C1 and C2 . M3 is the midpoint of the segment connecting C2 and E2 . M4 is the midpoint of the segment connecting M1 and M2 . M5 is the midpoint of the segment connecting M2 and M3 . M is the midpoint of the segment connecting M4 and M5 which is the same point obtained by computing \Ð "# Ñ and ] Ð "# Ñ. " #
in the coordinate formulas we can calculate Q 's coordinates from the two
\Ð>Ñ œ Ð" >Ñ$ B" $>Ð" >Ñ# B$ $># Ð" >ÑB% >$ B# ] Ð>Ñ œ Ð" >Ñ$ C" $>Ð" >Ñ# C$ $># Ð" >ÑC% >$ C
Bezier Curves
5
" " $ $ " \ œ B" B$ B% B# œ Q 's B-coordinate # ) ) ) ) " " $ $ " ] œ C" C$ C% C# œ Q 's C-coordinate # ) ) ) )
Point Q 's coordinates can also be found after first computing five other midpoints. See Figure 3 above. The points Q" , and Q# , and Q$ are the midpoints of the three segments that were originally drawn and connecting the original four points I" , G" , and G# , and I# . We can then draw the two segments which connect the three midpoints Q" , Q# , and Q$ . These two segments also have midpoints which we label as Q% and Q& in Figure 3. The segment connecting Q% and Q& also has a midpoint and it is surprising that this point is the same Q that is found when we let > œ "# 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 Q" could have been used as the control point associated with I" because the segment I" Q" has the same slope as the segment I" G" . (Similarly Q$ could be considered as the control point that determines the curve's slope as the curve approaches I# .). Now Q is a point on the curve and we can now consider the section of the curve between I" and Q . Forget about the rest of the curve. Imagine Q is the final endpoint. What point would control the slope as the curve approaches Q from the left? Well looking at Figure 3 it would appear that the segment Q% Q has a slope that nearly matches the curve's slope at Q . Could Q% be considered a control point associated with the new endpoint Q ? This is what we will investigate next. We claim that the curve's tangent line slope at Q is the same as the slope of the segment Q% Q . So we calculate
Similarly,
.\ .> >œ "#
œ $% B" $% B$ $% B% $% B#
.] .> >œ "#
œ $% C" $% C$ $% C% $% C#
So the Bezier curve slope at the point Q should be given by: .] .\ >œ "#
œ
.] .> .\ .>
œ >œ "#
$% C" $% C$ $% C% $% C# $% B" $% B$ $% B% $% B#
Bezier Curves
œ
6
C" C# C$ C% B" B# B$ B% œ curve slope at Q .
Lastly we calculate the B and C coordinates of Q% and then we calculate the slope of the segment Q% Q . Actually we only calculate the B-coordinate of Q% because the C-coordinate calculations are similar. Q"B œ
so that
B" B$ #
and
Q%B œ
B" #B$ B% . %
Similarly, we can calculate that Q%C œ directly calculate the slope of Q% Q .
the slope of Q% Q œ
Q#B œ
B$ B% #
C" #C$ C% and once we have Q% 's coordinates we can %
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 Q& and then average those with the coordinates of Q% and show that the result yields the coordinates of Q . The argument we just gave starting with the four original points I" , G" , G# , and I# , and their associated midpoints can be applied recursively to the four points I" , Q" , Q% , and Q as well as the four points Q , Q& , Q$ , and I# because these are other sets of endpoints and control points along a 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# , and I# . 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 > œ ", we can further stipulate that \Ð "# Ñ œ ") B" ") B# $) B$ $) B% and ] Ð "# Ñ œ ") C" ") C# $ $ ) C$ ) C% . A further result is that \ "% will determine the midpoint on the curve between \Ð!Ñ and \ "# , although this is not stipulated. It will also be true that \ $% will determine the midpoint on the curve between \Ð "# Ñ and \Ð"ÑÞ All other points on the curve will be proportionally distributed with respect to 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
7
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 G" and G# are on opposite sides of the curve. Three of the examples in Figure 4 below have been drawn with symmetry between I" , G" , G# , and 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
8
C 2
C 1
C 2
C 1 E 2
E 1
E 2
E 1
E 1 E 2 E 1
E 2 C 2
C 1
C 2
C 1 Figure 4. Various examples of Bezier curves.
Bezier Curves
9
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 I# and I$ . The corresponding control points are labeled as G$ and G% . Note that G# , I# , and G$ all lie on the same straight line. When this is the case the transition from 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 socalled 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
10
C 3 C 1
E 2
E 1 E 3 C 2
C 4
Figure 5. A smooth joining of two Bezier curves at their common endpoint E2 .
Bezier Curves
11
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
E 1
C 2
E 2 E 2
C 2
E 1
Figure 6.
C 2
C 1
E 1
E 2 C 1
C 2
E 1
C 1
E 2
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
12
Bezier System Solution We assume G" ÐB$ ß C$ Ñ Á I" ÐB" ß C" Ñ and G# ÐB% ß C% Ñ Á I# ÐB# ß C# ÑÞ We parametrize the curve by two general cubic polynomials. We can identify eight conditions that can be used to uniquely identify the eight unknowns. \Ð>Ñ œ +B >$ ,B ># -B > .B ] Ð>Ñ œ +C >$ ,C ># -C > .C 1. 2.
3. 4. 5. 6. 7. 8.
\Ð!Ñ œ +B >$ ,B ># -B > .B ] Ð!Ñ œ +C >$ ,C ># -C > .C .] Ð>Ñ .> .\Ð>Ñ >œ! .>
>œ!
>œ!
œ B" œ C"
$+C ># #,C > -C -C C$ C" œ œ œ # $+B > #,B > -B >œ! -B B$ B"
\Ð "# Ñ œ ") +B "% ,B "# -B .B œ ") B" ") B# $) B$ $) B% ] Ð "# Ñ œ ") +C "% ,C "# -C .C œ ") C" ") C# $) C$ $) C% .] Ð>Ñ .> .\Ð>Ñ >œ" .>
œ
$+C ># #,C > -C $+C #,C -C C% C# œ œ # $+B > #,B > -B >œ" $+B #,B -B B% B#
\Ð"Ñ œ +B ,B -B .B œ B# ] Ð"Ñ œ +C ,C -C .C œ C#
After discovering the easy values (when > œ !) that .B œ B" and .C œ C" we are led to the following system of six equations in six unknowns:
Bezier Curves
13
7. 8. 3. 4. 5. 6.
+B ,B -B œ B# B" +C ,C -C œ C# C" C$ C" -B ÐB" B$ Ñ-C œ ! " " " ( " $ $ ) +B % ,B # -B œ ) B" ) B# ) B$ ) B% " " " ( " $ $ ) +C % ,C # -C œ ) C" ) C# ) C$ ) C% $ÐC% C# Ñ+B #ÐC% C# Ñ,B ÐC% C# Ñ-B $ÐB# B% Ñ+C #ÐB# B% Ñ,C ÐB# B% Ñ-C œ !
Below is the initial matrix that represents the linear ' ‚ ' system that needs to be solved: +B
,B
" ! ! " ! $ÐC% C# Ñ
" ! ! # ! #C% C#
-B " ! C$ C" % ! C% C#
+C ! " ! ! " $B# B%
,C ! " ! ! # #B# B%
-C ! ã B# B" " ã C# C" B" B$ ã ! ! ã (B" B# $B$ $B% % ã (C" C# $C$ $C% B# B% ã !
Now perform the row operations: "ÐV9A "Ñ ÐV9A %Ñ and $ÐC% C# ÑÐV9A "Ñ ÐV9A 'Ñ " ! ! ! ! !
" ! ! " ! C# C%
" ! C$ C" $ ! #C% C#
! " ! ! " $B# B%
! ! " " ! B" B$ ! ! # % #B# B% B# B%
Bezier Curves
ã B# B" ã C# C" ã ! ã 'B" $B$ $B% ã (C" C# $C$ $C% ã $ÐC% C# ÑÐB# B" Ñ
14
Next perform ÐV9A %Ñ Ç ÐV9A #Ñ " ! ! ! ! !
" " ! ! ! C# C%
" $ C$ C" ! ! #C% C#
! ! ! " " $B# B%
! ! ! ! ! B" B$ " " # % #B# B% B# B%
ã B# B" ã 'B" $B$ $B% ã ! ã C# C" ã (C" C# $C$ $C% ã $ÐC% C# ÑÐB# B" Ñ
Next perform " † ÐV9A #Ñ ÐV9A "Ñ and then ÐC% C# ÑÐV9A #Ñ ÐV9A 'Ñ " ! ! ! ! !
! " ! ! ! !
# $ C$ C" ! ! C% C#
! ! ! " " $B# B%
! ! ! ! ! B" B$ " " # % #B# B% B# B%
ã &B" B# $B$ $B% ã 'B" $B$ $B% ã ! ã C# C" ã (C" C# $C$ $C% ã Ð'B" $B$ $B% ÑÐC% C# Ñ$ÐC% C# ÑÐB# B" Ñ
Now factor $ÐC% C# Ñ from the bottom-right element. " ! ! ! ! !
! " ! ! ! !
# $ C$ C" ! ! C% C#
! ! ! " " $B# B%
! ! ! ! ! B" B$ " " # % #B# B% B# B%
ã &B" B# $B$ $B% ã 'B" $B$ $B% ã ! ã C# C" ã (C" C# $C$ $C% ã $ÐC% C# ÑÖ#B" B$ B% B# B" ×
Bezier Curves
15
Continue to simplify the bottom-right element. " ! ! ! ! !
! # " $ ! C$ C" ! ! ! ! ! C% C#
! ! ! " " $B# B%
! ! ! ! ! B" B$ " " # % #B# B% B# B%
ã &B" B# $B$ $B% ã 'B" $B$ $B% ã ! ã C# C" ã (C" C# $C$ $C% ã $ÐC% C# ÑÖB" B# B$ B% ×
" † ÐV9A $ÑÞ Here we implicitly assume C$ Á C" , which is not necessarily valid. However, certain pairs of points are 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" Þ Perform " ! ! ! ! !
! " ! ! ! !
# $ 1 ! ! C% C#
! ! ! " " $B# B%
! ! ! " # #B# B%
! ! B" B$ C$ C"
" % B# B%
ã &B" B# $B$ $B% ã 'B" $B$ $B% ã ! ã C# C" ã (C" C# $C$ $C% ã $ÐC% C# ÑÖB" B# B$ B% ×
Now perform # † ÐV9A $Ñ ÐV9A "Ñ and $ † ÐV9A $Ñ ÐV9A #Ñ and ÐC% C# Ñ † ÐV9A $Ñ ÐV9A 'Ñ " ! ! ! ! " ! ! ! ! 1 ! ! ! ! " " ! ! ! ! ! ! $B# B%
! ! ! " # #B# B%
#ÐB" B$ Ñ C$ C" $ÐB" B$ Ñ C$ C" B" B$ C$ C"
ã
" % ÐC# C% ÑÐB" B$ Ñ C$ C"
B# B%
&B" B# $B$ $B%
ã 'B" $B$ $B% ã ! ã C# C" ã (C" C# $C$ $C% ã $ÐC% C# ÑÖB" B# B$ B% ×
Bezier Curves
16
Now perform 1 † ÐV9A %Ñ ÐV9A &Ñ and $ÐB% B# Ñ † ÐV9A %Ñ ÐV9A 'Ñ " ! ! ! ! !
!
!
" ! ! 1 ! ! ! ! ! !
!
#ÐB" B$ Ñ C$ C" $ÐB" B$ Ñ C$ C" B" B$ C$ C"
!
! ! ! ! " " ! " ! B% B#
!
!
!
!
" ! ! 1 ! ! ! ! ! !
! ! " ! !
! ! ! " "
&B" B# $B$ $B%
#ÐB" B$ Ñ C$ C" $ÐB" B$ Ñ C$ C" B" B$ C$ C"
ã
# $ ÐC# C% ÑÐB" B$ Ñ ÐC$ C" ÑÐB% B# Ñ
#
" † ÐV9A 'ÑÞ We implicitly assume B% Á B# Þ B% B#
&B" B# $B$ $B%
ã 'B" $B$ $B% ã ! ã &C" C# $C$ $C% ã 'C" $C$ $C% # ÑÐB" B$ Ñ ã $ÐC# C" Ñ $ÐC% C $ÐC% C# Ñ ÐB% B# Ñ
Perform " † ÐV9A &Ñ ÐV9A 'Ñ " ! ! ! ! !
!
!
!
!
" ! ! ! !
! 1 ! ! !
! ! " ! !
! ! ! " 0
ã 'B" $B$ $B% ã ! " ã C# C" $ ã 'C" $C$ $C% ÐC# C% ÑÐB" B$ Ñ #ÐB% B# Ñ ã $ÐB% B# ÑÐC# C" Ñ$ÐC% C# ÑÖÐB" B$ Ñ ÐB# B% Ñ× C$ C"
Now perform " † ÐV9A &Ñ ÐV9A %Ñ and " ! ! ! ! !
ã
#ÐB" B$ Ñ C$ C" $ÐB" B$ Ñ C$ C" B" B$ C$ C"
# $ ÐC# C% ÑÐB" B$ Ñ ÐC$ C" ÑÐB% B# Ñ
ã ã ã ã ã " ã
&B" B# $B$ $B%
'B" $B$ $B% ! &C" C# $C$ $C% 'C" $C$ $C% $ÐC% C# ÑÐB$ B" Ñ $ÐC" C$ Ñ ÐB% B# Ñ Bezier Curves
17
Perform ÐC$ C" ÑÐB% B# Ñ † ÐV9A 'Ñ " ! ! ! ! !
!
#ÐB" B$ Ñ C$ C" $ÐB" B$ Ñ C$ C" B" B$ C$ C"
!
!
!
ã
" ! ! 1 ! ! ! ! ! !
! ! " ! !
! ! ! # " $ 0 ÐC# C% ÑÐB" B$ Ñ ÐC$ C" ÑÐB% B# Ñ
&B" B# $B$ $B%
ã 'B" $B$ $B% ã ! ã &C" C# $C$ $C% ã 'C" $C$ $C% ã $ÐC% C# ÑÐB$ B" ÑÐC$ C" Ñ $ÐC" C$ ÑÐC$ C" ÑÐB% B# Ñ
Factor $ÐC$ C" Ñ from the bottom-right element. " ! ! ! ! !
!
#ÐB" B$ Ñ C$ C" $ÐB" B$ Ñ C$ C" B" B$ C$ C"
!
!
!
" ! ! 1 ! ! ! ! ! !
! ! " ! !
! ! ! # " $ 0 ÐC# C% ÑÐB" B$ Ñ ÐC$ C" ÑÐB% B# Ñ
Perform
ã
&B" B# $B$ $B%
ã 'B" $B$ $B% ã ! ã &C" C# $C$ $C% ã 'C" $C$ $C% ã $ÐC$ C" ÑÖÐC% C# ÑÐB$ B" Ñ ÐC" C$ ÑÐB% B# Ñ×
" † ÐV9A 'ÑÞ Here is where we assume more distinct points. ÐC# C% ÑÐB" B$ Ñ ÐC$ C" ÑÐB% B# Ñ
" ! ! ! ! ! " ! ! ! ! ! 1 ! ! ! ! ! " ! ! ! ! ! " ! ! ! ! 0
#ÐB" B$ Ñ C$ C" $ÐB" B$ Ñ C$ C" B" B$ C$ C"
# $ "
ã &B" B# $B$ $B% ã 'B" $B$ $B% ã ! ã &C" C# $C$ $C% ã 'C" $C$ $C% ã $ÐC$ C" Ñ
Bezier Curves
18
Perform $ † ÐV9A 'Ñ ÐV9A &Ñ and # † ÐV9A 'Ñ ÐV9A %Ñ " ! ! ! ! ! " ! ! ! ! ! 1 ! ! ! ! ! " ! ! ! ! ! " ! ! ! ! 0
Perform
#ÐB" B$ Ñ C$ C" $ÐB" B$ Ñ C$ C" B" B$ C$ C"
! ! "
ã &B" B# $B$ $B% ã 'B" $B$ $B% ã ! ã C" C# $C$ $C% ã $C" 'C$ $C% ã $C" $C$
ÐB" B$ Ñ $ÐB" B$ Ñ #ÐB" B$ Ñ † ÐV9A 'Ñ ÐV9A $Ñ and † ÐV9A 'Ñ ÐV9A #Ñ and † ÐV9A 'Ñ ÐV9A "Ñ ÐC$ C" Ñ ÐC$ C" Ñ ÐC$ C" Ñ
" ! ! ! ! ! ã B" B# $B$ $B% ! " ! ! ! ! ã $B" 'B$ $B% $B" $B$ ! ! 1 ! ! ! ã ! ! ! " ! ! ã C" C# $C$ $C% ! ! ! ! " ! ã $C" 'C$ $C% ! ! ! ! 0 " ã $C" $C$ 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
19
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% >$ C2
Bezier Curves
20
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 T" ß T# ß T$ ß and T% in Figure 7 below. These four points are somewhat like the four points in Figure 1 at the start of this paper. T# and T$ will be the control points while T" and T% 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, T" T# and T# T$ and T$ T% Þ
Bezier Curves
21
Next we choose a value > where ! Ÿ > Ÿ " and we define three new points, T& ß T' ß and T( such that Ä Ä Ä these points divide the vectors T" T# and T# T$ and T$ T% into the fixed ratio that is >. For instance, if > œ !Þ$(& then T& will be chosen to be closer to T" ß but such that T& is $) of the distance away from T" ß Ä but going in the direction of T# along the vector T" T# Þ Similarly, points T' and T( would be constructed Ä Ä to be $) of the distance that is the length of the vectors T# T$ and T$ T% , but away from the starting points of those vectors respectively. Consider Figure 8 below where we show the approximate positions of the three new points T& ß T' ß and T( that could correspond to taking > œ !Þ$(&Þ 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 T& ß T' ß and T( , using a >-value ¸ $) Þ
Bezier Curves
22
Ä Ä In Figure 8 we have also drawn two new line segments or vectors T& T' and T' T( . Now we construct two new points T) and T* that like all constructed points are chosen to be the same relative distance away from the starting points of the vectors along which they lie. T) lies on the Ä Ä vector T& T' while T* lies on the vector T' T( . Ä Ä T& T) T' T* >œ œ Ä Ä T& T' T' T(
T
T'
#
T$ T*
T)
T(
T&
T" T% Figure 9. The additional points T) and T* , constructed using > ¸ $) Þ
Bezier Curves
23
Finally, we are about to finish an entire construction for a Bezier curve. The last point we construct will be labeled T"! and it is this point that should be on the Bezier curve. We construct T"! in the same Ä manner that we constructed T& ß T' ß T( ß T) ß and T* Þ Our final T"! point lies on the vector T) T* but it is closer to the starting point of this vector T) ß at least when > œ !Þ$(&Þ Figure 10 below shows the final construction of all the points we need to define the Bezier curve that is shown in the color blue in the figure.
T#
T'
T$ T*
T)
T"!
T(
T&
T" T% Figure 10. Point T"! turns out to be an arbitrary point on the blue Bezier curve.
Bezier Curves
24
The entire construction in the last part of this paper, as we have done it up to this point, is a generalization of the amazing midpoint property that is shown in Figure 3. What makes this a generalization is that for our most recent series of figures we have assumed > ¸ !Þ$(& œ $) Þ Had we chosen > œ "# then we would have drawn Figures 8, 9, and 10 using midpoints and our figures would have all been similar to Figure 3. The Bezier curve in Figure 10 is different from the Bezier curve in Figure 3 because the four points in Figure 7 have a somewhat different configuration than the four points in Figure 1. We have also chosen a ratio value > that is deliberately different from "# . We will now argue that when > varies continuously between ! and ", that points T& ß T' ß T( ß T) ß and T* will also vary continuously and thus the final point T"! will vary continuously. The most amazing fact we have yet to establish is that the points T"! and only the points T"! lie on the Bezier curve that is shown in Figure 10. To begin the argument we ask two simple questions. What generates T"! or what is T"! when > œ ! and when > œ "? When > œ ! then it should be clear that T& œ T" and that T' œ T# and that T( œ T$ Þ In fact, if we go back and look at the equations that use > and that define T) and T* , Ä Ä T& T) T' T* >œ œ Ä Ä T& T' T' T( Ä we can reason that when > œ ! then T) œ T& œ T" and that T* œ T' œ T# Þ So the vector T) T* is really Ä the vector T" T# and when > œ ! we would have T"! œ T" Þ In other words, when > œ !, the point T"! is really the point T" that serves as the initial point of the entire Bezier curve. Similar reasoning shows that when > œ "ß then T& œ T# and T' œ T$ and T( œ T% Þ In this case the Ä Ä vector T) T* is really the vector T$ T% and when > œ " we would have T"! œ T% Þ In other words, when > œ ", the point T"! is really the point T% that is the final point of the entire Bezier curve. To reason for all the other values of >, we are just going to do some high school algebra and calculate the coordinates of the point T"! directly, using only the coordinates of the original four points T" ß T# ß T$ ß and T% Þ Of course we also take apart the vector equations that were used to define > and the intermediate points T& ß T' ß T( ß T) ß and T* . In all of the following equations we assume the B and C coordinates of any point T8 are denoted using the notation ÐB8 ß C8 ÑÞ Ä Ä The equation that defines T& , may be written in the vector form T" T& œ > † T" T# and when we expand this equation in a vector form using individual components we have ØB& B" ß C& C" Ù œ > † ØB# B" ß C# C" Ù from which we can solve for B& and C& : B& œ >B# >B" B" œ >B# Ð" >ÑB" C& œ >C# >C" C" œ >C# Ð" >ÑC"
Bezier Curves
25
Since these two equations are identical except for the B and C variables, in the future, we need not write such equations in pairs. In fact, we can simplify things by not writing either B or C but write T with a subscript. Later, we can replace T with either B or C. Thus we will simplify the above equation by writing: T& œ >T# Ð" >ÑT" In a similar fashion we can write: T' œ >T$ Ð" >ÑT# T( œ >T% Ð" >ÑT$ Now we have the first three constructed points T& ß T' ß T( written in terms of the original four points. Our next goal is to introduce T) and T* , but of course we will substitute to also get these two points in terms of the original four points. T8 œ >T' Ð" >ÑT& T* œ >T( Ð" >ÑT' Substitute for T& , T' ß and T( using the above three equations: T8 œ >>T$ Ð" >ÑT# Ð" >Ñ>T# Ð" >ÑT" and simplify:
T* œ >>T% Ð" >ÑT$ Ð" >Ñ>T$ Ð" >ÑT# T8 œ ># T$ >Ð" >ÑT# Ð" >Ñ>T# Ð" >Ñ# T" T* œ ># T% >Ð" >ÑT$ Ð" >Ñ>T$ Ð" >Ñ# T# T8 œ ># T$ #>Ð" >ÑT# Ð" >Ñ# T" T* œ ># T% #>Ð" >ÑT$ Ð" >Ñ# T#
Finally we may write T"! œ >T* Ð" >ÑT) and substitute a final time for T* and T"! : T"! œ >># T% #>Ð" >ÑT$ Ð" >Ñ# T# Ð" >Ñ># T$ #>Ð" >ÑT# Ð" >Ñ# T"
Bezier Curves
26
We continue simplifying. T"! œ >$ T% #># Ð" >ÑT$ >Ð" >Ñ# T# Ð" >Ñ># T$ #>Ð" >Ñ# T# Ð" >Ñ$ T" T"! œ >$ T% #># Ð" >Ñ Ð" >Ñ># T$ >Ð" >Ñ# #>Ð" >Ñ# T# Ð" >Ñ$ T" T"! œ >$ T% $># Ð" >ÑT$ $>Ð" >Ñ# T# Ð" >Ñ$ T" T"! œ Ð" >Ñ$ T" $>Ð" >Ñ# T# $># Ð" >ÑT$ >$ T% Now from this last equation we can translate to B and C coordinates by making replacements with the letter T . In place of T"! we write BÐ>Ñ and CÐ>Ñ to denote general points on the Bezier curve. BÐ>Ñ œ Ð" >Ñ$ B" $>Ð" >Ñ# B# $># Ð" >ÑB$ >$ B% CÐ>Ñ œ Ð" >Ñ$ C" $>Ð" >Ñ# C# $># Ð" >ÑC$ >$ C% When we compare these last two equations with the two equations at the bottom of page 20 in this paper we see they represent the same thing. The notation and the subscripts of the points differ between Figure 1 and Figure 7, but the equations are identical. Thus, another way of deriving the points on a Bezier curve is to consider the constructions in Figures 7, 8, 9, and 10. This concludes the proof that the points T"! and only the points T"! are the points of the Bezier curve.
The Bernstein Polynomials and de Casteljau's Algorithm The polynomials in the variable > that occur as coefficients on the B3 and C3 coordinates in the last two equations above are called the Bernstein Polynomials of degree 3. In fact, there are 4 such polynomials and the coefficients on those polynomials, " $ $ ", are the binomial coefficients that come directly from the 4th row of Pascal's Triangle. Sergei Bernstein was a Russian mathematician (1880-1968) who used polynomials like these (but with higher degrees) to prove that any continuous real-valued function 0 ÐBÑ defined on the closed interval Ò!ß "Ó could be uniformly approximated over its domain by a single polynomialÞ The single polynomial is a special linear combination of the Bernstein polynomials. In fact, this statement is a famous theorem called the Weierstrass Approximation Theorem. In general, if 8 is a positive integer, then the 5 th Bernstein polynomial of degree 8 is given by 8 F8ß5 Ð>Ñ œ >5 Ð" >Ñ85 5
for 5 œ !ß "ß #ß á ß 8
Bezier Curves
27
Ð8 "Ñ
We use the notation 85 to denote the typical number found in Pascal's Triangle in the 5 th position of the 8th row. In our useage, 8 #, but 5 may start counting from !. The notation 85 may be read as "8 choose 5 " and is the number of subsets that can be made by choosing any 5 elements at a time from a set of 8 elements. The Bernstein polynomials satisfy the recursion relationship: F8"ß5 Ð>Ñ œ Ð" >ÑF8ß5 Ð>Ñ >F8ß5" Ð>Ñ The recursion formula can be related to what is called de Casteljau's Algorithm for drawing Bezier curves. The presentation in the last part of this paper, involving Figure 7, Figure 8, Figure 9, and Figure 10 is the basis for the technique developed by Paul de Casteljau for creating Bezier curves. If we restrict > to Ò!ß "Ó then it is interesting to view the graphs of the Bernstein polynomials. They are all nonnegative and they have exactly one local maximum in Ò!ß "ÓÞ The maximum of F8ß5 Ð>Ñ occurs at the >-value > œ 85 . In Figure 11 below, 8 œ $ and 5 œ ! is the blue graph C œ Ð" >Ñ$ , 5 œ " is the red graph C œ $>Ð" >Ñ# , 5 œ # is the gray graph C œ $># Ð" >Ñ, and 5 œ $ is the black graph C œ >$ .
Y 1
0
1
t
Figure 11. The graphs of the four Bernstein polynomials, all of degree $. F$ß5 Ð>Ñ œ 5$ Ð" >Ñ$5 >5 for 5 œ !ß "ß #ß $Þ
Bezier Curves
28
In general, the Bernstein polynomials for 8 #ß F8ß5 Ð>Ñ œ 85 >5 Ð" >Ñ85 have distinct properties depending on the three cases when 5 œ !ß or when " Ÿ 5 Ÿ 8 "ß or when 5 œ 8Þ When 5 œ !ß F8ß! Ð>Ñ œ Ð" >Ñ8 is a decreasing concave up function that starts with its local maximum at Ð!ß "Ñ and steadily decreases to its local minimum at Ð"ß !ÑÞ
When " Ÿ 5 Ÿ 8 "ß then F8ß5 Ð>Ñ œ 85 >5 Ð" >Ñ85 starts increasing before it starts decreasing. It 5 5 8 85 always has a single local maximum at 85 ß 85 85 and has twin local minimums of C œ ! 8
when > œ ! and when > œ "Þ
When 5 œ 8ß then F8ß8 Ð>Ñ œ >8 is always increasing and concave upß starts at its local minimum at Ð!ß !Ñ, and steadily increases to its local maximum at Ð"ß "ÑÞ All Bernstein polynomials are nonnegative over their domain > − Ò!ß "ÓÞ In fact, they are strictly positive if we stay away from the local minimum endpoints at > œ ! and > œ "Þ Another unique property is that for a fixed 8 and for a fixed > − [0,1], F8ß5 Ð>Ñ œ "Þ This property is true because of the 8
5œ!
Binomial Theorem. Note that we may write
" œ Ò"Ó8 œ ÒÐ" >Ñ >Ó8 œ 85 Ð" >Ñ85 >5 œ F8ß5 Ð>Ñ 8
8
5œ!
5œ!
An even more unusual property is that 5F8ß5 Ð>Ñ œ 8>Þ This property means we can write > alone 8
5œ!
as a linear combination of the F8ß5 Ð>Ñ functions. The justification for this property is as follows. 5F8ß5 Ð>Ñ œ 5 8 >5 Ð" >Ñ85 œ 5 8x >5 Ð" >Ñ85 œ 8Ð8"Ñx >5 Ð" >Ñ85 5 Ð85Ñx5x Ð85ÑxÐ5"Ñx 8
8
8
8
5œ!
5œ!
5œ!
5œ"
Ð8"Ñx Ð8"Ñx œ 8> Ð85ÑxÐ5"Ñx >5" Ð" >Ñ85 œ 8> ÐÐ8"ÑÐ5"ÑÑxÐ5"Ñx >5" Ð" >ÑÐ8"ÑÐ5"Ñ 8
8
5œ"
5œ"
Ð8"Ñx Ð" >ÑÐ8"Ñ5 >5 œ 8> ÐÐ8"Ñ4Ñx4x >4 Ð" >ÑÐ8"Ñ4 œ 8> 8" 5 8"
8"
4œ!
5œ!
œ 8>ÒÐ" >Ñ >Ó8" œ 8> † "8" œ 8>Þ Although we won't prove it here, for a given 8, as a class, the set of F8ß5 Ð>Ñ polynomials (there are 8 " of them for 5 œ !ß "ß #ß á ß 8) form a linearly independent set of basis vectors for the vector space of polynomials of degree 8 or less defined on Ò!ß "ÓÞ This basis can be used instead of the standard basis that is "ß >ß ># ß >$ ß á ß >8 Þ The justification of the spanning property is based on the above fact that > alone is a linear combination of the F8,5 Ð>Ñ functions and the recursion relationship at the top of the previous page.
Bezier Curves
29
Now we can say a little more about de Casteljau's Algorithm. If you look back at Figure 7, you can Ä Ä Ä see that we started with the three vectors, T" T# and T# T$ and T$ T% . Then for our given choice of >, we Ä Ä used these three vectors to determine the two new vectors, T& T' and T' T( in Figure 8. We finally used Ä the two new vectors in Figure 8 to determine one last vector, T) T* , in Figure 9. Once we got down to 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 T" T# . For each point along T" T# we would just repeatedly apply 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 BÐ>Ñ and CÐ>ÑÞ However, de Casteljau's Algorithm is still important 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.
Happy Birthday Ha p
p
y
B
i r
t h d
a y Figure 12. Illustration of the problem of mapping text from a straight segment onto a Bezier curve.
Bezier Curves
30
This particular example is noteworthy because the font we are using does not have a fixed width for all letters. The letter 3 in particular has a relatively short horizontal width compared to the width of the letters L and F . As the curve bends more towards its end, the placement of the last few letters and their 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
d
a y
Happy Birthday
Hap
p
y
B
i
r
t
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 F in a font design program. The font is named CommercialScript BT. Compare Figure 14 on the next page with Figure 15.
Bezier Curves
31
Figure 14. A fancy letter F in a font design program that uses Bezier curves to shape letters.
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.
Bezier Curves
32
