Bzier Curves

Kristine Harwood

Iowa State University

MSM Creative Component
Spring 2009

Heather Bolles, Major Professor

Irvin Hentzel, Major Professor
Larry Ebbers, Committee Member

Where Bzier Curves originated and where they are used

page 3

Bzier Curves Parametric Equations

page 5

Bzier Curves on Geometers Sketch Pad

page 15

Connecting the graph to Algebra

page 23

Looking at Bzier Curves with an Excel spreadsheet

page 25

Bzier Curves and Fonts

page 29

Bzier Curves the Basics for Students

page 37

Classroom exercises

page 41

Graphing Calculator
Excel Spreadsheet
Challenge Problems

Bibliography

page 48

Where Bzier curves originated and where they are used

Pierre Bzier (1910-1999) was a French engineer who worked for many years at the Renault
automobile company. In the 1960s and 1970s he developed a method of producing computer-driven
curves to be used in the design of automobiles which came to be known as Bzier curves (Staples,
2005). Bzier curves are used because of their flexibility and high adaptability. While the points of the
curve can be attached to a Cartesian coordinate system, they also behave intuitively for the nonmathematician. They can be made to any length and variety of shape, by attaching the endpoint of one
curve to the beginning point of another. They can be expanded to make Bzier surfaces and B-splines,
both topics that will not be covered in this paper, but which are highly interesting to those who work in
computer design programs.
I was first intrigued with Bzier curves during a computer algorithms course. The subject was
mentioned only briefly, and the idea of a curve being influenced by points that were not on it was one
that tugged at my imagination. As I have investigated and become familiar with these curves, I have
found another truth they beg to be played with, much like a wireless puppet. It is near impossible to
make a Bzier curve and not move points about to change the shape. On a more intellectual level, these
curves have helped me see more clearly how parametric equations behave and can be developed into
increasingly complex representations.
Professional designers respect Bzier curves (Kirsanov, 1999). The author acknowledges the
usefulness and versatility of Bzier curves without delving into the mathematics. He demonstrates the
usefulness of these curves in expression and gives numerous artistic and design examples.
Mathematicians seem to like them for their connection between usefulness in industry, the
connectedness between equation and graph, and the relative ease with which they can be connected
together to form an impressive and flexible curve. S.G. Hoggar (2006) describes them as the basis for

more complicated B-splines. B-splines are formed in a manner similar to connecting a number of
Bzier curves together at their endpoints. Both are used to create and analyze curves in computer
imagery.
An internet search today finds the term Bzier curves in computer graphic design, digitizing
and animation programs and mentioned specifically as used in the programs Inkscape, Adobe
Illustrator, Adobe Photoshop, General Image Manipulation Program, Adobe Flash, Adobe After
Effects, Macromedia Freehand, and Microsoft Expression Blend. Bzier curves are the basis for many
computer generated fonts, most notably Adobe Type fonts. There is a wide variety of font styles, as is
apparent to the user of any word processing program. The advantage to a font using a basis of Bzier
curves is that the characters size is easily scalable. Since Bzier curves are vector drawings, the lines
they produce remain crisp and sharp when they are enlarged. By comparison, a raster image is formed
by pixels, and this type of image loses sharpness as it is enlarged, showing the box-like pixels on its
edges. (Groleau, 2002)
The Bzier curve provides a meaningful bridge between algebraic equation and graceful curve.
Through the use of parametric equations and dynamic graphing, an elegant and flexible curve can be
produced.
Throughout this paper, parametric equations and the mathematics of a Bzier curve will be
explored. Graphs and constructions will be displayed using a variety of technology programs. Several
exercises linking the two will be presented and an introduction for students and a sampling of student
activities will complete the paper.

Bzier Curves Parametric Equations

The equations for Bzier curves are parametric equations. A parametric representation is a
curve that is determined by coordinate pairs of (x,y) points graphed on an x-y plane but in which the y
value is not determined directly from the x-value nor is the x-value determined from the y-value. The
two values of the point are determined separately with another variable, the parameter, which many
times is the variable t and represents a time variable (Purcell and Varberg, 1984).
A straight line can be determined by a pair of parametric equations. Let a segment begin at
point A and end at point B. Let the external parameter be t. Since the segment has a beginning and end,
the parameter must be on a closed interval. Let the beginning of the interval be at t = 0 and let it end at
t = 1.
The equation for x will need to be calculable from the x-value at endpoint A when t = 0 to the xvalue at endpoint B when t = 1. To determine the parametric equation, the x-value at A (call this ax) is
multiplied by (1 - t) and added to the x-value at B (call this bx) multiplied by t. Therefore the
parametric equation for the x-variable of a straight line can be expressed as:
x = f(t) = (1 t) ax + tbx
Similarly, the y-value can be calculated as:

A(ax,ay)

B (bx,by)

y = g(t) = (1 t) ay + tby

If the two endpoints of the segment are B and C, the parametric equations are:
x = f(t) = (1 t) bx + tcx
y = g(t) = (1 t) by + tcy

