Animation

Marco Gillies

Computer Animation

• “Making things move”

• A key aspect of computer graphics

• Non-realtime for films

• Realtime for virtual worlds and games

Computer Animation

• 2 basic classes of computer animation:

• Keyframe animation– Data driven– Hand animation or performance driven

• Simulation– Procedural/algorithm driven– Particle systems, physics, artificial life

Computer animation

• Keyframe animation relies on data – from animators or actors

• Simulation or procedural animation takes a more algorithmic approach– Animation is directly generated by an

algorithm or calculation

Course Outline

• Traditional animation– Cell animation– Stop Motion

• Computer animation– Trad vs Computer animation– Keyframe– Interpolation

Traditional Animation

Flip Books

• The most basic form of animation is the flip book

• Presents a sequence of images in quick succession

• In film this becomes a sequence of frames

The Time Line

Lasseter ‘87

Time

• Animation is a sequence of frames (images) arranged along a time-line

Cell Animation

• Cell animation works on the same principle

• Display a sequence of images at 25 frames per second

Frames

• Each frame is an image

• Traditionally each image had to be hand drawn individually

• This potentially requires vast amounts of work from a highly skilled animator

Layers

• Have a background images that don’t move• Put foreground images on a transparent slide in

front of it • Only have to animate bits that move• Next time you watch an animation notice that the

background is always more detailed than the characters

• Asian animation often uses camera pans across static images

Keyframing

• The head animator draws the most important frames (Keyframes)

• An assistant draws the in-between frames (inbetweening)

Lasseter ‘87

Other Techniques

• Squash and stretch• Slow in slow out

Lasseter ‘87

Other Techniques

• Squash and stretch– Change the shape of an object to emphasise its

motion– In particular stretch then squash when changing

direction

Lasseter ‘87

Other Techniques

• Slow in slow out– Control the speed of an animation to make it seem

smoother– Start slow, speed up in the middle and slow to a

stop

Lasseter ‘87

Stop Motion Animation

• Create models of all your characters

• Pose them

• Take a photo

• Move them slightly

• Take another photo

Stop Motion Animation

• More effort on Creating Characters

• A lot of detail

• Each individual movement is less work – (though still a lot)

Exercise (in Processing)

• Load the set of images• doc.gold.ac.uk/~mas02mg/CC2_Animation/animation_frames.zip

• Display one image after the other

Computer animation

Computer Animation

• Computer animation (both 2D and 3D) is quite a lot like Stop Motion Animation

• You put a lot of effort into creating a (Virtual) model of a character

• Then when animating it you move it frame by frame

Computer animation

• You give the character a number of controls by which you move it– Translate, rotate etc.– E.g. skeleton

• This is called rigging

• You put a lot of work on set up

• Animation is simple

Keyframing

• Keyframing can reduce this effort even more

• The animator only needs to define the “key frames” of a movement

• The computer does the in betweening

Keyframing

• Keyframes aren’t images

• They are poses of a character

• Keyframes are now settings for value at a given time (a tuple)

>valuetime,• (For now I’ll just talk about animating

position)

Keyframing

Linear Interpolation

Linear Interpolation

• The position is interpolated linearly between keyframes

)t)P(t(+)tP(t=P(t) kk 11

Linear Interpolation

• The position is interpolated linearly between keyframes

)t)P(t(+)tP(t=P(t) kk 11

)P(ttt

tt+)P(t

tt

tt=P(t) k

kk

kk

kk

k1

1

1

1

1 1

Linear Interpolation

• The position is interpolated linearly between keyframes

)t)P(t(+)tP(t=P(t) kk 11

• The animation can be jerky• Need some equivalent of slow-in slow-out

)P(ttt

tt+)P(t

tt

tt=P(t) k

kk

kk

kk

k1

1

1

1

1 1

Linear Interpolation

QuickTime™ and aAnimation decompressor

are needed to see this picture.

Spline Interpolation

• Use smooth curves to interpolate positions

• Use curves similar to Bezier

Spline Interpolation

Bezier Curves

• Smooth but don’t go through all the control points, we need to go through all the keyframes

Hermite Curves

• Rather than specifying 4 control points specify 2 end points and tangents at these end points

• In the case of interpolating positions the tangents are velocities

Hermite Curves

• The maths is pretty much the same as Bezier Curves

• Bezier:

33

22

12

03 13t13t1 Pt+t)P(+Pt)(+Pt)(=P(t)

• Hermite:

P(t) = (2t 3 3t 2 +1)P0 +(t3 2t 2 +t)T0

+( 2t 3 +3t 2 )P1+(t3 t 2 )T1

Hermite Curves

• Transforming between the two• Bezier to Hermite:

P0 = PB0,T0 = 3 PB1 PB 0 ,P1 = PB3 ,T1 = 3 PB3 PB2

• Hermite to Bezier:

PB0 = P0,PB1 =1

3T0 P0 ,PB3 = P1,PB2 = P1

1

3T1

Tangents

• That’s fine, but where do we get the tangents (velocities) from?

• We could directly set them, they act as an extra control on the behaviour

• However often we want to generate them automatically

Tangents

• Base the tangent at a keyframe on the previous and next keyframe

Tangents

• Average the distance from the pervious keyframe and to the next one

Tangents

• Average the distance from the previous keyframe and to the next one

k+kkkk PP+PP=T 11 2

1

2

1

112

1 k+k PP=

• Catmull-Rom Splines

• If you set the tangents at the first and last frame to zero you get slow in slow out

Spline interpolation

QuickTime™ and aAnimation decompressor

are needed to see this picture.

Exercise (in Processing)

• Write a program:– Click on points on a screen– The time and position are stored as an array

of keyframes– When you hit return the stored movements

are replayed with a dot moving smoothly between the points

• float [] time = new float[20];• int [] xs = new int[20];• int [] ys = new int[20];

• int currentFrame = 0;• float starttTime;

• void draw()• {• if (clock() - startTime > time[currentFrame+1] ){• currentFrame ++;• }• • translate(xs[currentFrame], ys[currentFrame]);• rect( 0, 0, 10,10); • • }