MAE 152

Computer Graphics for Scientists

and Engineers
Splines and Bezier Curves

Introduction
|RepresentingCurves
Anumberofsmalllinesegmentsjoined

Interpolation
Parametricequations
Typesofcurvewestudy
NaturalCubicSplinesandBezierCurves
Derivation
Implementation

Computers cant draw curves.

The more points/line

segments that are used,
the
smoother
the
curve.

Why have curves ?

Representation of irregular surfaces
Example: Auto industry (car body design)

Artists representation
Clay / wood models
Digitizing
Surface modeling (body in white)
Scaling and smoothening
Tool and die Manufacturing

Curve representation
Problem: How to represent a curve easily
and efficiently
Brute force and ignorance approaches:
storing a curve as many small straight line
segments
doesnt 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

The need for smoothness

So far, mostly polygons

Can approximate any geometry, but

Only approximate
Need lots of polygons to hide discontinuities

Math problems

Storage problems
Normal direction
Texture coordinates

Not very convenient as modeling tool

Gets even worse in animation

Almost always need smooth motion

Geometric modeling
Representing world geometry in the computer
Discrete vs. continuous again

At least some part has to be done by a human

Will see some automatic methods soon

Reality: humans are discrete in their actions

Specify a few points, have computer create
something which makes sense
Examples: goes through points, goes near points

Requirements

Want mathematical smoothness

Local control

Local data changes have local effect

Continuous with respect to the data

Some number of continuous derivatives of P

No wiggling if data changes slightly

Low computational effort

A solution
Use SEVERAL polynomials
Complete curve consists of several pieces
All pieces are of low order
Third order is the most common

Pieces join smoothly

This is the idea of spline curves
or just splines

Parametric Equations - linear

P1

x1,y1
(13,8)

(7.5,4)
P0
x0 ,y0
(2,3)

dx

dy

Walk from P0 to P1 at a
constant speed.
Start from P0 at t=0
Arrive at P1 at t=1
dx = x1 - x0
dy = y1 - y0
Where are you at a general
time t?

Equation(s) of a straight
line as a function of an x(t) = x0 + t.dx
arbitrary parameter t.
y(t) = y0 + t.dy

Why use parametric equations?

One, two, three or
representation is possible

n-dimensional

Can handle infinite slope of tangents

Can represent multi-valued functions

For this class

Natural Cubic Spline
Bezier Curves

Splines
Define the knots
(x0,y0) - (x3,y3)

Calculate all other points

spline
knots

Continuity
Parametric continuity Cx
Only P is continuous: C0
Positional continuity

P and first derivative dP/du are continuous: C1

Tangential continuity

P + first + second: C2
Curvature continuity

Geometric continuity Gx
Only directions have to match

Order of continuity
G (0)

C (0)

0 th order continuity

(a)

G (1)

C (1)

1st order continuity

(b)

( 2)

C
(c)

( 2)

2nd order continuity

Wiggling effect
Example:
Four data points
Third degree polynomial
Might look something like:

This the ONLY third degree polynomial

which fits the data
Wiggling gets much worse with higher
degree

Polynomial parametric equations

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!

Natural Cubic Spline

spline, n. 1 A long narrow and
relatively thin piece or strip of wood,
metal, etc. 2 A flexible strip of wood
or rubber used by draftsmen in
laying out broad sweeping curves, as
in railroad work.
A natural spline defines the curve
that minimizes the potential energy
of an idealized elastic strip.

 A natural cubic spline defines a curve,

in which the points P(u) that define
each segment of the spline are
represented as a cubic P(u) = a0 + a1u +
a2u2 + a3u3
Where u is between 0 and 1 and a0, a1,
a2 and a3 are (as yet) undetermined parameters.
We assume that the positions of n+1 control
points Pk, where k = 0, 1,, n are given, and
the 1st and 2nd derivatives of P(u) are continuous
at each interior control point.

Why cubic?
Undesirable wiggles and oscillations for higher
orders

The lowest order polynomials to satisfy the

following conditions

Caution! Heavy math ahead!

Parameterization
Q (u )

umin

u0
un

u1

