Bézier Curves

Kristine Harwood

Iowa State University

MSM Creative Component

Spring 2009

Heather Bolles, Major Professor

Irvin Hentzel, Major Professor

Larry Ebbers, Committee Member

Where Bézier Curves originated and where they are used page 3

Bézier Curves – Parametric Equations page 5

Bézier Curves on Geometer’s Sketch Pad page 15

Connecting the graph to Algebra page 23

Looking at Bézier Curves with an Excel spreadsheet page 25

Bézier Curves and Fonts page 29

Bézier Curves – the Basics for Students page 37

Classroom exercises page 41

Graphing Calculator
Excel Spreadsheet
Challenge Problems

Bibliography page 48

2
 Where Bézier curves originated and where they are used

Pierre Bézier (1910-1999) was a French engineer who worked for many years at the Renault

automobile company. In the 1960’s and 1970’s he developed a method of producing computer-driven

curves to be used in the design of automobiles which came to be known as Bézier curves (Staples,

2005). Bézier 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 non-

mathematician. 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 Bézier 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 Bézier 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 Bézier 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 Bézier curves (Kirsanov, 1999). The author acknowledges the

usefulness and versatility of Bézier 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

3
more complicated B-splines. B-splines are formed in a manner similar to connecting a number of

Bézier curves together at their endpoints. Both are used to create and analyze curves in computer

imagery.

An internet search today finds the term “Bézier 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. Bézier 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 Bézier

curves is that the character’s size is easily scalable. Since Bézier 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 Bézier 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 Bézier 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.

4
 Bézier Curves – Parametric Equations

The equations for Bézier 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 x-

value 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 + t·bx

Similarly, the y-value can be calculated as: A(ax,ay) B (bx,by)

y = g(t) = (1 – t) ay + t·by

If the two endpoints of the segment are B and C, the parametric equations are:

x = f(t) = (1 – t) bx + t·cx
B (bx,by) C (cx,cy)
y = g(t) = (1 – t) by + t·cy

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

A P1 B

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

B Q1 C

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

B C
Q1
P1

B Q1 C

P1

B C
Q1

6
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

B Q1 C

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.

A

A P1

P2

B Q1 C

P1
P2

B Q1 C

7
The curve traced by this inner third moving point (P2) is the Bézier 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 + t·bx and the ending x-value of segment AC, ie. (1 – t) bx + t·cx, 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 + t·bx, we arrive at

fx(t) = (1 – t) [ (1 – t) ax + t·bx] + (t) [ (1 – t) bx + t·cx]

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 + t2·cy

This is a quadratic equation and is the equation for a Bézier 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 Bézier 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 Bézier 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 Bézier

curves. In the far right column, the control points are those appearing outside the curve.

9
 # of
terminal parametric equations degree
mov-
points; x = f(t) of
ing shape created
control y = g(t) equat-
“t”
points 0≤t≤1 ion
parts
x = fx(t) = (1 – t) ax + t·bx
2; 0 1 1 line segment
y = gy(t) = (1 – t) ay + t·by

curve

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

2; 1 2 3
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 3 6
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 4 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

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

F

2; 5 5 15

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

10
 When looking at a Bézier 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 dog’s

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 Bézier

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)

A (ax, ay) C (cx, cy)

y by  a y y c y  by
The slope of AB is = and the slope of BC is = .
x bx  a x x 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

dy dy / dt
The differentiation of a parametric equation is achieved by  .
dx dx / dt

dy
Since = -2ay + 2ayt + 2by - 4byt + 2 cyt
dt

dx
and = -2ax + 2axt + 2bx - 4bxt + 2 cxt
dt

dy dy / dt  2 a y  2 a y t  2b y  4b y t  2 c y t
 =
dx dx / dt  2 a x  2 a x t  2bx  4bx t  2 c x t

dy  2 a y  2b y  a y  by by  a y
When t = 0, that is, at the first terminal point A (ax , ay), = = =
dx  2 a x  2bx  a x  bx bx  a y

which is the slope of AB .

12
 dy  2b y  2c y
