Principles of Traditional Animation Applied to 3D Computer Animation by John Lasseter, Papers of Computer Graphics

Download Principles of Traditional Animation Applied to 3D Computer Animation by John Lasseter and more Papers Computer Graphics in PDF only on Docsity! ( ~ ~ Computer Graphics, Volume 21, Number 4, July 1987 PRINCIPLES OF TRADITIONAL ANIMATION APPLIED TO 3D COMPUTER ANIMATION J o h n L a s s e t e r P i x a r San Ra fae l Ca l i fo rn ia "There is no particular mystery in animation.., it's really very simple, and like anything that is simple, it is about the hardest thing in the world to do." Bill Tytla at the Walt Disney Studio, June 28, 1937. [14] ABSTRACT This paper describes the basic principles of traditional 2D hand drawn animation and their application to 3D computer animation. After describing how these principles evolved, the individual principles are detailed, addressing their meanings in 2D hand drawn animation and their application to 3D computer animation. This should demonstrate the importance of these principles to quality 3D computer animation. CR Categories and Subject Descriptors: 1.3.6 Computer Graphics : Methodology and Techniques - Interaction techniques; 1.3.7 Computer Graphics : Three-dimensional Graphics and Realism - Animation; J.5 Computer Applications : Arts and Humanities - Arts, fine and performing. General Terms: Design, Human Factors. Additional Keywords and Phrases: Animation Principles, Keyframe Animation, Squash and Stretch, Luxo Jr. I . INTRODUCTION Early research in computer animation developed 2D animation techniques based on traditional animation. [7] Techniques such as storyboarding [11], key/tame animation, [4,5] inbetweening, [16,22] scan/paint, and multiplane backgrounds [17] attempted to apply the eel animation process to the computer. As 3D computer animation research matured, more resources were devoted to image rendering than to animation. Because 3D computer animation uses 3D models instead of 2D drawings, fewer techniques from traditional animation were applied. Early 3D animation systems were script based [6], followed by a few spline-interpolated key/rome systems. [22] But these systems were developed by companies for internal use, and so very few traditionally trained animators found their way into 3D computer animation. "Luxo" is a trademark of Jae Jacobsen Industries AS. Permission to copy without fee all or part of this material is granted provided that the copies are not made or distributed for direct commercial advantage, the ACM copyright notice and the title of the pubfication and its date appear, and notice is given that copying is by permission of the Association for Computing Machinery. To copy otherwise, or to republish, requires a fee and/or specific permission. © 1987 ACM-0-89791-227-6/87/007/0035 $00.75 The last two years have seen the appearance of reliable, user friendly, keyframe animation sys tems from such companies as Wavefront Technologies Inc., [29] Alias Research Inc., [2] Abel Image Research (RIP), [1] Vertigo Systems Inc., [28] Symbolics Inc., [251 and others. These sys tems will enable people to produce more high quality computer animation. Unfortunately, these systems will also enable people to produce more bad computer animation. Much of this bad animation will be due to unfamiliarity with the fundamental principles that have been used for hand drawn character animation for over 50 years. Understanding these principles of traditional animation is essential to producing good computer animation. Such an understanding should also be important to the designers of the systems used by these animators. In this paper, I will explain the fundamental principles of traditional animation and how they apply to 3D keyframe computer animation. 2. PRINCIPLES OF ANIMATION Between the late 1920's and the late 1930's animation grew from a novelty to an art form at the Walt Disney Studio. With every picture, actions became more convincing, and characters were emerging as true personalities. Audiences were enthusiastic and many of the animators were satisfied, however it was clear to Walt Disney that the level of animation and existing characters were not adequate to pursue new story lines-- characters were limited to certain types of action and, audience acceptance notwithstanding, they were not appealing to the eye. It was apparent to Walt Disney that no one could successfully animate a humanized figure or a life-like animal; a new drawing approach was necessary to improve the level of animation exemplified by the Three Little Pigs. [10] FIGURE 1. Luxo Jr.'s hop with overlapping action on cord. Flip pages from last page of paper to front. The top figures are frames 1-5, the bottom are frames 6-10. J ~ 35 ~ SIGGRAPH '87, Anaheim, July 27-31, 1987 Disney set up drawing classes for his animators at the Chouinard Art Institute in Los Angeles under instructor Don Graham. When the classes were started, most of the animators were drawing using the old cartoon formula of standardized shapes, sizes, actions, and gestures, with little or no reference to nature. [12] Out of these classes grew a way of drawing moving human figures and animals. The students studied models in motion [20] as well as live action film, playing certain actions over and over. [131 The analysis of action became important to the development of animation. Some of the animators began to apply the lessons of these classes to production animation, which became more sophisticated and realistic. The animators continually searched for better ways to communicate to one mother the ideas learned from these lessons. Gradually, procedures were isolated and named, analyzed and perfected, and new artists were taught these practices as rules of the trade. [26] They became the fundamental principles of traditional animation: 1. Squash and Stretch -- Defining the rigidity and mass of an object by distorting its shape during an action. 2. Timing -- Spacing actions to define the weight and size of objects and the personality of characters. 3. Anticipation -- The preparation for an action. 4. Staging , . Presentating an idea so that it is unmistakably clear. 5. Fol low Through and Over lapping Act ion -- The termination of an action and establishing its relationship to the next action. 6. Straight Ahead Action and Pose-To-Pose Action -- The two contrasting approaches to the creation of movement. 7. S low In and Out -- The spacing of the inbetween frames to achieve subtlety of timing and movement. 8. Arcs -- The visual path of action for natural movement. 9. Exaggeration -- Accentuating the essence of an idea via the design and the action. 10. Secondary Act ion -- The action of an object resulting from another action, 11. Appea l .- Creating a design or an action that the audience enjoys watching. The application of some of these principles mean the same regardless of the medium of animation. 2D hand drawn animation deals with a sequence of two dimensional drawings that simulate motion. 3D computer animation involves creating a three dimensional model in the computer. Motion is achieved by setting keyframe poses and having the computer generate the inbetween frames. Timing, anticipation, staging, follow through, overlap, exaggeration, and secondary action apply in the same way for both types of animation. While the meanings of squash and stretch, slow in and out, arcs, appeal, straight ahead action, and pose-to-pose action remain the same, their application changes due to the difference in medium. 2.1 SQUASH AND STRETCH The most important principle is called squash and stretch. When an object is moved, the movement emphasizes any rigidity in the object. In real life, only the most rigid shapes (such as chairs, dishes and pans) remain so during motion. Anything composed of living flesh, no matter how bony, will show considerable movement in its shape during an action. For example, when a bent arm with swelling biceps straightens out, only the long sinews are apparent. A face, whether chewing, smiling, talking, or just showing a change of expression, is alive with changing shapes in the cheeks, the lips, and the eyes. ]26] The squashed position depicts the form either flattened out by an external pressure or constricted by its own power. The stretched position always shows the same form in a very extended condition. [26] The most important rule to squash and stretch is that, no matter how squashed or stretched out a particular object gets, its volume remains constant. If an object squashed down without its sides stretching, it would appear to shrink; if it stretched up without its sides squeezing in it would appear to grow. Consider the shape and volume of a half filled flour sack: when dropped on the floor, it squashed out to its fullest shape. If picked up by the top comers, it stretched out to its longest shape. It never changes volume. [26] The standard animation test for all beginners is drawing a bouncing ball. The assignment is to represent the ball by a simple circle, and then have it drop, hit the ground, and bounce back into the air. A simple test, but it teaches the basic mechanics of animating a scene, introducing timing as well as squash and stretch. If the bottom drawing is flattened, it gives the appearance of bouncing. Elongating the drawings before and after the bounce increases the sense of speed, makes it easier to follow and gives more snap to the action. [26,3] (figure 2) FIGURE 2. Squash & stretch in bouncing ball. Squash and stretch also defines the rigidity of the material making up an object. When an object is squashed flat and stretches out drastically, it gives the sense that the object is made out of a soft, pliable material and vice versa. When the parts of an object are of different materials, they should respond differently: flexible parts should squash more and rigid parts less. An object need not deform in order to squash and stretch. For instance, a hinged object like Luxo Jr. (from the film, Lv, xo Jr. I21]), squashes by folding over on itself, and stretches by extending out fully. (figure 3) FIGURE 3. Squash & stretch in Luxo Jr.'s hop. Squash and stretch is very important in facial animation, not only for showing the flexibility of the flesh and muscle, but also for showing the relationship of between the parts of the face. When a face smiles broadly, the comers of the mouth push up into the cheeks. The cheeks squash and push up into the eyes, making the eyes squ in t , which brings down the eyebrows and stretches the forehead. When the face adopts a surprised expression, the mouth opens, stretching down the cheeks. The wide open eyes push the eyebrows up, squashing and wrinkling the forehead. 36 ( ~ ~ Computer Graphics, Volume 21, Number 4, July 1987 In Luxo Jr. , it was very important that the audience was looking in the right place at the right time, because the story, acting and emotion was being put across with movement alone, in pantomime, and sometimes the movement was very subtle. If the audience missed an action, an emotion would be missed, and the story would suffer. So the action had to be paced so that only Dad or Jr. was doing an important action at any one time, never both. In the beginning of the film, Dad is on screen alone your eye was on him. But as soon as Jr. hops on-screen, he is moving faster than Dad, therefore the audience's eyes immediately goes to him and stays there. Most of the time Jr. was on-screen, Dad's actions were very subtle, so the attention of the audience was always on Jr. where most of the story was being told. If Dad's actions were important, Jr.'s actions were toned down and Dad's movements were emphasized and the attention of the audience would transfer to Dad. For example, when Jr. looks up to Dad after he's pol3q3eA the bali and Dad shakes his head, all eyes are on him. Another idea developed in the early days at Disney was the importance of staging an action in silhouette. In those days, all the characters were black and white, with no gray values to soften the contrast or delineate a form. Bodies, arms and hands were all black, so there was no way to stage an action clearly except in silhouette. A hand in front of a chest would simply disappear. Out of this limitation, the animators realized that it is always better to show an action in silhouette. Charlie Chaplin maintained that if an actor knew his emotion thoroughly, he could show it silhouette. [26] In The Adventures o f Andre and Wally B., Andre awakes and sits up, then scratches his side. If he were to scratch his stomach instead of his side, the action would happen in front of his body and would be unclear what was happening. (figure 6) FIGURE 6. Andre's scratch was staged to the side (in "silhouette") for clarity and became that is where his itch was. In Luxo Jr., all the action was animated with silhouette in mind. When Dad and Jr. come face to face for the first time, it is easy to see what is happening because it is staged to the side. If Jr. was in front of Dad looking up at him, it would be difficult to read. (figure 7) Jr. hopping on the ball would be confusing if the action was to happen with Jr. facing the camera. Viewed from the side it is perfectly clear, (figure 8) 2.5 FOLLOW THROUGH AND OVERLAPPING ACTION Just as the anticipation is the preparation of an action,follow through is the termination of an action. Actions very rarely come to a sudden and complete stop, but are generally carried past their termination point. For example, a hand, after releasing a thrown ball, continues past the actual point of release. In the movement o f any object or figure, the actions of the parts are not simultaneous: some part must initiate the move, like the engine of a main. This is called the lead. In walking, the action starts with the hips. As the hip swings forward, it sets a leg in motion. The hip "leads", the leg FIGURES 7-8. In Luxo Jr., all action was staged to the side for clarity. "follows." As the hip twists, the torso follows, then the shoulder, the arm, the wrist, and finally the fingers. Although most large body actions start in the hips, the wrist will lead the fingers in a hand gestoxe, and the eyes will usually lead the head in an action. [12] Appendages or loose parts of a character or object will move at a slower speed and "drag" behind the leading part of the figure. Then as the leading part of the figure slows to a stop, these appeftdages will continue to move and will take longer to settle down. As with squash and streteh, the objects mass is shown in the way the object slows down. The degree that the appendages drag behind and the time it takes for them to stop is directly proportional to their weight. The heavier they are the farther behind they drag and the longer they take to settle to a stop. Conversely, if they are lighter, they will drag less and stop more quickly. J ' 39 ' ~ SIGGRAPH '87, Anaheim, July 27-31, 1987 i i n , i i In The Adventures of Andre and Watly B., this principle was used extensively on Wally B.'s feet, antennae and stinger. They all dragged behind his head and body, and continued to move well after the body had stopped. To convey that these loose appendages were made of different materials and different masses, the rate of the follow through was different for each type. His antennae were fairly light, so they dragged behind just slightly. His stinger was like stainless steel, so it dragged behind the action more than the antennae. And his feet were heavy and very flexible, as though they were water balloons; therefore, they always followed far behind the main action with a lot of squash and stretch. In the zip off illustrated above (figure 5), the action of Wally B.'s body was so fast and the feet weighed so much that they dragged far behind. They were even left on screen frames after the body had disappeared. Often, slight variations are added to the timing and speed of the loose parts of objects. This overlapping action makes the object seem natural, the action more interesting. In Wally's zip off (figure 5), his feet zipped off, one after the other, about one or two frames apart. The action was so fast that it was difficult to see each foot going off separately, but It made the action as a whole more interesting. Perhaps more important, overlapping is critical to conveying main ideas of the story. An action should never be brought to a complete stop before starting another action, and the second action should overlap the first. Overlapping maintains a continual flow and continuity between whole phrases of actions. Walt Disney once explained overlapping this way, "It is not necessary for an animator to take a character to one point, complete that action completely, and then turn to the following action as if he had never given it a thought until after completing the first action. When a character knows what his is going to do he doesn't have to stop before each individual action and think to do it. He has #planned in advance in his mind. For example, the mind thinks, "I'll close the door - lock it - then I'm going to undress and go to bed." Well, you walk over to the door - before the walk is finished you're reaching for the door - before the door is closed you reach for the key - before the door is lockedyou're turning away - while you're walking away you undo your tie - and before you reach the bureau you have your tie off. In other words, before you know it you're undressed - and you've done it in one thought, "I'm going to bed.' " [12] 2.6 STRAIGHT AHEAD ACTION AND POSE-TO-POSE ACTION (KEYFRAMES) There are two main approaches to hand drawn animation. The first is known as straight ahead action because the animator literally works straight ahead from his first drawing in the scene. He knows where the scene fits in the story and the business it has to include. He does one drawing after another, getting new ideas as he goes along, until he reaches the end of the scene. Thig process usually produces drawings and action that have a fresh and slightly zany look, because the whole process was kept very creative. Straight ahead action is used for wild, scrambling actions where spontaneity is important. The second approach is called pose-to-pose. Here the animator plans his actions, figures out just what drawings will be needed to animate the business, makes the drawings concentrating on the poses, relates them to each other in size and action, and then draws the inbetweens. Pose-to-pose is used for animation that requires good acting, where the poses and timing are all important. The pose-to-pose technique applies to keyframe computer animation with timing and pose control of extremes and inbetweens. The difficulty in controlling the inbetweens makes it incorrect to approach keyframe computer animation exactly as one would pose-to-pose hand drawn animation. In working with a complex model, creating a complete pose at a time would make the inbetweens too unpredictable. The path of action will in general be incorrect and objects will intersect one another. The result is much time-consuming reworking of inbetweens. There is a much better approach in the context of a hierarchical modelling system, which works "layer by layer" down the hierarchy. Instead of animating one complete pose to another, one transformation is animated at a time, starting with the trunk of the hierarchical tree structure, working transformation by transformation down the branches to the end. Fewer extremes are used. Not all translates, rotates and scales have extremes on the same frames; some have many extremes and others very few. With fewer extremes, the importance of the inbetweens increases, Tension and direction controls on the interpolating splines are helpful in controlling the spacing of the inbetween and to achieve slow in and out. [16] (See Slow In and Out) This layer approach to animation shares many important elements with the pose-to-pose technique in hand drawn animation. Planning the animation out in advance, as in pose-to-pose, becomes even more important. The action must be well thought out, the timing and poses planned so that even in the early layers, the poses and actions are clear. The Aventures of Andre and Wally B. and Luxo Jr. were both animated using a keyframe animation system called Md (Motion Doctor). [19] Luxo Jr. was animated using this layered approach to the keyfranles. Jr.'s hop (figure 1) was animated by first setting the keyframes for his forward movement only: two keyframes were set for the X translation, the first where the hop starts and the second where he lands. This defined the timing of his hop. The height of his hop was then defined by setting a keyframe in the Z translation (Z being up in this case). The next step, animating the rotation of Jr. 's arms, was important because the arms define the anticipation, squash and stretch, and follow through of the action. Keyframes were set for just about every frame, rotating the arms together before the hop for the anticipation, then immediately far apart for the stretch of the jump. The arms were rotated together again at the top of the arc where the action slows slightly, then rotated far apart, stretching to anticipate the landing. To indicate the shock of the landing, the arms were rotated quickly together two frames after the base lands on the floor. This is the follow through of the action. His base and shade were animated in the next two steps. Like the arms, many keyframes were set to define the rotation of the base and shade because their movement was important for anticipation and follow through. 2.7 SLOW IN AND OUT Slow in and slow out deals with the spacing of the inbetween drawings between the extreme poses. Mathematically, the term refers to second- and third-order continuity of motion. In early animation, the action was limited to mainly fast and slow moves, the spacing from one drawing to the next fairly even. But when the poses of pose-to-pose animation became more expressive, animators wanted the audience to see them. They found that by grouping the inbetweens closer to each extreme, with only one fleeting drawing halfway between, they could achieve a very spirited result, with the character zipping from one attitude to another. "Slowing out" of one pose, then "slowing in" to the next pose simply refers to the timing of the inbetweens. The animator indicates the placement of the inbetweens, the slow in or slow out, with a "timing chart" drawn on the side of the drawing. This tells himself, or his assistant who will be doing the inbetweens later, how he wanted the timing to be and where he wanted the inbetween drawings placed. (figur~ 9) E X T R E M E • E X T R E M E FIGURE 9. Timing chart for ball bounce. 4 0 ( ~ ~ Computer Graphics, Volume 21, Number 4, July 1987 In most 3D keyframe computer animation systems, the inbetweening is done automatically using spline interpolation. Slow in and slow out is achieved by adjusting the tension, direction or bias, and continuity of the splines. [16] This works well to give the affect of slow in and out, but a graphical representation of the spline is required to see the effect of tension, direction, and continuity have on its shape. With this type of spline interpolation, a common problem is the spline overshooting at extremes when there is a large change in value between them, especially over a small number of frames. This also happens when the direction control of an extreme is adjusted. The danger is that, depending on the variable the spline controls (translate, rotate, or scale), the value will shoot in the wrong direction just before (or just after) the large change in value. Sometimes this effect works out well when it occurs just before a large movement, it may appear to be an anticipation. However, more often than not, it gives an undesirable effect. In Luxo Jr . , there was an example of this problem of overshooting splines. Jr.'s base was very heavy and when he hopped, we wanted the base to start stationary, then pop up in the air from the momentum of his jump, arc over, then land with a thud, suddenly stationary again. For the up translation, there were three keyframes, the two stationary positions and the highest point of his jump. The spline software forced continuity, so that his base would move down under the surface of the floor just before and after the jump. (figure 10a) The solution was to put two new extremes, equal to the two stationary extremes, on the frames just before and just after the extremes. This "locked" down the spline, so that the up translation stayed the same value, popped up in the air, landed and then stayed the same value again. This gave the desired feeling of weight to his little base, (figure 10b) The same solution can be achieved by breaking the spline using its continuity parameter [16] at the two stationary extremes. This solution requires a graphical display of the spline so that the correct shape can be achieved. FIGURE 10a. This spline controls the Z (up) translation of Luxo Jr. Dips in the spline cause him to intersect the floor. FIGURE 10b. Two extra extremes are added to the spline which removes the dips and prevents Jr. from going into the basement. 2.8 ARCS The visual path of action from one extreme to another is always described by an arc. Arcs in nature are the most economical routes by which a form can move from one position to another. In animation, such arcs are used extensively, for they make animation much smoother and less stiff than a straight line for the path of action. In certain cases, an arc may resolve itself into a straight path, as for a falling object, but usually,, even in a straight line action, the object rotates. [12] In most 3D keyframe computer animation systems, the path of action from one extreme to another is controlled by the same spline that controls the timing (slow in and out) of the inbetween values. This may simplify computating the inbetweens but it has unfortunate effects. When a motion is slow, with many inbetweens, the arc of the path of action is curved, as desired. But when the action is fast, the arc flattens out: the faster the action, the flatter the arc. Sometimes this is desirable, but more often, the path of even a fast motion should be curved or arced. Straight inbetweens can completely kill the essence of an action. The spline that defines the path of action should be separate from the spline that defines the timing or spacing of the inbetweens for several reasons: so that the arc of a fast acdon doesn't flatten out; so that you can adjust the timing of the inbetweens without effecting the path of action; so that you can use different splines to define the path of action (where a B-spline is appropriate for its smoothness) and the timing (a CatmuU - Rom spline so you can adjust it's tension and direction controls to get slow in and out). This technique is not common, but research is being done in this area. [15] 2.9 EXAGGERATION The meaning of exaggeration is, in general, obvious. However, the principle of exaggeration in animation does not mean arbitrarily distorting shapes or objects or making an action more violent or unrealistic. The animator must go to the heart of anything or any idea and develop its essence, understanding the reason for i t , so that the audience will also understand it. If a eharacter is sad, make him sadder; if he is bright, make him shine; worried, make him fret; wild, make him frantic. A scene has many components to it: the design, the shape of the objects, the action, the emotion, the color, the sound. Exaggeration can work with any component, but not in isolation. The exaggeration of the various components should be balanced. If just one thing is exaggerated in an otherwise lifelike scene, it will stick out and seem unrealistic. f 41