B (bx,by)

C (cx,cy)

Consider a point P1, determined by a certain ratio along AB .

A

P1

Consider another point, Q1, determined by the same ratio along BC .

B

Q1

Since the two ratios are the same, they can be considered as having the same t-value. If this new point,
P1, on AB moves, the new point on BC , Q1, moves as well, always with the same ratio.

P1

Q1

P1
A

Q1

P1

Q1

Consider the segment between these two new points, P1Q1 . Consider a point, P2, determined using the
the same ratio (and the same t value) along this line segment.

P1
P2

Q1

Now there are three places where the t-value is at work; in AB on point P1, in BC on point Q1, and in
P1Q1 and point P2.

P1

P2

Q1

P1
P2
B

Q1

The curve traced by this inner third moving point (P2) is the Bzier curve.
The equation for this curve of points can be arrived at by using the beginning x value of
segment AB , i.e. (1 t) ax + tbx and the ending x-value of segment AC, ie. (1 t) bx + tcx, since that
is where the path starts and where it ends after tracing its curve from t = 0 to t = 1.
Apply the original parametric equation f(t) = (1 t) ax + tbx, we arrive at
fx(t) = (1 t) [ (1 t) ax + tbx] + (t) [ (1 t) bx + tcx]

Simplifying

fx(t) = (1 t)2 ax + t(1 t) bx + (1 t) (t) bx + t(t) cx

= (1 t)2 ax + 2t(1 t) bx + t2cx

Similarly gy(t) = (1 t)2 ay + 2t(1 t) by + t2cy

This is a quadratic equation and is the equation for a Bzier curve with two endpoints and one
control point. This equation can also be arrived at by using the moving t parts;
(1 t) + t,
and squaring:
[(1 t) + t]2 = (1 t)2 + 2t(1-t) + t2
and including as coefficients the values of each of the three points:
fx(t) = (1 t)2 ax + 2t(1 t) bx + t2cx
gy(t) = (1 t)2 ay + 2t(1 t) by + t2cy

For a cubic equation, that is, for the equation of a Bzier curve with two endpoints and two
control points, we can cube this expression:
[(1 t) + t]3 = (1-t)3 + 3t(1-t)2 + 3t2(1-t) + t3
and inserting coefficients, arrive at the equations:
8

fx(t) = (1-t)3 ax + 3t(1-t)2bx + 3t2(1-t) cx + t3dx

gy(t) = (1-t)3 ay + 3t(1-t)2by + 3t2(1-t) cy + t3dy

The equation can continue to be made more complex and raised to a higher degree. Add a third
control point and we reach a fourth degree polynomial with coefficients derived from the binomial
theorem:
fx(t) = (1-t)4 ax + 4t(1-t)3bx + 6t2(1-t)2cx + 4dxt3(1-t)1dx + t4ex
gy(t) = (1-t)4 ay + 4t(1-t)3by + 6t2(1-t)2cy + 4t3(1-t)1dy + t4ey

As a control point is added, another segment is added as well as an increasing number of

moving points determined by the t-variable. For each additional point, another term is added to the
polynomial, the degree of the equation increases, and the coefficients follow the pattern identified with
the binomial theorem.

The following are true mathematically about Bzier curves;

A) the curve is determined by a pair of parametric equations with 0 t 1
B) a single control point produces a quadratic equation; two control points produces a
cubic equation, and so on.

The chart below demonstrates the equations and curves produced by a number of Bzier
curves. In the far right column, the control points are those appearing outside the curve.

terminal
points;
control
points

parametric equations
x = f(t)
y = g(t)
0t1

degree
of
equation

# of
moving
t
parts

shape created

line segment

x = fx(t) = (1 t) ax + tbx
2; 0
y = gy(t) = (1 t) ay + tby
curve
fx(t) = (1 t)2 ax + 2t(1 t) bx + t2cx
2; 1

gy(t) = (1 t)2 ay + 2t(1 t) by + t2cy

curve

fx(t) = (1-t)3 ax + 3t(1-t)2bx + 3t2(1-t) cx + t3dx

2; 2

gy(t) = (1-t)3ay + 3t(1-t)2by + 3t2(1-t) cy + t3dy

fx(t) = (1-t)4 ax + 4t(1-t)3bx + 6t2(1-t)2cx +

curve

4t3(1-t)1dx + t4ex
2; 3

10

gy(t) = (1-t)4 ay + 4t(1-t)3by + 6t2(1-t)2cy +

4t3(1-t)1dy + t4ey
fx(t) = (1-t)5 ax + 5t(1-t)4bx + 10t2(1-t)3cx +

curve

10t3(1-t)2dx + 5t4(1-t)1ex + t5fx

2; 5

gy(t) = (1-t)5 ay + 5t(1-t)4by + 10t2(1-t)3cy +

15

10t3(1-t)2dy + 5t4(1-t)1ey + t5fy

10

