Animation

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

Martin Wattenberg, “Sand Shrimp” http://www.singlecell.org/july

Perceive a grouping of elements with a common motion

This is why a military vehicle is camouflaged when stationary but less so when moving

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


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


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


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


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”


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


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


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

Secondary action

Show the action of an object resulting from another action

Makes things more believable, but mustn’t distract the audience


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


Cartoon UIs:�Reinforcement

Slow in, slow out for object movement, resizing, and dissolving

Arcs objects travel along curves when moving non-interactively


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

Documents

Animation