Animation

1
Animation

• Marco Gillies

2
Computer Animation

• Making things move
• A key aspect of computer graphics
• Non-realtime for films
• Realtime for virtual worlds and games

3
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

4
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

5
Course Outline

• Traditional animation
• Cell animation
• Stop Motion
• Computer animation
• Trad vs Computer animation
• Keyframe
• Interpolation

6
Traditional Animation
7
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

8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
(No Transcript)
16
(No Transcript)
17
(No Transcript)
18
(No Transcript)
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
(No Transcript)
23
(No Transcript)
24
(No Transcript)
25
(No Transcript)
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
(No Transcript)
39
(No Transcript)
40
(No Transcript)
41
(No Transcript)
42
(No Transcript)
43
(No Transcript)
44
The Time Line

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

Time
Lasseter 87
45
Cell Animation

• Cell animation works on the same principle
• Display a sequence of images at 25 frames per
  second

46
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

47
Layers

• Have a background images that dont 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

48
Keyframing

• The head animator draws the most important frames
  (Keyframes)
• An assistant draws the in-between frames
  (inbetweening)

Lasseter 87
49
Other Techniques

• Squash and stretch
• Slow in slow out

Lasseter 87
50
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
51
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
52
Stop Motion Animation

• Create models of all your characters
• Pose them
• Take a photo
• Move them slightly
• Take another photo

53
Stop Motion Animation

• More effort on Creating Characters
• A lot of detail
• Each individual movement is less work
• (though still a lot)

54
Exercise (in Processing)

• Load the set of images
• doc.gold.ac.uk/mas02mg/CC2_Animation/animation_fr
  ames.zip
• Display one image after the other

55
Computer animation
56
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

57
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

58
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

59
(No Transcript)
60
Keyframing

• Keyframes arent images
• They are poses of a character
• Keyframes are now settings for value at a given
  time (a tuple)

• (For now Ill just talk about animating position)

61
Keyframing
62
Linear Interpolation
63
Linear Interpolation

• The position is interpolated linearly between
  keyframes

64
Linear Interpolation

• The position is interpolated linearly between
  keyframes

65
Linear Interpolation

• The position is interpolated linearly between
  keyframes

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

66
Linear Interpolation
67
Spline Interpolation

• Use smooth curves to interpolate positions
• Use curves similar to Bezier

68
Spline Interpolation
69
Bezier Curves

• Smooth but dont go through all the control
  points, we need to go through all the keyframes

70
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

71
Hermite Curves

• The maths is pretty much the same as Bezier
  Curves
• Bezier

• Hermite

72
Hermite Curves

• Transforming between the two
• Bezier to Hermite

• Hermite to Bezier

73
Tangents

• Thats 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

74
Tangents

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

75
Tangents

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

76
Tangents

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

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

77
Spline interpolation
78
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

79

• float time new float20
• int xs new int20
• int ys new int20
• int currentFrame 0
• float starttTime
• void draw()
• if (clock() - startTime gt timecurrentFrame1
  )
• currentFrame
• translate(xscurrentFrame, yscurrentFrame)
• rect( 0, 0, 10,10)