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

44. The Time Line Lasseter 87 Time Animation is a sequence of frames (images) arranged along a time-line

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_frames.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

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