When looking at a Bzier curve graphically, it is important to know that

A) there are two terminal points and at least one other point, called a control point.
B) each terminal point and the nearest control point form a line tangent to the curve at
the terminal point.

To illustrate the B), I will use an image that is illustrated in the student section of the paper
using dogs. Imagine that there is a dog at the beginning terminal point and a dog at each control point.
Imagine that there is a treat at the second terminal point. Before all motion begins, the dog at the
terminal point is looking at the dog at the nearest control point. This line of sight is the first tangent
line. The dog at the control point nearest to the other terminal point is looking at the bone. This dogs
line of sight is the second tangent line. In the constructions that follow, there are many lines that appear
that connect the points and t-values. You will see that the line formed by each terminal point and the
control point nearest to it will be tangent to the curve at the terminal point.

11

Another way to consider the tangent lines is to look at the equations of the curves and the slope
of the lines formed by each terminal point and the nearest control point. Consider a quadratic Bzier
curve. Its equations are fx(t) = (1 t)2 ax + 2t(1 t) bx + t2cx and gy(t) = (1 t)2 ay + 2t(1 t) by + t2cy
and its graph could be:

B (bx, by)

C (cx, cy)

A (ax, ay)

The slope of AB is

y
x

by a y
bx a x

and the slope of BC is

y
x

c y by
c x bx

fx(t) = (1 t)2 ax + 2t(1 t) bx + t2cx

= ax - 2ax t + ax t2 + 2bxt - 2bxt2 + cxt2
gy(t) = (1 t)2 ay + 2t(1 t) by + t2cy
= ay - 2ay t + ay t2 + 2byt - 2byt2 + cyt2
The differentiation of a parametric equation is achieved by
dy

Since

and
dy
dx

dt

dx
dt

dy
dx

dy / dt
dx / dt

= -2ay + 2ayt + 2by - 4byt + 2 cyt

= -2ax + 2axt + 2bx - 4bxt + 2 cxt

dy / dt
dx / dt

2 a y 2 a y t 2b y 4b y t 2 c y t
2 a x 2 a x t 2bx 4bx t 2 c x t

When t = 0, that is, at the first terminal point A (ax , ay),

dy
dx

2 a y 2b y
2 a x 2bx

a y by
a x bx

by a y
bx a y

which is the slope of AB .

12

When t = 1 and when the curve is at the second terminal point C (cx , cy),
by c y
bx c x

c y by
c x bx

dy
dx

2b y 2c y
2b x 2 c x

which is the slope of BC .

Therefore the derivative of the curve at a terminal point is equal to the slope of the line that contains
that point and so lies on the line tangent at that point.

A specific example of points in a cubic Bzier curve is illustrated first by the graph:
10

C (6, 8)
8

B (3, 5)
4

A (1, 2)

D (10, 1)
5

10

15

20

25

-2

-4

-6

The x variable equation is defined by (1-t)3 ax + 3t(1-t)2bx + 3t2(1-t)cx + t3dx

and the y variable equation is defined by (1-t)3ay + 3t(1-t)2by + 3t2(1-t)cy + t3dy .
By substituting values in for the variables and simplifying, we arrive at the equations for the curve as:
x = 1 6t 3t 2 and y = 2 9t 10t 3

13

Taking the derivative, we arrive at

When t = 0,

dy
dx

The slope of AB =

9
6

3
2

52
3 1

dy
dx

and when t = 1,

3
2

9 30t 2
6 6t
dy
dx

9 30
66

and the slope of CD =

21
12

8 1
6 10

7
4

7
4

Once again, the slopes of the tangent lines are equal to the derivative of the curve at the terminal
points.

14

Bzier curves on Geometers Sketch Pad*

To approach the constructions of a Bzier curve on Geometers Sketch Pad, the moving t-value
must be established. In his work with gifted high school students, Mr. Seth Bundy (see footnote) very
cleverly set up a ratio along a segment that would be between 0 and 1 and that would be connected to
each of the segments that would be created by this moving t-value (personal communications,
February 2009).
The first construction will be a Bzier curve in the same manner as the beginning basic
example of three points placed at three corners of a unit square.

Use Graph - Plot from the menu to plot the points at A (0,0), B (0,1) and C (1,1).
Select points A and B and Construct segment; repeat for segment BC.

*Note: I am indebted to Seth Bundy of Seattle, Washington for providing the information for
constructing Bzier curves on Geometers Sketch Pad and for granting me the permission to use his
work in my paper.
15

Select segment AB , Construct Point on Segment, and label it point D .

Select points A and D, go to Measure Distance.
Do the same for points A and B.
Go to Measure Calculate; click on AD (on screen) AB (also on screen).
A ratio of these two measurements will appear. As point D is moved, this ratio will never be smaller
than 0 and never be larger than 1. This is the same range of the parameter t in the Bzier equations.

Now, select point B, go to Transform - Mark Center.