u n 1

umax
u2

A parametrically defined curve

x(u )
Q(u ) y (u )
z (u )

umin u0 u1 un 1 un umax
(u0 , u1 , , un 1 , u n )
knot sequence
knot vector
If ui i, then uniform knot sequence

Re-parameterization

Ym (u )

Y (u )

Y1 (u )

Y0 (u )

u0

Y2 (u )

u1

u2

u3

ui ui 1
i i 1

Y (u ), ui u ui1
Yi (u ) Y (
0 u 1

non-uniform

u ui
), i 0,1, 2,, n
ui1 ui

um

Interpolation versus Approximation

V6

V0

V5

V1

Interpolation

V3
V4

V2

Approximation

V4

V3

V0
V6
V1

V2

V5

Hermite Interpolation
Y5 (u )

y0

Y (u ) y
3

Y0 (u )

y1

y6

y4

y2

u 0

y5

u 6

Yi (u ) ai bi u ci u 2 d i u 3
0 u 1 i 0,...,5

bi Di

Yi (1) (0) bi Di

ci 3( yi 1 yi ) 2 Di Di 1

Yi (0) ai yi

Yi (1) ai bi ci d i yi 1
Y (1) (1) b 2c 3d D
i
i
i
i 1
i

ai yi

d i 2( yi yi 1 ) Di Di 1

Hermite Spline
Say the user provides x0 , x1 , x0 , x1
A cubic spline has degree 3, and is of the form:
x at 3 bt 2 ct d
For some constants a, b, c and d derived from the control
points, but how?

We have constraints:

The curve must pass through x0 when t=0

The derivative must be x0 when t=0
The curve must pass through x1 when t=1
The derivative must be x1 when t=1

How to specify slope Di

(1)

Pi 1

yi 1
Pi 1

Pi

yi 1

yi

Computing Di automatically
e.g. fitting a parabola through yi-1 , yi , and yi 1
(2) (y i yi 1 ) (1 )( yi 1 yi )
weig hted avrage 0 1
(3) specifying directly

Hermite Spline
A Hermite spline is a curve for which the user provides:
The endpoints of the curve
The parametric derivatives of the curve at the endpoints
The parametric derivatives are dx/dt, dy/dt, dz/dt
That is enough to define a cubic Hermite spline, more
derivatives are required for higher order curves

Hermite Spline
Solving for the unknowns gives:
a 2 x1 2 x0 x1 x0
b 3x1 3x0 x1 2 x0
c x0
d x0

Rearranging gives:
x x1 ( 2t 3 3t 2 )
x0 ( 2t 3 3t 2 1)
x1 (t 3 t 2 )
x0 (t 3 2t 2 t )

or
x x1

x0

x1

2 3 0
2 3 0
x0
1 1 0

1 2 1

0 t 3

1 t 2

0 t

0 1

Hermite curves in 2D and 3D

We have defined only 1D splines:
x = f(t:x0,x1,x0,x1)
For higher dimensions, define the control
points in higher dimensions (that is, as
vectors)
3
x x1
y y
1
z z1

x0
y0
z0

x1
y1
z1

x0
y0
z0

2 3 0
2 3 0

1 1 0

1 2 1

0
1
0

t
2
t
t

1

Basis Functions
A point on a Hermite curve is obtained by
multiplying each control point by some function
and summing
The functions are called basis functions
1.2

0.8

0.6

0.4

0.2

-0.2

-0.4

x1
x0
x'1
x'0

Hermite and Cubic Spline Interpolation

V6

V0

V5

V1

V3
V4

V2

An interpolating cubic spline

Qi (u ) ( xi (u ), yi (u ))
Vi ( xi , y i )

Spline Interpolation
C ( 2) continuity at joints (knots)
y0

y1 Y (u )
1
y2

Yi 1 (1) yi
Yi (0) yi
Yi (11) (1) Yi (1) (0)

Ym 1 (1) ym

yi

ym

yi 1

4m 4

Yi ( 21) (1) Yi ( 2 ) (0)

Y0 (0) y0

Y (u )

Y0 (u )

Ym1 (u )

1 i m 1
2

