csce 441 computer graphics: keyframe animation/smooth curves jinxiang chai

CSCE 441 Computer Graphics: Keyframe Animation/Smooth Curves

Jinxiang Chai

Outline

• Keyframe interpolation

• Curve representation and interpolation - natural cubic curves

- Hermite curves

- Bezier curves

• Required readings: HB 8-8,8-9, 8-10

Computer Animation

• Animation - making objects moving

• Compute animation - the production of consecutive images, which,

when displayed, convey a feeling of motion.

Animation Topics

• Rigid body simulation - bouncing ball

- millions of chairs falling down

Animation Topics



• Natural phenomenon

- water, fire, smoke, mud, etc.

Animation Topics





• Character animation

- articulated motion, e.g. full-body animation

- deformation, e.g. face

Animation Topics





• Character animation

- articulated motion, e.g. full-body animation

- deformation, e.g. face

• Cartoon animation

Animation Criterion

• Physically correct

- rigid body-simulation

- natural phenomenon

• Natural

- character animation

• Expressive

- cartoon animation

Keyframe Animation

Keyframe Interpolation

1

2

3

3c

2c

1c

A

What’s the inbetween motion?

t=0 t=50ms

Outline

• Process of keyframing• Key frame interpolation• Hermite and bezier curve• Splines• Speed control

2D Animation

• Highly skilled animators draw the key frames• Less skilled (lower paid) animators draw the in-

between frames• Time consuming process• Difficult to create physically realistic animation

3D Animation

• Animators specify important key frames in 3D• Computers generates the in-between frames• Some dynamic motion can be done by

computers (hair, clothes, etc)• Still time consuming; Pixar spent four years to

produce Toy Story

The Process of Keyframing

• Specify the keyframes

• Specify the type of interpolation

- linear, cubic, parametric curves

• Specify the speed profile of the interpolation

- constant velocity, ease-in-ease-out, etc

• Computer generates the in-between frames

A Keyframe

• In 2D animation, a keyframe is usually a single image

• In 3D animation, each keyframe is defined by a set of parameters

Keyframe Parameters

What are the parameters?– position and orientation– body deformation– facial features– hair and clothing– lights and cameras

Outline


Inbetween Frames

• Linear interpolation

• Cubic curve interpolation

Keyframe Interpolation

1

2

3

3c

2c

1c

A

t=0 t=50ms

Linear Interpolation

• Linearly interpolate the parameters between keyframes

Cubic Curve Interpolation

• We can use three cubic functions to represent a 3D curve

• Each function is defined with the range 0 <= t <=1

Compact Representation

Smooth Curves

• Controlling the shape of the curve