Then select point C, go to Transform - Dilate, and select the ratio AD/AB. (It is very important that this
is selected.) Label this resulting point E.
When point D is moved, point E moves at the same rate, or t. This construction connects these
two movements, and this method will continue to be used through subsequent segment constructions.

16

Repeat the construction: segment between points D and E, choosing center (D) and dilating from point
E with the same ratio. Label the newest point F. Again, as point D is moved, the points E and F also
move at the same rate or t-value.

17

Now, select points D and F, Construct Locus.

The resulting curve is the quadratic Bzier curve.

Select D, Display Animate Point for a better look.

18

Right mouse click on point C Edit plotted point. Change to (2, 1). This changes the curves shape.
However, the two terminal points remain tangent to the curve.

Do the same for point B, changing it to (1.5, 0).

19

This is a pretty rigid form of a Bzier curve. By removing the assignment of points on the coordinate
system, and by following the same construction steps, a much more dynamic Bzier curve is produced.

20

To make a cubic Bzier curve, another control point is added, three more segments are
constructed and three more moving points are added and connected to the t-value. In the diagram
below, point A and point D are the terminal points and point B and point C are the control points. The
point E is the point that determines the t-value and the points F, G, H, I and J all move in concert with
that point. If point E moves along segment AB thus changing the ratio of segment AE to segment AB,
the other points move along their respect segments to match that value.

This curve is very flexible.

21

A curve can be copied and pasted a number of times and connected to make more and more
complex shapes.

Fourth and fifth degree Bzier curves created in Geometers Sketch Pad are shown below.

22

Connecting the graph to Algebra

Below is an example of how to I used Geometers Sketch Pad to find the equation of a Bzier
curve and translate it to a graphing calculator.

1. I used the Geometers Sketch Pad program to construct a Bzier curve with two terminal
points and two end points and hid the lines from being displayed.

2. I manipulated the points until I had an interesting curve, then displayed a Cartesian
coordinate system on the screen. I adjusted the four points so that they were on an intersection
of two grid lines. In the example below, A is on (-4, -2), B is on (-7, 4), C is on (9, 1) and D is
on (5, 6).

3. Given the general equation for a cubic Bzier curve of

p(t) = (1-t)3 a + 3t(1-t)2b + 3t2(1-t) c + t3d
with points a and d as the terminal points and b and c as the control points,
23

I calculated the equation of the line that represents this curve.

For the parametric equation of the x value,
px(t) = (1-t)3(-4) + 3t(1-t)2(-7) + 3t2(1-t) (9) + t3 (5)
= -4(1-t)3 + (-21)t(1-t)2 + (27)t2(1-t) + (5)t3
For the parametric equation of the y value,
py(t) = (1-t)3(-2) + 3t(1-t)2(4) + 3t2(1-t) (1) + t3 (6)
= -2(1-t)3 + (12)t(1-t)2 + (3)t2(1-t) + (6)t3

4. I set the TI-83+ calculator to accept parametric equations, entered the equations that I had
calculated, and used the graph button to display the curve.

Comparing to the original curve as sketched

in Geometers Sketch Pad, it is gratifyingly similar.

24

Looking at Bzier Curves with an Excel spreadsheet

In Ed Staples article (2005), he referred to using the Excel spreadsheet program, which is part
of the Microsoft Office selection of programs, to graph a Bzier curve. In pursuing this, I learned
several valuable lessons.
In order to evaluate these parametric curves in an Excel spreadsheet, it is necessary to have a
clear vision of the how the calculation for points is accomplished. Each of the x-variables and the yvariables must be clearly identified. As the parameter t must be between and include 0 and 1, a
reasonable increment for the span between 0 and 1 must be determined so that sufficient points can be
generated to plot a curve. The x, y, and t values must be linked to the calculating equation. The
products of these calculations must then be accessed as components for the graph of the curve. Since a
quadratic Bzier curve will require three points, these points will need to be labeled and each
coordinate assigned its own cell. There will be as many points generated as t-values and the x and y
values for each of these generated points will need to be displayed in a logical way. Then, these points
will be used to generate a graph/curve using the chart wizard tool in the Excel program. By being clear
on the elements of the quadratic Bzier curve, the worksheet will be readily extended to a cubic and
fourth-degree curve.
The first example will be a square example that has terminal points A and C at (0, 0) and (1,
1) respectively. The control point will be at B (0, 1). In Excel, each element must be treated separately.
A column is created for each of the coordinates of the points.

25

Then, a column must be established for the t values. Here, the increments are in steps of 1/10.

26

The next challenge is the coding for the calculations of the points using the varying t values and
the three x and the three y values of the two terminal points and one control point. This is the actual
formula from the Excel spreadsheet.
=$D$2*(1-F2)^2+2*$D$3*F2*(1-F2)+$D$4*(F2)^2
The D2 cell contains the x-value of the beginning point.
The D3 cell contains the x-value of the control point.
The D4 cell contains the x-value of the ending terminal point.
The F2 cell contains the first of the t-values.
The Excel program will automatically insert the t-values in the F2 through F12 cells in the
appropriate place for the calculations for the G2 through G12 cells.
A similar formula is created to produce y values.