When t = 1 and when the curve is at the second terminal point C (cx , cy), = =
dx  2b x  2 c x

 by  c y c y  by
= which is the slope of BC .
 bx  c x c x  bx

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 Bézier curve is illustrated first by the graph:
10

C (6, 8)
8

B (3, 5)

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
 dy 9  30t 2
Taking the derivative, we arrive at = .
dx 6  6t

dy 9 3 dy 9  30  21 7
When t = 0, =  and when t = 1, =  
dx 6 2 dx 66 12 4

52 3 8 1 7
The slope of AB =  and the slope of CD =  .
3 1 2 6  10 4

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

points.

14
 Bézier curves on Geometer’s Sketch Pad*
To approach the constructions of a Bézier curve on Geometer’s 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 Bézier 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 Bézier curves on Geometer’s 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 Bézier 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 Bézier 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 curve’s 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 Bézier curve. By removing the assignment of points on the coordinate

system, and by following the same construction steps, a much more dynamic Bézier curve is produced.

20
 To make a cubic Bézier 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 Bézier curves created in Geometer’s Sketch Pad are shown below.

22
 Connecting the graph to Algebra
Below is an example of how to I used Geometer’s Sketch Pad to find the equation of a Bézier

curve and translate it to a graphing calculator.

1. I used the Geometer’s Sketch Pad program to construct a Bézier 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 Bézier 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 Geometer’s Sketch Pad, it is gratifyingly similar.

24
 Looking at Bézier 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 Bézier 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 y-

variables 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 Bézier 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 Bézier 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 Bézier 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
 Bézier Curves and Fonts

A principal user of Bézier 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 Geometer’s Sketch Pad.

4. Copy and paste an appropriate Bézier 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 Geometer’s Sketchpad program, and used three

Bézier 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 Geometer’s 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(1-

t)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 Geometer’s 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
 Bézier Curves – the Basics for Students

A basic Bézier 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

“Bézier 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 Bézier 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 A’s path is the Bézier 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 Bézier 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 Bézier 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 Bézier

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 Bézier curves on the TI-83+ calculator

1. Write the general equation for calculating the x-value of a Bézier 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 Bézier 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 3
x3 5
y1 2
y2 4
y3 1

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 Bézier 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 Px(t) Py(t)
Points coordinate coordinate value x value y
A x1 y1 0 0 0 0 0
B x2 y2 0 1 0.1 0.01 0.19
C x3 y3 1 1 0.2 0.04 0.36
0.3 0.09 0.51
0.4 0.16 0.64
0.5 0.25 0.75
0.6 0.36 0.84
0.7 0.49 0.91
0.8 0.64 0.96
0.9 0.81 0.99
1 1 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, let’s 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)
A B C D E F G H
1 Points coordinate coordinate value x value y t Px(t) Py(t)
2 A x1 y1 0
3 B x2 y2 0.1
4 C x3 y3 0.2
5 0.3
6 0.4
7 0.5
8 0.6
9 0.7
10 0.8
11 0.9
12 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)
Points coordinate coordinate value x value y t Px(t) Py(t)
A x1 y1 0 0 0 0 0
B x2 y2 0 1 0.1 0.01 0.19
C x3 y3 1 1 0.2 0.04 0.36
0.3 0.09 0.51
0.4 0.16 0.64
0.5 0.25 0.75
0.6 0.36 0.84
0.7 0.49 0.91
0.8 0.64 0.96
0.9 0.81 0.99
1 1 1

Save as Bezier 1.

Now, it’s time to get a chart.

Select cells G2 – H12 (don’t 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)
Points coordinate coordinate value x value y t Px(t) Py(t)
A x1 y1 0 0 0 0 0
B x2 y2 0 1 0.1 0.01 0.19
C x3 y3 1 1 0.2 0.04 0.36
0.3 0.09 0.51
0.4 0.16 0.64
0.5 0.25 0.75
0.6 0.36 0.84
0.7 0.49 0.91
0.8 0.64 0.96
0.9 0.81 0.99
1 1 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. Glencoe-

McGraw-Hill. Columbus, Ohio. 2003.

Groleau, Timothée. Approximating Cubic Bézier 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