Bezier Curves

Introduction
• |Representing Curves
– Curves are just lots of small straight lines joined up

• Interpolation
• Parametric equations
• Types of curve
– Consider two: Splines and Bezier Curves
• Derivation
• Implementation
Computers can’t draw curves

The more points/line

segments that are used, the
smoother the curve.
 Curve representation
• The basic problem we are facing is to represent a
curve easily and efficiently. We could take several
easy “brute force and ignorance” approaches:
• storing a curve as many small straight line segments
– doesn’t work well when scaled
– inconvenient to have to specify so many points
– need lots of points to make the curve look smooth
• working out the equation that represents the curve
– difficult for complex curves
– moving an individual point requires re-calculation of the entire
curve
 Solution - Interpolation
•Define a small number of
points
•Use a technique called
“interpolation” to invent the
extra points for us.

•Join the points with a series of

(short) straight lines
 Parametric Equations - linear
P1 x1,y1
Imagine walking from P0 to
(13,8)
P1 at a constant speed. Let us
(7.5,4)
dy
say that we start walking at
P0 P0 at time t=0 and we arrive
x0 ,y0
dx
a P1 at time t=1. Where are
(2,3)
you at a general time t?

dx = x1 - x0
We now have the equation(s) of a
straight line written as a function of some dy = y1 - y0
parameter t.
x(t) = x0 + t.dx
y(t) = y0 + t.dy
 Let us just confirm that

• Question Where are you at t=0.5?

• dx = 13 - 2 = 11
• dy = 8 - 3 = 5
• x(0.5) = 2 + (0.5 . 11) = 7.5
• y(0.5) = 3 + (0.5 .5) = 5.5

• Answer: You’ll be halfway there.

 Why do we use parametric
equations?
• Equation of a straight line (y=mx+c) where y is
expressed in terms of x.
• What happens when you draw a vertical line?
• Try working out the gradient - (m). It is, of course,
infinity which is hard to handle on a computer. By
using parametric representation, we can avoid
such problems.
 Enough techniques…
• Time for the interpolation techniques:
• Splines
• Bezier Curves
 Splines
• Define the knots
– (x0,y0) - (x3,y3)
• Calculate all other points

spline

knots
 Polynomial parametric eqns
• To represent a straight
line - linear parametric
equation (i.e. one where
the highest power of t
was 1).
• For curves, we need
polynomial equations.
Why? Because the
graphs of polynomial
equations wiggle!
 Cubic parametic eqns
• The general form of a cubic parametric
equation (in t) is:
• xt = a0 + a1t + a2t2 + a3t3
• similarly for y

• yt = b0 + b1t + b2t2 + b3t3

• Think about those (just consider the x eq n):
• xt = a0 + a1t + a2t2 + a3t3

• We want xt
• We control t
• We therefore need values for a0, a1, a2 & a3
– Likewise for b0 etc.
 Obtaining a0, a1, a2 & a3
• How do we make it
wiggle where we Ni Ni+1
want?
Si Si+1
Ni-1
• Consider two
contiguous
segments: Si and Si+1
 Eqn 36 (from CGvJ – Ch. 9)
• Each segment is represented by a separate cubic
parametric eqns (only x shown):
• In Si

• In Si+1
xt  a0  a1t  a2 t  a3t
2 3

xt  a0  a1t  a2t  a3t

2 3

– Consider what happens at Ni

 (There are) three things (you should know about the wise
woman, my lord …..)

• The segments meet…

– The last x and y values in Si are equal to the first x and
y values in Si+1
• …the join is continuous…
– The gradient at the end of Si is equal to the gradient at
the start of Si+1
• ….and smooth
– The gradient of the gradient at the end of Si is equal to
the gradient of the gradient at the start of Si+1
 1. The lines meet
Thus:
– At Ni in segment Si: t=1
– At Ni in segment Si+1: t=0
so

a0  a1  a2  a3  a0

 2. The joint is continuous
• First differentiate eqn 36 w.r.t. t (giving eqn
39)
 dx 
   a1  2a2t  3a3t
2

 dt 
 dx    
  1  a  2 a 2 t  3a3 t 2

 dt 
 2. The joint is continuous