27

Lastly, a chart is created with the chart wizard.

Similar steps are taken to produce a graph of a cubic Bzier curve. A fourth point (D) is added
and the formula used for calculations is expanded to:
=$D$2*(1-F2)^3+3*$D$3*F2*(1-F2)^2+3*$D$4*(F2)^2*(1-F2)+(F2^3*$D$5)
=$E$2*(1-F2)^3+3*$E$3*F2*(1-F2)^2+3*$E$4*(F2)^2*(1-F2)+(F2^3*$E$5)

28

Bzier Curves and Fonts

A principal user of Bzier curves are computer fonts. In an attempt to reproduce a random font
that is used in the Microsoft Word program, I used the following steps:
1. Choose a font and a letter using a variety of curves.
2. Enlarge the letter to a large workable size.
3. Copy and paste the image into Geometers Sketch Pad.
4. Copy and paste an appropriate Bzier curve for each of the curves to make the letter.
5. Use these curves to overlay the image of the letter.
6. Identify the endpoints and control point(s) for each of the curves.
7. Use these points in the appropriate set of parametric equations.
8. Enter these equations into the TI-83+ calculator to produce the letter in the graphing screen.

In the image below, I chose a lower case s in the font Estrangelo Edessa, enlarged it to a
500 point size in Microsoft Word, copied it to the Geometers Sketchpad program, and used three
Bzier curves with two control points (cubic equation) to approximate the curve of the letter. I had
originally thought that a curve with one control point (quadratic equation) would be suitable for the
upper and lower curves of the s, but found that the added control point was required to form the
necessary angles. I was careful to match the endpoints of the connecting curves so that there would be
a smooth transition from one to the next. I realize that this will provide an approximation of the curve
of the letter, but I believe it is a reliable method for estimating curves of various types. An
approximation of the curves of a landform could be placed on an satellite image of the edge of a lake
for example, or the curve of a roller coaster, or the motions of an orbiting body.

29

The image above shows the letter s pasted into the Geometers Sketchpad program. The
points produced from the graph can be used in the general equations to produce accompanying
equations.
For the top section curve, the two terminal points are A1(0.07, 0.46) and D1(0.43, 0.47); the
two control points are B1(0.11, 0.67) and C1(0.40, 0.62). Substituting the values of these points
in the general equations fx(t) = (1-t)3 ax + 3t(1-t)2bx + 3t2(1-t) cx + t3dx and gy(t) = (1-t)3ay + 3t(1t)2by + 3t2(1-t) cy + t3dy, we have:
fx(t) = (1-t)3 (0.07) + 3t(1-t)2(0.11) + 3t2(1-t)(0.40) + t3(0.43)
gy(t) = (1-t)3 (0.46) + 3t(1-t)2(0.67) + 3t2(1-t)(0.62) + t3(0.47)
that simplify to:
fx(t) = 0.07(1-t)3 + 0.33t(1-t)2 + 1.2t2(1-t) + 0.43t3
gy(t) = 0.46(1-t)3 + 2.01t(1-t)2 + 1.86t2(1-t) + 0.47t3

30

Entering these equations into a TI-83+ calculator and graphing them produces the following
screens:

For the center section curve, the two terminal points are A2(0.07, 0.46) and D2(0.44, 0.15); the
two control points are B2(0.05, 0.26) and C21(0.52, 0.38). Substituting the values of these
points we have:
fx(t) = (1-t)3 (0.07) + 3t(1-t)2(0.05) + 3t2(1-t)(0.52) + t3(0.44)
gy(t) = (1-t)3 (0.46) + 3t(1-t)2(0.26) + 3t2(1-t)(0.38) + t3(0.15)
that simply to:
fx(t) = 0.07(1-t)3 + 0.15t(1-t)2 + 1.56t2(1-t) + 0.44t3
gy(t) = 0.46(1-t)3 + 0.78t(1-t)2 + 1.14t2(1-t) + 0.15t3

The second pair of equations can be entered into the TI-83+ calculator and the graph produced
is:

31

For the bottom section curve, the two terminal points are A3(0.05, 0.20) and D3(0.44, 0.15); the
two control points are B3(0.07, 0.03) and C3(0.38, -0.03). Substituting the values of these
points we have:
fx(t) = (1-t)3 (0.05) + 3t(1-t)2(0.07) + 3t2(1-t)(0.38) + t3(0.44)
gy(t) = (1-t)3 (0.20) + 3t(1-t)2(0.03) + 3t2(1-t)(-0.03) + t3(0.15)
that simply to:
fx(t) = 0.05(1-t)3 + 0.21t(1-t)2 + 1.14t2(1-t) + 0.44t3
gy(t) = 0.20(1-t)3 + 0.09t(1-t)2 0.09t2(1-t) + 0.15t3