need two more Eqs to determine all coefficients

note : Yi (u ) ai bi u ci u 2 d i u 3 0 i m 1
Y0( 2 ) (0) 0
Ym( 21) (1) 0

Natural Spline

Deriving Natural Cubic Splines

(4) 2ci 1 6d i 1 2ci

yi ai bi t ci t 2 d i t 3
(1) Yi 1 (1) yi

ai yi

(2) Yi (0) yi
(3) Yi (11) (1) Yi (1) (0)

bi Di

1 i m 1

ci 3( yi 1 yi ) 2 Di Di 1
d i 2( yi yi 1 ) Di Di 1

(4) Yi ( 21) (1) Yi ( 2) (0)

(5) Y0 (0) y0

By substitution and simplification,

Di 1 4 Di Di 1 3( yi 1 yi 1 )

(6) Ym 1 (1) ym
(7) Y0( 2) (0) 0
(8) Ym( 21) (1) 0

Applying end - conditions

From (7),
2c0 0
By substitution and simplification,
2 D0 D1 3( y1 y0 )
Similarly, from (8)
Dm 1 2 Dm 3( ym ym 1 )

1 i m 1

Tri-Diagonal Matrix for Natural Cubic Spline

2 1
1 4 1

1 4 1

1 4 1

. .

D0 3( y1 y0 )
D 3( y y )
2
0

. .

1 4 1 3( ym ym 2 )
1 2 Dm 3( ym ym 1 )

Closed Curves
Pi

P2

P0
P1

Pm

Di 1 4 Di Di 1 3( yi 1 yi 1 )
1 D0 3( y1 ym )
D 3( y y )
2
0

1 4 1

1
4
1

. . . .

1 4 1 3( ym ym 2 )

1
1 4 Dm 3( y0 ym 1 )

4 1
1 4 1

Homework

Bezier Curves
Analternativetosplines
M.BezierwasaFrenchmathematicianwhoworked
fortheRenaultmotorcarcompany.
He invented his curves to allow his firms
computerstodescribetheshapeofcarbodies.

Bezier Approximation
How to provide R1 and R4 ?
R1

P2

P3

R4

P4

P4
P1

P1

Instead of providing R1 and R4 , provide two additional control points ! ! !

P2 and P3
Approxi mation

Bezier curves
Typically, cubic polynomials
Similar to Hermite interpolation
Special way of specifying end tangents
Requires special set of coefficients

Need four points

Two at the ends of a segment
Two control tangent vectors

Bezier curves
Control polygon: control points connected to each
other

Easy to generalize to higher order

Insert more control points
Hermite third order only

De Casteljau algorithm
Can compute any point on the curve in a
few iterations
No polynomials, pure geometry
Repeated linear interpolation
Repeated order of the curve times

The algorithm can be used as definition of

the curve

De Casteljau algorithm

Third order, u=0.75

De Casteljau algorithm

De Casteljau algorithm

De Casteljau algorithm

De Casteljau Algorithm
P1

1 t

t 1 t

1 t

t
P2
1 t
t
t

1 t
P3
P0

1 t
t

P1

1 t
t

(1 t ) P1 tP2

1 t
t

P3

(1 t ) P0 tP1

1 t
t

P2

P0

1 t
t

(1 t ) P2 tP3

(1 t ) 2 P0 2(1 t )tP1

1 t

t 2 P2
t

3(1 t ) 2 tP1
3(1 t )t 2 P2
t 3P3

(1 t ) 2 P1 2(1 t )tP2
t 2 P3

(1 t ) 3 P0

(1 t ) i t 3i

i 0 i
3


3 3
1
3 6 3
Q (t ) t 3 t 2 t 1
3
3 0

0 0
1
T M b Gb

1
0
0

Now,

P1
P
2

3 i
3 i

t
(
1

t
)
1

i
i 0

P3

P4

What does it mean ?

Q (t ) (1 t ) P1 3t (1-t ) P2 3t (1-t ) P3 t P4
3

(1 t ) 3

3t (1-t ) 2

3 i
t (1 t ) 3i Pi , 0 t 1
i 0 i
3