• Again consider what happens at Ni
– At Ni in segment Si: t=1
– At Ni in segment Si+1: t=0

 dx 
a1  2a2  3a3     a1
 dt  Ni
 3. The joint is smooth
• Differentiate (eqn 39) w.r.t. t
2
d x
2
 2 a 2  6 a3t
dt
2
d x
2
 2 a 
2  6 a3
 t
dt
 3. The joint is smooth
• Again consider what happens at Ni
– At Ni in segment Si: t=1
– At Ni in segment Si+1: t=0
2
d x
2
 2 a 
2  6 a3
  2 a 2
dt
 Final boundary condition
• Currently have 3 eqns in 4 unknowns
• Need one more boundary condition:
• From endpoints of whole line
– Fixed gradient
• give a value for end(s) of curve
– Free end
• 2nd derivative is 0
– Contour
• Ends of line meet (loop) – gradient at 1st point = gradient at
last point
 Solve set of simultaneous eqns
• To find the values of a0…a3 for each segment
• Gaussian elimination

x= 2(0.5-t)(1-t)xNi-1 + 4t(1-t)xNi + 2t(t-0.5)xNi+1

– Similarly for y
 What have we achieved?
• If we know three points on a curve we can calculate any
others
• Consider a curve 3 points at a time (red ones)
• Interpolate to generate sufficient intermediate points (white)
• Join with short straight lines
 Bezier Curves
• An alternative to splines

• M. Bezier was a French mathematician who worked

for the Renault motor car company.
• He invented his curves to allow his firm’s
computers to describe the shape of car bodies.
 Bezier Curves - properties
• Not all of the control points are on the line
– Some just attract it towards themselves
• Points have “influence” over the course of
the line
• “Influence” (attraction) is calculated from a
polynomial expression
• (show demo applet)
 Bezier Curves
• At t=0 N0 is the major
(100%) influence on the
line and the others have N2
N1
no effect.

• At t=1, N0 has no effect

on the line, but N3
N3
attracts it completely.
N0
 Bezier Curves
– polynomials are used
to create the curve
N2
N1
– the influence that each
point exerts upon the
curve at point t is given
by a polynomial N3

equation (the Bezier N0

polynomial).
– A 4-point curve will
have 3 segments (n=3)
Bezier Polynomials for n=3
B0 3 B 13
influence influence

t=0 t=1 t=0 t=1

B33
B2 3
influence
influence

t=0 t=1 t=0 t=1

Bezier Polynomial Function

n! n i
Bin (t )  .t .(1  t )
i

i!(n  i )!
Parametric equations for x(t),y(t)
n
x(t )   xi .Bin (t )
i 0

n
y (t )   yi .Bin (t )
i 0
 Implementing Bezier Splines
• Class Bezier2d
• Vector of points
• Mechanism for adding points
• (At least) 2 ways of drawing them
– Direct calculation method
• Draw method which calculates x(t),y(t)
– Recursive method
 Direct calculation
• Use for loop
– For t=0 ; t<=1; t += 0.1{…..
public void draw(Graphics g){
float xsrc=((Point2d)points.get(0)).x();
float ysrc=((Point2d)points.get(0)).y();
for (float t=0; t<=1.1 ; t+= interval){
float xdest=0;
float ydest=0;
for (int i=0; i<numberOfPoints; i++){
float bint = bezier(i,numberOfPoints-1,t);
xdest += ((Point2d)points.get(i)).x() * bint;
ydest += ((Point2d)points.get(i)).y() * bint;
} //for i
g.drawLine((int)xsrc, (int)ysrc, (int)xdest, (int)ydest);
xsrc=xdest;
ysrc=ydest;
}//for t
}//end draw
 Recursive method
Start with straight lines
joining points B
f

draw ever closer h

C

approximations to a e
j i

true Bezier curve g

A
D
Recursive algorithm
 Other curves
• Beta Splines – local influence, smooth joins
• NURBS – Non-uniform, rational Beta-
Splines
 Summary
• Curves are just lots of little straight lines joined
together
• Parametric representation

• Splines

• Bezier Curves
– Direct calculation

– Recursive method
 Next time….
• 3D Graphics
– Adding visual realism