When this final set of equations is put into the TI-83+ calculator and graphed, the full letter is
produced:

s
The figure on the right is the letter s in Estrangelo Edessa font, 130 point size.

32

To further demonstrate the process, I will choose the letter u.

The far left and far right curves are line segments, so they have two terminal points and no
control points. Their equations are first degree polynomials.
The terminal points for the left segment are A1(0.73, 0.60) and B1(0.73, 0.18). Using the
general form of the equations fx(t) = (1 t) ax + tbx and gy(t) = (1 t) ay + tby and substituting:
fx(t) = (1 t) (0.73) + t(0.73)
gy(t) = (1 t) (0.60)+ t(0.18)
to arrive at:
fx(t) = (0.73) (1 t) + (0.73)t
gy(t) = (0.60) (1 t) + (0.18)t

33

On the TI-83+ calculator, the screens produced are:

For the bottom section curve, the two terminal points are A2(0.73, 0.18) and D2(1.12,
0.22); the two control points are B2(0.78, 0.00) and C2(0.99, -0.02). Substituting the values of
these points we have:
fx(t) = (1-t)3 (0.73) + 3t(1-t)2(0.78) + 3t2(1-t)(0.99) + t3(1.12)
gy(t) = (1-t)3 (0.18) + 3t(1-t)2(0.00) + 3t2(1-t)(-0.02) + t3(0.22)
that simply to:
fx(t) = 0.73(1-t)3 + 2.34t(1-t)2 + 2.97t2(1-t) + 1.12t3
gy(t) = 0.18(1-t)3 + 0.00t(1-t)2 0.06t2(1-t) + 0.22t3

The TI-83+ calculator screens are:

And lastly, the terminal points for the right vertical segment are A3(1.11, 0.60) and B3(1.11, 0.02).
Substitution yields:
34

fx(t) = (1 t) (1.11) + t(1.11)

gy(t) = (1 t) (0.60)+ t(0.02)
to arrive at:
fx(t) = (1.11) (1 t) + (1.11)t
gy(t) = (0.60) (1 t) + (0.02)t

And on the TI-83+ calculator, the letter is produced as below.

u
The following pages are the letters i, s, and u calculated and plotted in an Excel
spreadsheet. The calculations are made with the same equations as were used above in the TI 83+
calculator. The first curve, the i is represented by the points A1 and B1, The three curves of the s
are represented by the points A2 D4, and the u by points A5 B7. The grid lines are hidden on the
chart.

35

36

This exercise combines the use of the Geometers Sketchpad program with the Cartesian
coordinate grid, calculations to produce the parametric equations, and how those equations are
displayed on the TI-83+ calculator and an Excel spreadsheet.

37

Bzier Curves the Basics for Students

A basic Bzier curve is formed with two terminal points and a control point. The two terminal
points are where the curve begins and ends, when t = 0 and t = 1, and are always tangent to the curve.
While the control point is never part of the curve, it does influence the shape of the curve. In the article
Bzier Curves: A Classroom Investigation by Ed Staples and published in the Australian Senior
Mathematics Journal, July 2005, the author introduced a very useful image of a basic Bzier curve.
Mr. Staples says to imagine that there is a square room placed in the first quadrant of a Cartesian
coordinate system.

B(0,1)

C(1,1)

A(0,0)

Suppose there is a dog at A and a dog at B. The dog at point B sees something at point C.
He/she becomes interested in it and takes off toward C. As dog B moves, dog A chases it, always
adjusting his path to be aiming toward dog B. Dog As path is the Bzier curve. Points A and C are the
terminal points; where dog A is at the beginning of the scene and where dogs A and B are at the end of
the scene. (The analogy is stretched here, in supposing that both dogs arrive at the bone at the same
time.) Point B is the control point. In a Bzier curve, the terminal points each lie on the line tangent
with the control point. In the dog example, these lines are represented by the lines of sight of the dogs
before they take action (i.e. dog B is looking at the food or bone or cat in corner C and dog A is
looking at dog B).
38

This is a very useful image to have in mind while playing with applets and construction board
examples. When manipulating any of the three points, (dogs or bone), changes are produced in the
orientation of the two terminal points, in the tangent lines and the curve that is produced.

B(0,1)

C(1,1)

A(0,0)

The one control point with two terminal points curve is the most basic Bzier curve and produces a
quadratic equation:
P(t) = [ (1-t)A + (t )B] (1-t) + [ (1-t)B + tC] t

with 0 t 1

Using this equation before the dogs start moving, at t = 0, we find that
P(0) = [ (1-0) A + (0) B] (1-0) + [ (1-0) B + (0) C] 0
= A or (0,0)
which is where the curve begins.
Using the equation at the end of movement, at t = 1, we find that
P(1) = [ (1-1) A + (1) B] (1-1) + [ (1-1) B + (1) C] 1
= C or (1,1)
which is where the curve ends.

Choosing a few points in between, we find that at t = (1/2)

39