(t (1 t ))3

t3

3t 2 (1-t )

Bezier Polynomial Function

n!
i
n i
Bin (t )
.t .(1 t )
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

Some Bezier Curves

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)

Convex Hull property

P2
P4

P1

P3

Bezier Curve Properties

The first and last control points are interpolated
The tangent to the curve at the first control point is along
the line joining the first and second control points
The tangent at the last control point is along the line
joining the second last and last control points
The curve lies entirely within the convex hull of its control
points
The Bernstein polynomials (the basis functions) sum to 1 and are
everywhere positive

They can be rendered in many ways

E.g.: Convert to line segments with a subdivision algorithm

Disadvantages
The degree of the Bezier curve depends on the
number of control points.
The Bezier curve lacks local control. Changing
the position of one control point affects the entire
curve.

Invariance
Translational invariance means that translating
the control points and then evaluating the curve is
the same as evaluating and then translating the
curve
Rotational invariance means that rotating the
control points and then evaluating the curve is the
same as evaluating and then rotating the curve
These properties are essential for parametric
curves used in graphics
It is easy to prove that Bezier curves, Hermite
curves and everything else we will study are
translation and rotation invariant

Longer Curves
A single cubic Bezier or Hermite curve can only capture a
small class of curves
At most 2 inflection points

One solution is to raise the degree

Allows more control, at the expense of more control points
and higher degree polynomials
Control is not local, one control point influences entire curve

Alternate, most common solution is to join pieces of cubic

curve together into piecewise cubic curves
Total curve can be broken into pieces, each of which is cubic
Local control: Each control point only influences a limited
part of the curve
Interaction and design is much easier

Piecewise Bezier Curve

P0,1

P0,2

knot
P0,0

P1,3

P0,3
P1,0
P1,1

P1,2

Continuity
When two curves are joined, we typically want some
degree of continuity across the boundary (the knot)
C0, C-zero, point-wise continuous, curves share the same point
where they join
C1, C-one, continuous derivatives, curves share the same
parametric derivatives where they join
C2, C-two, continuous second derivatives, curves share the same
parametric second derivatives where they join
Higher orders possible

Question: How do we ensure that two Hermite curves are

C1 across a knot?
Question: How do we ensure that two Bezier curves are
C0, or C1, or C2 across a knot?

Achieving Continuity
For Hermite curves, the user specifies the derivatives, so
C1 is achieved simply by sharing points and derivatives
across the knot
For Bezier curves:
They interpolate their endpoints, so C0 is achieved by sharing
control points
The parametric derivative is a constant multiple of the vector
joining the first/last 2 control points
So C1 is achieved by setting P0,3=P1,0=J, and making P0,2 and J and
P1,1 collinear, with J-P0,2=P1,1-J
C2 comes from further constraints on P0,1 and P1,2

Bezier Continuity
P0,1

P0,2

P0,0

P1,3

P1,1

P1,2

Disclaimer: PowerPoint curves are not Bezier curves,

they are interpolating piecewise quadratic curves! This
diagram is an approximation.

Problem with Bezier Curves

To make a long continuous curve with Bezier
segments requires using many segments
Maintaining continuity requires constraints on the
control point positions
The user cannot arbitrarily move control vertices and
automatically maintain continuity
The constraints must be explicitly maintained
It is not intuitive to have control points that are not free

Bezier Basis Functions for d=3

1.2
1
0.8
0.6
0.4
0.2
0

B0
B1
B2
B3

Bezier Curves in OpenGL

OpenGL supports Beziers through mechanism called evaluators used
to compute the blending functions, bi (u), of any degree.
Smooth curves and surfaces are drawn by approximating them with
large number of small line segments or polygons. Described
mathematically by a small number of parameters such as control points.
Evaluator is a way to compute points on a curve or surface using only
control points. They do not require uniform spacing of u. Bezier curves
can then be rendered at any precision.
1D Bezier curves can also be used to define paths in time for
animation