321)( ttttQx

Smooth Curves


323)( ttttQx

Smooth Curves


321)( ttttQ x

Smooth Curves


321)( ttttQx

Smooth Curves


3231)( ttttQx

Constraints on the cubics

• How many constraints do we need to determine a cubic curve?

)(23 tQdtctbta xxxxx

Constraints on the Cubic Functions



)(123 tQ

d

c

b

a

ttt x

x

x

x

x




)(123 tQ

d

c

b

a

ttt x

x

x

x

x

)(

)(

)(

)(

1

1

1

1

4

3

2

1

424

34

323

33

222

32

121

31

tQ

tQ

tQ

tQ

d

c

b

a

ttt

ttt

ttt

ttt

x

x

x

x

x

x

x

x




)(123 tQ

d

c

b

a

ttt x

x

x

x

x

)(

)(

)(

)(

1

1

1

1

4

3

2

1

424

34

323

33

222

32

121

31

tQ

tQ

tQ

tQ

d

c

b

a

ttt

ttt

ttt

ttt

x

x

x

x

x

x

x

x

)(

)(

)(

)(

1

1

1

1

4

3

2

1

1

424

34

323

33

222

32

121

31

tQ

tQ

tQ

tQ

ttt

ttt

ttt

ttt

d

c

b

a

x

x

x

x

x

x

x

x


• How many constraints do we need to determine a cubic curve? 4

Natural Cubic Curves

)(

)(

)(

)(

1

1

1

1

11)(

4

3

2

1

1

424

34

323

33

222

32

121

31

2323

tQ

tQ

tQ

tQ

ttt

ttt

ttt

ttt

ttt

d

c

b

a

ttttQ

x

x

x

x

Q(t1) Q(t2) Q(t3)

Q(t4)

Interpolation

• Find a polynomial that passes through specified values

y

t

32)( dtctbtaty

Interpolation


y

t

32)( dtctbtaty 3)0( ay

1)1( dcbay3842)2( dcbay12793)3( dcbay

Interpolation


y

t

32)( dtctbtaty

1

3

1

3

27931

8421

1111

0001

d

c

b

a

Interpolation


y

t

32)( dtctbtaty

31

320

6

3

d

c

b

a

Interpolation


y

t

2D Trajectory Interpolation

• Perform interpolation for each component separately

• Combine result to obtain parametric curvey

x

)(),()( tytxtp

Constraints on the Cubic Curves


- does not provide local control of the curve

x

x

x

x

d

c

b

a

ttttQ 1)( 23




• Redefine C as a product of the basis matrix M and the control vector G: C= MG

Constraints on the cubic curves




x

x

x

x

d

c

b

a

ttttQ 1)( 23

MG





)(

)(

)(

)(

1

1

1

1

11)(

4

3

2

1

1

424

34

323

33

222

32

121

31

2323

tQ

tQ

tQ

tQ

ttt

ttt

ttt

ttt

ttt

d

c

b

a

ttttQ

x

x

x

x

M G





)(

)(

)(

)(

1

1

1

1

11)(

4

3

2

1

1

424

34

323

33

222

32

121

31

2323

tQ

tQ

tQ

tQ

ttt

ttt

ttt

ttt

ttt

d

c

b

a

ttttQ

x

x

x

x

M? G?

Outline


Hermite Curve

• A Hermite curve is determined by

- endpoints P1 and P4

- tangent vectors R1 and R4 at the endpoints

P1

R1 P4

R4

Hermite Curve

• A Hermite curve is determined by

- endpoints P1 and P4

- tangent vectors R1 and R4 at the endpoints

• Use these elements to control the curve, i.e. construct control vector

P1

R1 P4

R4

4

1

4

1

23

????

????

????

????

1)(

R

R

P

P

ttttQ Mh Gh

Hermite Basis Matrix

Given desired constraints:

- endpoints meet P1 and P4

Q(0) = [0 0 0 1 ] · Mh · Gh = P1

Q(1) = [1 1 1 1 ] · Mh · Gh = P4

- tangent vectors meet R1 and R4

Tangent Vectors

4

1

4

1

23 1)(

R

R

P

P

MttttQ

Tangent Vectors

4

1

4

1

23 1)(

R

R

P

P

MttttQ

4

1

4

1

2 0123)(

R

R

P

P

MtttQ




Q(0) = [0 0 0 1 ] · Mh · Gh = P1

Q(1) = [1 1 1 1 ] · Mh · Gh = P4


Q’(0) =[0 0 1 0] · Mh · Gh =R1

Q’(1) =[3 2 1 0] · Mh · Gh =R4




Q(0) = [0 0 0 1 ] · Mh · Gh = P1

Q(1) = [1 1 1 1 ] · Mh · Gh = P4


Q’(0) =[0 0 1 0] · Mh · Gh =R1

Q’(1) =[3 2 1 0] · Mh · Gh =R4

So how to compute the basis matrix Mh?


We can solve for basis matrix Mh

4

1

4

1

4

1

4

1

????

????

????

????

0123

0100

1111

1000

R

R

P

P

R

R

P

P

Mh


We can solve for basis matrix Mh

4

1

4

1

4

1

4

1

????

????

????

????

0123

0100

1111

1000

R

R

P

P

R

R

P

P

Mh

0001

0100

1233

1122

0123

0100

1111

10001

hM


P1

R1 P4

R4

4

1

4

1

23

0001

0100

1233

1122

1)(

R

R

P

P

ttttQ

Hermite Basis Function

• Let’s define B as a product of T and M

• Bh(t) indicates the weight of each element in Gh

0001

0100

1233

1122

1)( 23 ttttBh

4

1

4

1

)()(

R

R

P

P

tBtQ h

Bezier Curve

• Indirectly specify tangent vectors by specifying two intermediate points

P1

R1

P3

R2

P2

P4

Bezier Curve


P1

R1

P3

R4

P2

P4

)(3

)(3

344

121

PPR

PPR

4

3

2

1

P

P

P

P

Gb

Bezier Curve


P1

R1

P3

R4

P2

P4

)(3

)(3

344

121

PPR

PPR

4

3

2

1

P

P

P

P

Gb

How to compute the basis matrix Mb?

Bezier Basis Matrix

• Establish the relation between Hermite and Bezier control vectors

44

11

342

121

)(3

)(3

PP

PP

PPR

PPR

Bezier Basis Matrix


44

11

342

121

)(3

)(3

PP

PP

PPR

PPR

4

3

4

1

4

1

4

1

3300

0133

1000

0001

P

P

P

P

R

R

P

P

Gh

Bezier Basis Matrix


44

11

342

121

)(3

)(3

PP

PP

PPR

PPR

4

3

4

1

4

1

4

1

3300

0133

1000

0001

P

P

P

P

R

R

P

P

GhMhb Gb

Bezier Basis Matrix

4

1

4

1

23

0001

0100

1233

1122

1)(

R

R

P

P

ttttQ

4

3

2

1

4

1

4

1

3300

0033

1000

0001

P

P

P

P

R

R

P

P

4

1

4

1

23

0001

0100

1233

1122

1)(

R

R

P

P

ttttQ

4

3

2

1

23

4

1

4

1

23

0001

0033

0363

1331

1

0001

0100

1233

1122

0001

0100

1233

1122

1

P

P

P

P

ttt

R

R

P

P

ttt

• For Hermite curves, we have

• For Bezier curves, we have

Bezier Basis Matrix

4

3

2

1

23

0001

0033

0363

1331

1)(

P

P

P

P

ttttQ

P1

P3

P2

P4

Hermite basis function






What’s function of this red curve?





2t3-3t2+1

Bezier basis functions

• Bezier blending functions are also called Bernstein polynomials




-t3+3t2-3t+1

How to interpolate a 3D curve

x

y

zo

How to interpolate a 3D curve

x

y

zo

z

z

z

z

y

y

y

y

x

x

x

x

zyx

P

P

P

P

P

P

P

P

P

P

P

P

ttttQtQtQ

4

3

2

1

4

3

2

1

4

3

2

1

23

0001

0033

0363

1331

1)()()(

Bezier curve

• Try this online at

- Move the interpolation point, see how the others (and the point on curve) move

- Control points (can even make loops)

Bezier java applet

http://www.cse.unsw.edu.au/~lambert/splines/




• Cubic curves:

• Hermite curves:

• Bezier curves:

Different basis functions

4

3

2

1

23

0001

0033

0363

1331

1)(

P

P

P

P

ttttQ

4

1

4

1

23

0001

0100

1233

1122

1)(

R

R

P

P

ttttQ

)(

)(

)(

)(

1

1

1

1

11)(

4

3

2

1

1

424

34

323

33

222

32

121

31

2323

tQ

tQ

tQ

tQ

ttt

ttt

ttt

ttt

ttt

d

c

b

a

ttttQ

x

x

x

x

Complex curves

• Suppose we want to draw a more complex curve

Complex curves

• Suppose we want to draw a more complex curve

How can we represent this curve?

Complex curves

• Suppose we want to draw a more complex curve Why not use a high-order Bézier?

- Wiggly curves

- No local control

Complex curves


- Wiggly curves

- No local control

• Instead, we’ll splice together a curve from individual segments that are cubic Béziers

Complex curves


- Wiggly curves

- No local control

• Instead, we’ll splice together a curve from individual segments that are cubic Béziers Why cubic? - Lowest dimension with control for the second derivative - Lowest dimension for non-planar polynomial curves

Next lecture

• Spline curve and more key frame interpolation

csce 441 computer graphics: keyframe animation/smooth curves jinxiang chai

Documents

keyframe animation slide

computer animation animation

realistic animation

face cartoon animation

face slide

ms slide

keyframes slide

animation criterion