P(1/2) = [ (1-1/2) A + (1/2) B] (1-1/2) + [ (1-1/2) B + (1/2) C]

= (A + 2B + C) / 4
By substituting the x and y coordinates of points A (0,0), B (0,1) and C (1,1)
we find that:

x = (0 + 2(0) + 1) /4 =

and y = (0 + 2(1) + 1) / 4 =

which is on the curve.

Similarly, when t = , we obtain the equation:

P(t) = (A + 6B + 9C)/16

and our point is (9/16 , 15/16) which is also on the curve.

Let us go back to the equation:

P(t) = [ (1-t) A + (t) B] (1-t) + [ (1-t) B + tC] t

with 0 t 1

By distributing through the square brackets and simplifying, we arrive at the equation:
P(t) = (1-t)2 A + 2t(1-t) B + t2C
This is a parametric equation as it includes the variable t , but it also involves the x and y variables for
each of the two terminal points (points A and C in this example) and the control point(s) (point B in
this example). In order to make the calculations a bit more manageable, Mr. Staples (2005) suggests a
separate equation for the x-variable and another for the y-variable. In doing so, we arrive at the pair of
equations:
Px(t) = (1-t)2 x1 + 2 t(1-t) x2 + t2 x3
Py(t) = (1-t)2 y1 + 2 t(1-t)y2 + t2 y3
with point A having the coordinates (x1, y1), point B having the coordinates (x2, y2), and point C having
the coordinates (x3, y3).
By adding another control point so that we have two terminal points and two control points, we
add another degree to the polynomial and arrive at a cubic equation. The equations for a cubic Bzier
curve, i.e. a curve with two terminal points and two control points is:
P(t) = (1-t)3 A + 3t(1-t)2B + 3t2(1-t) C + t3D

with 0 t 1
40

or Px(t) = (1-t)3 x1 + 3t(1-t)2 x2 + 3t2(1-t) x3 + t3 x4

and Py(t) = (1-t)3 y1 + 3t(1-t)2 y2 + 3t2(1-t) y3 + t3 y4
With point A having the coordinates (x1, y1), point B having the coordinates (x2, y2), point C having the
coordinates (x3, y3), and point D having the coordinates (x4, y4).

Graphing Bzier curves on the TI-83+ calculator

1. Write the general equation for calculating the x-value of a Bzier curve with two terminal points and
one control point.
(answer)

Px(t) = (1-t)2 x1 + 2 t(1-t) x2 + t2 x3

2. Write the general equation for calculating the y-value of a Bzier curve with two terminal points and
one control point.
(answer)

Py(t) = (1-t)2 y1 + 2 t(1-t)y2 + t2 y3

3. Use the points (1, 2) and (5, 1) as the two terminal points. Choose the point (3, 4) as the control
point. Identify the following values:
x1
(answers) 1
x2

x3

y1

y2

y3

4. Use these values and equations to calculate the equations for this curve.
(answer)

Px(t) = (1-t)2 (1) + 2 t(1-t) (3) + t2 (5) = (1-t)2 + 6 t(1-t) + 5t2

(answer)

Py(t) = (1-t)2 (2) + 2 t(1-t) (4) + t2 (1) = 2(1-t)2 + 8 t(1-t) + t2

5. On the TI-83+ calculator, go to the Mode screen and choose Par on the third line.

41

6. Go to Y= and enter the equations at the X1T= and Y1T=.

7. Go to the Window screen and set the Tmin = 0, Tmax = 1, Tstep = 0.1.

8. Press the Graph button to display your graph. If the graph does not display to your liking, you
may need to go to the Window screen and adjust the Xmin, Xmax, Ymin and Ymax values.
(Remember that the smallest value for t is 0 and the largest value for t is 1, and you can get an idea for
what the size of the these values need to be.)

8. Now, choose your own points and repeat the process with a cubic Bzier curve with two terminal
points and two control points.

42

Looking at Bezier Curves with an Excel spreadsheet classroom exercise

Use the formula for a quadratic Bezier curve: P(t) = [A(1-t) Bt](1-t) + [B(1-t) + Ct]t.
Describe the steps required to arrive at the formula below.
(answer) distributing what is outside the [ ] ; P(t) = A(1-t)2 + Bt(1-t) + Bt(1-t) + Ct2
combine like terms to arrive at the formula

P(t) = A(1-t)2 + 2Bt(1-t) + C2

If we call the coordinates of point A as (x1, y1) , point B as (x2, y2), and point C as (x3, y3), how would
you define the following?
Px(t) =

(answer) x1(1-t)2 + 2 x2t(1-t) + x3t2

Py(t) =

(answer) y1(1-t)2 + 2 y2t(1-t) + y3t2

Fill in the chart below with coordinates for points A, B, and C at (0, 0), (0, 1) and (1, 1) respectively.
Use the equations from above and the values of t to calculate the values for the two columns on the
right.
(answers in blue)
t
Points
A
B
C

coordinate
x1
x2
x3

