Interpolation & Splines

Credit: Slides from Rachel McDonnell

Interpolating Values
 Animator has a list of values associated with
a given parameter at key frames
 How best to generate the values of the
parameter for frame between keyframes?
Extra Reading
 Computer Animation, Algorithms &
Techniques, 3rd Edition, Rick Parent
 Chapter 3: Interpolating Values
 Chapter 4: Interpolation-Based Animation
 Interactive Computer Graphics, a topdown
approach with Shader Based OpenGL, 6th
Edition, Angel
 Chapter 10: Curves and Surfaces
Traditional Keyframing
 In traditional animation
 Highly skilled animator draws the important
frames, or key frames at the desired times
 Less skilled animator (lower paid assistant)
draws the in-between frames
 1 picture for every 1/30th of a second
Keyframing in 3D
 Animator specifies the important keyframes
 Computer generates the in-betweens
automatically using interpolation methods
Interpolation
 Connecting the dots
 Examples are linear and cubic polynomial
interpolation
 We can interpolate any changeable value!!!
 Position
 Orientation
 Colour (sunrise)
 Intensity
 Camera focal length (zoom)
Keyframe Recipe
 Specify the key or important frames, A & B,
and their respective desired times
 Specify the type of interpolation
 linear, cubic, etc. parametric curves
= how to get from A to B in space
 Specify the speed profile of the interpolation
 constant velocity, ease-in,out, etc.
= how to get from A to B in time
 Computer generates the in-between frames
using this information
Linear Interpolation
(PA, tA)

(Pi, ti)

(PB, tB)

α = (ti – tA)/(tB – tA) Pi = (1-α) PA + αPB

Interpolation
 Human in-betweener interprets circumstances
of the object being interpolated
 Computer given start & end points

 Linear interpolation
 Given points P0 and P1, define curve L(t):
 L(t) = (1-t) P0 + t P1 t in [0,1]

P1

P0
 Linear interpolation: N Points
 Connect straight lines between data-points
 Piecewise linear
 Given P0…PN, define segment:
Li(t) = (1-t) Pi + t Pi+1 t in [0,1], i in [0,N]

P4

P0
Spline Curves
 To make smooth curves from data points
 Many types of splines, many properties:
 Interpolating, approximating, …
 Build an order-k polynomial from k+1 points

P4

P0
Interpolation
 Not fool-proof

 May not follow the laws of physics

 Splines may undershoot & cause

interpenetration
 Animator must
also keep an eye
out for these types
of side-effects.
Interpolation along a curve

 The parametric representation of curves are

often used to depict non-linear trajectories
 In general, there is both a parametric and an
implicit representation for a curve.
 In computer graphics it is often more
convenient to adopt the parametric form.
Example – Sphere
 For example, the implicit form of a sphere is:

x 2  y2  z 2  r 2  0
 In general all implicit representations of a 3-d
surface are of the form:
f ( x, y, z )  0
 The parametric form of a sphere is:

f :( ,  )  (cos  cos ,sin  ,cos sin  )

Example - 1
 Determine the representation of the function
f() = sin().
 This is a parametric description of a curve in 2
