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); • • }