COMP 150-04 Visualization Lecture 15 Animation
History of animation
The function of animation Illustrate steps of a complex process Illustrate cause and effect, context Show trends over time, tell a story Attract attention Entertain http://gapminder.org
Attribution of causality Michotte demonstration Timing affects the perceived cause and effect Tendency to construct narratives, anthropomorphize elements http://cogweb.ucla.edu/discourse/narrative/michotte-demo.swf
Attribution of causality Michotte, redrawn by James Marsh http://aig.cs.man.ac.uk/people/jamesmarsh
Gestalt principle of common fate Perceive a grouping of elements with a common motion This is why a military vehicle is camouflaged when stationary but less so when moving Martin Wattenberg, Sand Shrimp http://www.singlecell.org/july
Variables of animation Size Shape Color and shading Position Speed Viewpoint and perspective Secondary variables: sound,...
Traditional animation Each frame represented as a layer of painted cels Background, characters, moving and still parts of each character Parts of the scene that don t change (e.g., background) do not need to be redrawn for each frame Layered cels for each frame are stacked and photographed
Traditional animation Storyboarding Sequence of stills with descriptions of the action Maps out key events in the story, representative poses Key framing Draw the important frames as line drawings Description of motion between the key frames Inbetweening Draw all of the frames between the key frames
Traditional animation Painting Copy the line drawings to the cels Color the cels
Traditional vs. computer animation Storyboard Keyframing Inbetweening Painting Storyboard Keyframing Interpolation Rendering
Initial artists sketches Pixar, Finding Nemo
3D geometry Pixar, Finding Nemo
Simple rendering Pixar, Finding Nemo
Add textures Pixar, Finding Nemo
Add sophisticated lighting and volumetric effects Pixar, Finding Nemo
Computer animation Replace painting with rendering Replace much of the manual inbetweening with computer simulation and parameter interpolation Models have various parameters: Control points or vertices (positions, normals, colors, textures) Parameters controlling pose, shape, or movement (joint angles, deformation, trajectories) Scene parameters (lights, camera)
Computer animation Inbetweening via parameter interpolation A set of n parameters defines an n-dimensional state space One pose defines a point in the state space The animation defines a path through the state space Start with the parameters at an initial point in the state space Move the parameters along a state space path and re-render until the animation is complete
Several levels of computer input Artwork and design Character shape representation, backgrounds, rendering Motion Forward simulation, pose-to-pose interpolation Behavior Crowd behaviors, automated responses
Principles of animation Focus attention on the main character Make sure the audience sees what they should see Appeal to and engage the audience Cartoon physics 10 principles proposed by Disney Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation
Squash and stretch Define the rigidity and mass of an object by distorting its shape during action Dramatic squashing and stretching Object looks soft and pliable Object looks heavy Motion blur Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation
Timing Define the weight, size, and personality of objects by adjusting the spacing of actions Spend the right amount of time preparing for, delivering, and following up on each action Too much time and the audience s attention wanders Too little and they may miss the action Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation
Anticipation Catch the audience s eye, prepare them for next action Show the windup Tell the audience what you are going to do before you do it Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation
Staging Present the idea so that it is unmistakably clear Stage actions, personalities, expressions, moods Direct the audience s attention in the scene Pixar, Luxo Jr.
Follow through / Overlapping action Terminate an action and establish its relationship to the next action Opposite of anticipation: Remind the audience of what just happened Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation
Slow in, slow out Adjust the spacing of in-between frames to achieve subtlety of timing and movement Stretch out time to emphasize important parts of the action Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation
Exaggeration Accentuate the essence of an idea via the design and action Exaggerate geometric deformation and timing Pixar, The Incredibles
Arcs Use smooth paths in the animation state space Smooth paths provide more natural motion and animation Move the parameters along smooth trajectories (e.g., splines) Linear head turn Spline head turn Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation
Secondary action Show the action of an object resulting from another action Makes things more believable, but mustn t distract the audience Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation
Appeal Create actions and designs the audience enjoys watching Pixar, Toy Story
Physics-based animation Motion and behavior can be simulated Physics can be used to model Mechanics: Gravity, momentum, collisions, friction Fluid mechanics: Flow, viscosity, drag, etc. Deformation: Flexibility, elasticity Fracture: How and when things break James O Brien and Jessica Hodgins
Physics-based vs. True physics Traditional animation principles equally valid for computer animation Must control physics-based simulation to apply these principles Must be able to tweak the physics to get the desired behavior Must be able to control the starting and ending points (and sometimes the entire path) of the motion
Challenge: Real-time simulation Film 24 frames per second (1 hr = 86,400 frames) Video 30 frames per second (1 hr = 108,000 frames) Games 60 frames per second (1 hr = 216,000 frames) In real-time Flexible
Offline animation: anything goes
Cartoons -> Cartoon UIs Changes in the UI can be sudden, unexpected, disorienting User loses track of causal relationship Apply animation principles to create smoother transitions Provide visual cues before/during/after transition
Cartoon UIs: Solidity Solid drawing (squash and stretch) objects arrive from off screen or grow from a point menus and arrows transform smoothly from a button to an open menu transfer of momentum as objects collide Motion blur connect old and new locations Dissolves when changing object layering Bay-Wei Chang and David Ungar, Animation: from cartoons to the user interface In Proceedings of UIST 93
Cartoon UIs: Exaggeration Anticipation objects preface movement with small, quick contrary movement Follow through objects come to a stop and vibrate into place Bay-Wei Chang and David Ungar, Animation: from cartoons to the user interface In Proceedings of UIST 93
Cartoon UIs: Reinforcement Slow in, slow out for object movement, resizing, and dissolving Arcs objects travel along curves when moving non-interactively Bay-Wei Chang and David Ungar, Animation: from cartoons to the user interface In Proceedings of UIST 93
Gnutellavision [Yee et al.] Ka-Ping Yee et al. Animated Exploration of Graphs with Radial Layout, Proceedings of InfoVis 01 http://people.ischool.berkeley.edu/~rachna/courses/infoviz/gtv
Does animation improve understanding? Drawbacks: Difficult to see details when they move quickly Difficult to estimate trajectories Difficult to track a large number of targets/motions May wrongly infer causality or anthropomorphize May lack appropriate interactivity Hybrid solution? Coarse segmentation: by object Finer segmentation: by action Barbara Tversky et al. Animation: does it facilitate? International Journal of Human-Computer Studies, 2002
Does animation improve understanding? Studies of algorithm animations and complex processes Higher subjective rating and greater accuracy with animation Most effective when used in conjunction with explanations Must incorporate interactive viewing controls Colleen Kehoe et al., Rethinking the evaluation of algorithm animations as learning aids: an observational study International Journal of Human-Computer Studies, 2001
Motion paths Trajectories/transitions in a static image Marcel Duchamp. Nude Descending a Staircase Dan Goldman et al. "Schematic Storyboarding for Video Visualization and Editing, SIGGRAPH 06
Phosphor and Drag-and-pop [Baudisch et al.] Visual cues Afterglow reminds user of transitions Rubber bands suggest future transitions Patrick Baudisch et al., Microsoft Research http://www.patrickbaudisch.com/projects/phosphor http://www.patrickbaudisch.com/projects/dragandpop