dimensions with parameter .
 This is an example of an unbounded curve (in
that we can take values of  from -...+.
 We’ll limit our curve to the domain (0...2). This
gives the following curve:
 Example - 2
 Now determine how fine or coarse a representation is
needed to faithfully capture this curve.
 Sample the curve at regular intervals of  along the
length of the curve.
 In this example, the curve is sampled at regular points 1
unit distance apart (i.e. at  = 0, 1, 2...).
 Sampled points are joined by straight lines
 This is how the curve will be used for animation or display
Interpolating along a curve
 There are many different methods of
representing general curves
 (rather than attempt to model all surfaces as
some existing function, say a Sine or Cosine).

 The most common are:

 Cubic Splines
 Bezier Curves
 B-splines
 NURBS and -splines
Interpolation vs. Approximation
 Given a set of n points, to create a curve we either
 interpolate the points
(curve passes through all points)
 approximate the points
(points describe convex hull of curve)
 Points on curve = knot points
 Points on convex hull (off curve) = control points
Control points
knot points

Convex hull

Interpolate Approximate
Splines
 To interpolate we can use a simple polynomial
spline.
 With n constraints we require a polynomial of
degree n-1 (order n polynomial).
 Let f(u) be the parameterised polynomial where
0u1

f u   au  b f u   au 2  bu  c f u   au 3  bu 2  cu  d

Linear Quadratic Cubic

Splines
 These polynomials are plots of f(u) with respect to u
 for each u, there is one and only one f(u)
 curve cannot turn back on itself

 Use polynomials for each axis

 in 2D we have 2 polynomials

xu   a xu 3  bxu 2  cxu  d x

y u   a y u 3  by u 2  c y u  d y

 As before we limit u to [0,1], although the

polynomial is defined for all values of u.
xu   a xu 3  bxu 2  cxu  d x
y u   a y u 3  by u 2  c y u  d y
 Splines
 For a 3D spline, we have 3 polynomials

pu 

The point p(u) is a

weighted sum of 4 points
or vectors in 3-space
Splines
 If we have more than 4 points we require
a polynomial of higher degree
 higher degree polynomials are more
difficult to control
 they exhibit unwanted wiggles (oscillations)

Quadratic Cubic Quartic Quintic

Splines
 In general we use cubic polynomials for
curves in CG
f t   a t 3  b t 2  c t  d

 Good trade-off
 minimal wiggles and faster to compute than
high degree polynomials
 lowest degree which allows non-planar curves
(quadratics require 3 points, 3 points always lie
in the same plane)
 Defining the Cubic Spline
 Normally we supply 4 points we wish the spline to
pass through.
 If we have more than 4 points we must employ
more than 1 spline
 use a piecewise cubic polynomial
 for n points, we have (n-1)/3 individual cubic segments
 without further constraints these will not join smoothly

non-smooth smooth
 Curve Continuity
 To ensure a smooth connection
between curve segments we enforce
further continuity constraints
R1 R2 R1 R2
S2 S2

S3,R0 S3,R0
R3 R3
S1 S1

S0 S0
non-smooth: S3 = R0 smooth: S3 = R0 and fS’(S3) = fR’(R0)
C0 continuity C1 continuity
(fS’= derivative of fS)
Curve Continuity
 To ensure a smooth connection between curve segments we
enforce further continuity constraints
 2 types of continuity:
 parametric continuity, denoted Cn where n = degree of continuity
 geometric continuity, denoted Gn
 Given a curve such that at point p, 2 segments ci(u) and ci+1(u)
meet then:

p  ci 1  ci 1 0

d n ci u  d n ci 1 u  d n ci u  d n ci 1 u 
C 
n
n
 G 
n

du u 1 du n u 0 n
du u 1 du n u 0
differentials are equal differentials are proportional

 In general, two curves which are parametric continuous to a certain

degree are also geometric continuous to that same degree, but the
reverse is not so.
Examples of Continuity

C0 continuity C1 continuity: C2 continuity:

continuous continuous
first first and second
derivative derivatives
Cubic Parametric Curves
 A curve segment p(t) is defined by
constraints on end-points, tangent vectors,
and continuity between curve segments.
 Each cubic polynomial has 4 coefficients
(a-d), so four constraints will be needed.
 Remember:
ax a y az 
xt   a xt 3  bxt 2  cxt  d x  b b b 

 
y t   a y t 3  by t 2  c y t  d y   xt  y t  z t   t 3 t 2 t 1 
 c
x

c
y

c
z


 pt   t.C

z t   a z t  bz t  cz t  d z 
x y z
3 2  
 x
d d y d z

 This allows us to formulate 4 equations in the 4

unknowns, and then solve for the unknowns.
Geometry Matrix
 To see how the coefficients can depend on
4 constraints, recall that a parametric cubic
curve is defined by
ax a y az 
b b b 

p(t )  [ x(t ) y (t ) z (t )]  t.C  t 3 t 2 
t 1
x y z

 cx c y cz 
 
 x
d d y d z


 Rewrite the co-efficient matrix as C  M.G

 where M is a 4x4 basis matrix,
 and G is a 4-element matrix of geometric
constraints, called the geometry matrix.
 G or/and M differ for each type of curve.
Geometry Matrix
 Expanding  m11 m12 m13 m14   g1x g1 y g1z 
m  g 2 z 
m22 m23 m24   g 2 x

pt   xt  y t  z t   t 3 t 2 
t 1  21
m31 m32 m33 m34   g 3 x
g2 y
g3 y g3z 
  
m41 m42 m43 m44   g 4 x g4 y g 4 z 

 Geometric constraints = conditions (e.g.,

endpoints or tangent vectors) defining the
curve.
 gx refers to the column vector of just the x
components; gy and gz are similarly defined
 The elements of G and M are constants
 The product G.M.t is just three cubic
polynomials in t.
Blending Functions
 Multiplying out just x(t) gives:
x(t )  (t 3m11  t 2 m21  tm31  m41 ) g1x 
(t 3m12  t 2 m22  tm32  m42 ) g 2 x 
(t 3m13  t 2 m23  tm33  m43 ) g 3 x 
(t 3m14  t 2 m24  tm34  m44 ) g 4 x

 We can read this equation in the following

way:
 The point p(t) is a weighted sum of the columns
of the geometry matrix G, each of which
represents a point or a vector in 3-space
Blending Functions
 This emphasizes that the curve is a weighted
sum of the elements of the geometry matrix.
 The weights are each cubic polynomials of
the parameter t, and are called the blending
functions.
 The blending functions B are given by: t  M
Sample Blending Polynomials

The Bernstein
polynomials,
weighting
functions for
Bézier curves
Cubic Parametric Curves
 A curve segment p(t) is defined by
constraints on end-points, tangent vectors,
and continuity between curve segments.
 Each cubic polynomial has 4 coefficients
(a-d), so four constraints will be needed.
 Remember:
ax a y az 
xt   a xt 3  bxt 2  cxt  d x  b b b 

 
y t   a y t 3  by t 2  c y t  d y   xt  y t  z t   t 3 t 2 t 1 
 c
x

c
y

c
z


 pt   t.C

z t   a z t  bz t  cz t  d z 
x y z
3 2  
 x
d d y d z

 This allows us to formulate 4 equations in the 4

unknowns, and then solve for the unknowns.
Geometry Matrix
 To see how the coefficients can depend on
4 constraints, recall that a parametric cubic
curve is defined by
ax a y az 
b b b 

p(t )  [ x(t ) y (t ) z (t )]  t.C  t 3 t 2 
t 1
x y z

 cx c y cz 
 
 x
d d y d z


 Rewrite the co-efficient matrix as C  M.G

 where M is a 4x4 basis matrix,
 and G is a 4-element matrix of geometric
constraints, called the geometry matrix.
 G or/and M differ for each type of curve.
Hermite Curves
 The key to defining a parametric cubic curve
therefore lies in the basis matrix M.
 Depending on the nature of this matrix,
specific forms of curves may be created.
 The Hermite form of a cubic polynomial
curve segment is determined by
 constraints on the
endpoints P1 and P4,
 and tangent vectors R1
at the endpoints R1 and R4. P1
P4

R4
 Hermite Curves - Examples
Only the direction of R1 varies

R1
P4
P1
R4

Only the magnitude of R1 varies

Hermite Geometry Vector
 Remember that p(t )  [ x(t ) y (t ) z (t )]  t.C  t.M.G

 The Hermite Geometry vector GH is

 P1 
P 
GH   4 
 R1 
 
 R4   P1x 
P 
 GHx is the x component of GH so: GHx   4 x 
 R1x 
 
 R4 x 
Hermite Curves
 The Hermite basis matrix, MH, relates the
Hermite Geometry vector GH to the
polynomial coefficients.

 Therefore:

x(t )  axt 3  bxt 2  cxt  d x  T  M H  GHx

 where 
T  t3 t2 t 1 
Hermite Curves
 The constraints on x(0) and x(1) are found by
direct substitution into the previous equation:

x(0)  0 0 0 1 M H  GHx  P1x

x(1)  1 1 1 1 M H  GHx  P4 x
Hermite Curves
 The tangent vector constraints on x(0) and
x(1) are found by differentiation, i.e:


x(t )  t 3 t2 
t 1  M H  GHx

x' (t )  3 t 2

2t 1 0  M H  GHx

 So: x' (0)  R1x  0 0 1 0 M H  GHx

 and x' (1)  R4 x  3 2 1 0 M H  GHx

Hermite Curves
 The four constraints can be written in matrix
form as:  P1x  0 0 0 1
P  1 1 1 1
 G 
4 x
 M H  GHx
 R1x  Hx
0 0 1 0
   
 4x 
R 3 2 1 0

 The only way that this equation can be

satisfied is if MH is the inverse of the given 4x4
matrix, so:
1
0 0 0 1  2 2 1 1 
1 1 1 1  3 3  2  1
MH    
0 0 1 0 0 0 1 0
   
3 2 1 0  1 0 0 0 
Hermite Blending Functions
 We know that:
p(t )  T  M H  GH

 The Hermite blending functions BH are given

by T  M H
 BH weights the geometry vector GH.

 Therefore:
p(t )  T  M H .GH  BH  GH  2t 3  3t 2  1P1 
 2t 3

 3t 2 P4 
(t 3  2t 2  t ) R1 
(t 3  t 2 ) R4
Hermite Curves – Blending functions
1
P1 P4
Labels show
which geometry
f(t) element is
weighted.

R1
1
t
R4
 Bézier Curves
 The drawback of the Hermite form is the need to
explicitly specify the tangent vectors.
 The Bézier form of the cubic polynomial curve
segment indirectly specifies tangent vectors
 Such curves are constrained by
 their endpoints P1 and P4
 intermediate points P2 and P3
that are not on the curve
P3
 Starting and ending tangent vectors
P2
 determined by the vectors P1P2 and P3P4
 related to the Hermite R1 and R4 by:
R1
R1  p' (0)  3( P2  P1 ) P4
P1
R4
R4  p' (1)  3( P4  P3 )
Examples of Bézier Curves

Further reading: De Casteljau Algorithm

Bézier Geometry Vector and Change of
Basis  P1 
P 
 The Bézier geometry vector is: GB   2 
 P3 
 
 P4 

 A change of basis matrix MHB defines the

relationship between the Hermite geometry
vector GH and the Bézier geometry vector GB
as follows:
 P1   1 0 0 0  P1 
P   0 0 0 1  P2 
GH   4     M HB  GB
 R1   3 3 0 0  P3 
    
 R4   0 0 3 3  P4 
Bézier Basis Matrix
 To find the Bezier basis matrix, MB, consider:
p(t )  T  M H  GH
 T  M H  M HB  GB 
 T  ( M H  M HB )  GB
 T  M B  GB

 Therefore, we simply calculate:

 1 3  3 1
 3 6 3 0
M B  M H  M HB 
 3 3 0 0
 
1 0 0 0
Bernstein Polynomials
 We now have:

p(t )  T  M B  GB  (1  t )3 P1 
3t (1  t ) 2 P2 
3t 2 (1  t ) P3 
3
t P4

 The four weights are known as the Bernstein

Polynomials
Bernstein Polynomials
Labels show
P0 which geometry
P3
element is
weighted.

P1 P2

*Note: this assumes points go from P0 not P1 (as in previous)

Bezier segment properties
 Curve is bounded by the convex hull of control points
 Curves are symmetric: reversing the order of the
control points yields the same curve, with a reversed
parameterization
 Variation diminishing property: a line does not cross
the curve more than its control polygon does
 The curve will not wiggle unless the designer specifically
introduces wiggling in the control polygon
 The curves are affine invariant: translating, scaling.
Rotating the control points is the same as performing
those operations on the curve itself
 There are good simple algorithms for evaluating and
subdividing Bezier curves into pieces
 Convex Hull Property
 The Bernstein blending polynomials are everywhere
non-negative.
 In addition, their sum is everywhere unity (i.e. 1).
 Thus, each curve segment, which is just the sum of
four control points weighted by the polynomials, is
completely contained within the convex hull of the
four control points.

Convex Hull
Convex Hull Property
 The convex hull for 2D curves is the convex
polygon formed by the 4 control points
(e.g. like a rubber band around them)
 For 3D curves, the convex hull is the convex
polyhedron formed by the control points
(e.g. like cling-film stretched around them.)
 The convex hull property holds for all cubics
defined by weighted sums of control points
if the blending functions are nonnegative
and sum to one.
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
B-splines
 B-splines automatically take care of continuity,
with exactly one control vertex per curve
segment
 B-splines are inherently smoother than
Hermite and Bezier
 Knots and Control points
knots
P9
controls
P8
t10
P1 P3 P4 Q9 P7

Q5 Q8
t3
Q3 Q6
Q4 P6
Q7
t4
P2 P5
P0
Local Control
 Each control point (except those at the start
and end of the sequence) influences four
curve segments.
 Moving a control point in a given direction
moves the four curve segments it affects in
the same direction.
 The other curve segments are totally
unaffected.
 This is called local control and is the major
advantage of B-splines over natural
(interpolated) splines.
Catmull-Rom Splines
 If we relax the requirement the our curves must lie
within the convex hull of the data, we can use
our data to form other types of splines
 Given the control points P0, P1, P2, and P3,
suppose rather than deriving a cubic polynomial
that interpolates P0 and P3,
we interpolate the middle points P1 and P2
 We use P0 and P3 to specify
the tangents t=0
t=1
 Catmull-Rom Splines
 Given the control points P0, P1, P2, and P3, and
the value t, the location of the point can be
calculated as (assuming uniform spacing of
control points):
 1 3  3 1   P0 
2 5 4  1  P1 

pt   0.5 * t 3 t 2 t 1
 1
 0 1 0   P2 
  
0 2 0 0   P3 

p(t )  0.5 * ( 2 * P1  t=0

( P0  P2 ) * t  t=1

(2 P0  5P1  4 P2  P3 ) * t 2 
( P0  3P1  3P2  P3 ) * t 3 )
Motion along a curve
 The speed at which the curve is traced out as
the parametric value is increased has to be
under the direct control of the animator to
produce predictable results

 STEP 1: determine a method for stepping

along the curve in equal increments
 STEP 2: speed up/slow down methods
Motion along a curve
 Assume we have P(u)
 Want to step in equal increments of u
 Want to ensure constant change in u implies
constant change in P(u)
 Does not always happen
Arc Length
 Arc length is the distance along the curve
 To ensure constant speed of curve
evaluation, perform arc length
parameterization of curve
Problem Specification
 Time motion specification
 Frame number, position
 Specify accelerations
 Relative velocities

B
A Time = 10

Time = 0
C D

Time = 50
Time = 35
Space-Time Curve

w = 1.0

w = 0.3
u = 0.2

w = 0.0 w = 0.6
u = 0.5
Arc Length Parameterization
 Two Ways
 Analytical computation
 Table based
 Supersampling and summed linear distances

P(u1)

P(u2)
P(u)

LENGTH(u1, u2)
Arc Length Parameterization
 Given parameters u1 and u2
 find LENGTH(u1, u2)

 Given an arc with length s and a parameter u1

 find u2 such that LENGTH (u1, u2) = s

 Can we compute s = S(u) = distance from start

of curve to point at u?
 Note: most types of parametric space curves, it
is not possible to find a closed-form algebraic
formula to describe arc length parameter
 Analytic Computation
Derivative of space curve wrt the
parameterizing variable

Evaluate
the arc
length
integral
For a cubic curve
Forward Differencing
 Sample curve at many parameter values
 Create piecewise linear representation of
curve from parameter evaluations

 Compute linear distance between samples

 Store distances in table
 Use table lookup and linear interpolation to
assess all values
 Limitations? No error control
Forward Differencing
 Index Parametric value Arc length
 0 0.0 0.0
 1 0.05 0.08
 2 0.10 0.15
 3 0.15 0.23
 ..
 15 0.75 0.959
 16 0.8 0.972
Table lookup
 User wants to know the distance from the
beginning of the curve to the point on the
curve u = 0.73
 Locate parametric entry closest to 0.73
 Index 15, arc length 0.959

 User wants to find u, given an arc length

 More difficult because not evenly spaced
 Binary search is effective method of locating
the closest entry
Limitations?
 Errors introduced
 Can overcome this by super-sampling in a
pre-processing step
 Or use an adaptive forward differencing
approach
 More computation in areas of curve that are
estimated to have large errors
Speed Control
 Once a space curve has been parameterized by
arc length, we can control the speed of traversal
 Other speeds?
 Speed can be controlled by varying the arc
length values at something other than a linear
function
 The space curve defines where to go, the
distance-time function defines when
Speed Control
 Given arc-length parameterized curve
 s(t) distance the curve has travelled given t
 Normalize total distance to 1
 Monotonic increasing and continuous
 To ease in/out, make s(t) = ease (t) that looks
like: (speed control function)

distance

Time
Ease-in Ease-out Motion
 Arc length no longer proportional to time