coordinate
y1
y2
y3

value x
0
0
1

value y
0
1
1

0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1

Px(t)

Py(t)

0
0.01
0.04
0.09
0.16
0.25
0.36
0.49
0.64
0.81
1

0
0.19
0.36
0.51
0.64
0.75
0.84
0.91
0.96
0.99
0.1

43

Chart the values from the two right columns below. Use the appropriate corners for points (0,0), (0,1)
and (1,1). Connect the points with a smooth curve.
(answers in blue)

Now, lets turn to an excel spreadsheet to set up the calculations and see how what affect changing our
points have on the curve.
First, ignoring the small column on the left, write capital letters starting with A over the below.
Then, ignoring the first row, write numbers down the left. You will use these letters and numbers to
identify the cells in the graph. For example, the cell with the word Points is A1 and the cell with the
value 0.6 under t is F8.
(answers in blue)
1
2
3
4
5
6
7
8
9
10
11
12

A
Points
A
B
C

B
coordinate
x1
x2
x3

C
coordinate
y1
y2
y3

D
value x

E
value y

F
t

G
Px(t)

H
Py(t)

0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1

44

In the excel spreadsheet program, type in the words, letters and values as they are given in the previous
graphs. Also add the x and y values for the points A, B, and C. Do not write in the calculated values
under Px(t) and Py(t).
In cell G2, type in the following exactly: =$D$2*(1-F2)^2+2*$D$3*F2*(1-F2)+$D$4*(F2)^2
In cell H2, type in the following exactly: =$E$2*(1-F2)^2+2*$E$3*F2*(1-F2)+$E$4*(F2)^2
(These are the two formulas that you derived earlier and their translation to excel coding and reference
to cells with the corresponding values.)
Now, select cell G2 again. There should be a bold-lined box around the cell. In the lower right of that
box, there is a tab. Click and drag that tab down the column until it includes the G12. Values should
appear that match what you calculated by hand on the first page. Do the same for the second formula in
cell H2. The second set of values should match your values as well.
(answers in blue)
value x

value y

Px(t)

Points

coordinate

coordinate

x1

y1

x2

y2

0.1

x3

y3

0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1

0
0.01
0.04
0.09
0.16
0.25
0.36
0.49
0.64
0.81
1

Py(t)

0
0.19
0.36
0.51
0.64
0.75
0.84
0.91
0.96
0.99
1

Save as Bezier 1.
Now, its time to get a chart.
Select cells G2 H12 (dont use the bold tab this time just highlight these cells). Then click on the
chart wizard button from the toolbar
. In the window that appears, choose XY (Scatter) from the
left and Scatter with data points connected by smooth lines from the right. Click Finish.
A chart will appear that may or not be in the shape of a square. Manipulate the chart until it more or
less matches what you graphed by hand.
Save again.
Congratulations! You have created a basic Bezier curve!

45

(answers in blue)
value x

value y

Px(t)

Points

coordinate

coordinate

x1

y1

x2

y2

0.1

x3

y3

0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1

0
0.01
0.04
0.09
0.16
0.25
0.36
0.49
0.64
0.81
1

Py(t)

0
0.19
0.36
0.51
0.64
0.75
0.84
0.91
0.96
0.99
1

46

Challenge Problems
1. Determine the equations that are needed to create the letters of your initials. Graph them on the
graphing calculator.

2. Find a satellite image of a curvy mountain road. Determine the equation(s) of a curve(s) that will fit
that image and graph on the calculator or in Excel.

3. Find a satellite image of the edge of a lake. Create curves to match the shoreline on the calculator or
Excel.

4. Create the curves of your own roller coaster and the equations that match them.

47

Bibliography

Core-Plus Mathematics Project. Contemporary Mathematics in Context Course 4 Part B. GlencoeMcGraw-Hill. Columbus, Ohio. 2003.
Groleau, Timothe. Approximating Cubic Bzier Curves in Flash MX. Websource:
http://www.timotheegroleau.com/Flash/articles/cubic_bezier_in_flash.htm . 2002.
Hoggar, S.G. Mathematics of Digital Images. Cambridge University Press, Cambridge. 2006.
Kirsanov, Dmitry. Nonlinear Design. Websource: http://www.webreference.com/dlab/9902/ . 1999.
Purcell, Edwin J., Varberg, Dale. Calculus with Analytic Geometry Fourth Edition. Prentice-Hall Inc.,
Englewood Cliffs, New Jersey. 1984
Staples, Ed. Bezier curves: A classroom investigation. Australian Senior Mathematics Journal. July
2005.
Welchons, A.M., Krickenberger, W.R., Pearson, Helen R. Algebra Book Two. Ginn and Company.
1957.
Additional websources:
http://en.wikipedia.org/wiki/B%C3%A9zier_splines
http://msdn.microsoft.com/en-us/library/ms536354.aspx
http://web.cs.wpi.edu/~matt/courses/cs563/talks/curves.html

48