Evaluators
A Bezier curve is a vector-valued function of one
variable
C(u) = [X(u) Y(u) Z(u)]
and a Bezier surface patch is a vector-valued
function of two variable
S(u,v) = [X(u,v) Y(u,v) Z(u,v)]
To use evaluator
first define the function C(u) or S(u,v)
then use the glEvalCoord{12}() command

Berstein Polynomial & Bezier Curve

n i
n i
B u u (1 u )
i
n
i

C u B (u ) Pi
i 0

n
i

u u1
u 2 u1

One-Dimensional Evaluators
GLfloat ctrlpoints[4][3] = {...};
void init(void) {
glMap1f(GL_MAP1_VERTEX_3, 0.0, 1.0,
3, 4, &ctrlpoints[0][0]);
}
void display(void) {
glBegin(GL_LINE_STRIP);
for(i=0; i<=30; i++)
glEvalCoord1f((GLfloat)i/30.0);
glEnd();
}

Defining 1-D Evaluator

glMap1(target,u1,u2,stride,order,points);
target: tells what the control points represent
u1,u2: the range of the variable u
stride: the number of floating-point values to advance in the
data between one control point and the next
order: the degree plus one, and it should agree with the
number of control points
points: pointer to the first coordinate of the first control point

Evaluating 1-D Evaluator

glEvalCoord1(u);
glEvalCoord1v(*u);
Causes evaluation of the enabled maps
u: the value of the domain coordinate
More than one evaluator can be defined and evaluated
at a time.
(ex) GL_MAP1_VERTEX_3 and GL_MAP1_COLOR_4
In this case, calls to glEvalCoord1() generates both a
position and a color.

e.g. /* define and enable 1D evaluator for Bezier cubic curve */

point ctrlpts[ ] = { . } ;
glMaplf ( GL_MAP1_VERTEX_3, 0.0, 1.0, 3, 4, ctrlpts);
glEnable (GL_MAP1_VERTEX_3);
/* GL_MAP1_VERTEX_3 specifies data type for ctrlpts ,
range of u = [ 0.0, 1.0], 3 is the number of values between
control points , (order = degree +1) = 4
*/
/* With evaluator enabled, draw line segments for Bezier curve */
glBegin (GL_LINE_STRIP);
for ( i = 0; i <= 30; i ++)
glEvalCoord1f ( (Glfloat) i/30.0);
glEnd ( )

One-Dimensional Grid and Its

Eval.
define a one-dimensional evenly spaced grid using
glMapGrid1*(), and then evaluate the (part of) grid
points using glEvalMesh1()
glMapGrid1(n, u1, u2);
defines a grid that goes from u1 to u2 in n steps.
glEvalMesh1(mode, p1, p2);
mode: GL_POINT or GL_LINE
evaluates from integer indices p1 to p2 with evenly
spaced coordinate

Bezier Surface

S u , v B (u ) B (v) Pij
i 0 j 0

n
i

m
j

Two-Dimensional Evaluators
Everything is similar to the onedimensional case, except that all the
commands must take two parameters, u and
v, into account
1. Define evaluator(s) with glMap2*()
2. Enable them with glEnable()
3. Invoke them by calling glEvalCoord2()
between a glBegin() and glEnd() or by
specifying and applying a mesh with
glMapGrid2() and glEvalMesh2()

Defining and Evaluating

glMap2(target, u1, u2, ustride, uorder,
v1, v2, vstride, vorder,
points);
glEvalCoord2(u, v);
glEvalCoord2v(*values);
Example

Grid and Its Evaluation

glMapGrid2(nu, u1, u2, nv, v1,
v2);
glEvalMesh2(mode, i1, i2, j1, j2);

Using Evaluators for Textures

GLfloat ctrlpoints[4][4][3] = {...};
GLfloat texpts[2][2][2] = {...};
void init(void) {
glMap2f(GL_MAP2_VERTEX_3,...,
&ctrlpoints[0][0][0]);
glMap2f(GL_MAP2_TEXTURE_COORD_2,...,
&texpts[0][0][0]);
glEnable(GL_ MAP2_VERTEX_3);
glEnable(GL_MAP2_TEXTURE_COORD_2);
glMapGrid2f(...);
}
void display(void) {
glEvalMesh2(...);
}

End Of Curves