4 programming with animations - medien.ifi.lmu.de · ludwig-maximilians-universität münchen!prof....

Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung – 4 -

4 ! Programming with Animations

4.1! Animated Graphics: Principles and History4.2! Types of Animation4.3! Programming Animations4.4! Design of Animations4.5! Game Physics

1


Eadweard Muybridge: Chronofotografie• 1830 – 1904

Quelle: Wikipedia2


J. Stuart Blackton: The Father of Animation• 1875 – 1941• Became “rapid drawing cartoonist” for Thomas A. Edison

The Enchanted Drawing1900

3


Problem: How to Create SO Many Pictures?

Drawing work for “Gertie the Dinosaur”

4


Winsor McKay: Character Animation• 1867 – 1934

Gertie the Dinosaur1914

First character animationFirst keyframe animation

“He devised what he called the "McCay Split System", ...Rather than draw each frame in sequence, he would start by drawing Gertie's key poses, and then go back and fill in the frames between.”(Wikipedia)

5


Walt Disney: Animation Industry• 1901 – 1966

Pencil

Pen

Ink

Source: Midori Kitagawa, http://atec.utdallas.edu/midori6


In-Between Drawing• Key frames: Define the start and end points of a smooth transition• In-between frames: Filled in to create the transitionTraditional hand-drawn animation:

Work split between senior artist and assistant

Source: Midori Kitagawa, http://atec.utdallas.edu/midori7


Animation by Interpolation• Key frame:

– Contains manually defined objects & object attributes• In-between frame:

– Object attributes computed automatically• Computation of attribute values:

– Discrete interpolation:» Start and end value given» Intermediate position given by frame number

– E.g. (linear interpolation):delta = (end – start) / stepsvalue(i) = start + delta * i

8



4.1! Animated Graphics: Principles and History4.2! Types of Animation4.3! Programming Animations4.4! Design of Animations4.5! Game Physics

9


Frame-By-Frame AnimationEach image is drawn manually

Special tools may be used forpreviewing the effect! (onion skinning)

10


Keyframe Animation: Motion Tween in Flash• Properties of a (2D) object manipulated by motion tween:

– Position (x and y)– Rotation (z)– Skew/Shear (Neigung)– Size– Colour effects

• Basic idea of graphically creating a motion tween:– Place an object (instance!) on a separate layer– Invoke “Create Motion Tween” (context menu)– Readjust property values graphically or by inspector dialogue for end frame

• Property key frames:– Intermediate frames with individually defined object properties

• Motion path:– Bezier curve, can be adjusted graphically

11


Example: Motion Tween in Flash (1)

motiontween0.fla12


Example: Motion Tween in Flash (2)

motiontween1.fla13


Example: Tweening Colours in Flash

14


Example: Tweening Object Size in Flash

15


Example: Shape Tweening (Morphing) in FlashShape tweening

interpolates between geometric shapes

Different way of creation:

One layer containing two key frames with the two shapes

16


Example: Shape Hints (Flash)Shape hints (Formmarker) enable fine control of shape tweening• Pair of (start/end) points to be mapped on each other in transformation

17



4.1! Animated Graphics: Principles and History4.2! Types of Animation4.3! Programming Animations4.4! Design of Animations4.5! Game PhysicsLiterature: ! W. McGugan 2007 (see above)! K. Peters: ActionScript 3.0 Animation - Making Things Move!! ! Friends of ED/Apress 2007!!

18


xstart = 40xend = 600

steps = 80 #Number of stepsdeltax = (xend - xstart)/stepsframe_no = 1x = xstarty = 240

while True: for event in pygame.event.get(): if event.type == QUIT: exit() pygame.draw.rect(screen,white,Rect((0,0),(scr_width,scr_height))) pygame.draw.circle(screen,red,(x,y),40)

if frame_no < steps+1: x = xstart + deltax*frame_no frame_no += 1

pygame.display.update()

Linear Interpolation of Position (Python/Pygame)

Speed of animation depends on computing speedAbsolute positioning of objectsgives precise control

19


Interpolation using Fixed Frame Ratexstart = 40xend = 600

framerate = 30 #frames per secondsteps = 80 #Number of stepsdeltax = (xend - xstart)/steps

clock = pygame.time.Clock()x = xstarty = 240


timepassed = clock.tick(framerate)

if x+40 < screen_width: x += deltax


Speed of animation relative to frame rateRelative positioning of objectsleads to simple code

20


Computation of Speed• Frame rate f, e.g. f = 30 frames/s

– Time between frames tf = 1/f, e.g. tf = 1/30 s = 0.033 s• Number of in-between steps s, e.g. s = 80• Distance d, e.g. d = 560 px• Distance of motion per frame: df = d/s, e.g. df = 560/80 px = 7 px• Speed of animation motion v:

v = df / tfE.g. v = 7 / (1/30) = 7 · 30 px/s = 210 px/s

• Alternative way of specifying motion timing:Motion speed is defined, distance per frame is computed

df = tf · v s = d / df = d / (tf · v) = (f · d)/v

21


Interpolation with Fixed Frame Rate and Speedxstart = 40xend = 600

framerate = 30 #frames per secondspeed = 210 #pixels per secondclock = pygame.time.Clock()

x = xstarty = 240


timepassed_secs = clock.tick(framerate)/1000.0

if x+40 < screen_width: x += timepassed_secs*speed


22


Speed and Velocity• Speed:

– Magnitude (single number), measured in px/s– Suitable for movement along one axis (e.g. x axis)

• Velocity:– Speed plus direction

Magnitude (px/s) and angle (degrees)– Expressed as a 2D vector:

velocity = (horizontal_speed, vertical_speed)

vsv

sh

sh = cos(α) · vsv = sin(α) · v

α v = √sh2 + sv

2

α = atan (sv / sh)

23


Velocity and Acceleration• Velocity

– is added to the position values in each frame cycle• Acceleration

– is a force changing velocity– Acceleration is added to velocity in each frame cycle– Deceleration is negative acceleration

• Angular acceleration– Acceleration is a 2D vector (or a magnitude plus angle)

vx += axvy += ayx += vxy += vy

(ax, ay) acceleration(vx, vy) velocity

24


Rotation Speed• Speed can also be applied to non-linear movements• Simple example:

– Rotation– Magnitude expressed in degrees / second

• All concepts (computation of speed, acceleration) apply analogously

25


Interpolating Colorsred = (255,0,0)blue = (0,0,255)white = (255,255,255)

def blend_color (color1,color2,blend_factor): red1, green1, blue1 = color1 red2, green2, blue2 = color2 red0 = red1+(red2-red1)*blend_factor green0 = green1+(green2-green1)*blend_factor blue0 = blue1+(blue2-blue1)*blend_factor return int(red0), int(green0), int(blue0)

blend_color(red,blue,colorfactor)

26


Interpolating Colors and Size...x = xstarty = 240steps = framerate*(xend-xstart)/speedsizefactor = 1colorfactor = 0

while True: for event in pygame.event.get(): if event.type == QUIT: exit() pygame.draw.rect(screen,white,Rect((0,0),(scr_width,scr_height))) pygame.draw.circle(screen,blend_color(red,blue,colorfactor),

(x,y),40*sizefactor)

timepassed_secs = clock.tick(framerate)/1000.0

if x+80 < screen_width: x += timepassed_secs*speed sizefactor += 1.0/steps colorfactor += 1.0/steps


27


Frame-Dependent Animation in Flash• Animation:

– Modification of object attributes dependent on time / current frame– How to flexibly react on progress of time?

• ENTER_FRAME event:– Fired every time a new frame is displayed– Requires a special event handler to be registered

• Object-oriented program logic:– All objects have their local methods for dealing with changes

» E.g. by moving their position» MovieClip subclasses inherit e.g. x and y properties

– Enter frame event handler needs to call all necessary update methods

28


Example: Frame-Dependent Animation in Flash (1)

29



30



31


Adding Vertical Movementpackage { import flash.display.*; public class Ball extends MovieClip { public var speed:Number=0; public var moving:Boolean=false; public var limit:Number=0; public var jump:Number = 0; public var toRight = true; public var inLeftHalf:Boolean = true; function update() { if (moving) { x+=speed; if ((x <= 0) || (x+width >= limit)) { speed = -speed; toRight = !toRight; } inLeftHalf = (x+width)*2 <= limit; if ((inLeftHalf && toRight) || (!inLeftHalf && !toRight)) y -= jump; else y += jump; } }}

32


Collision Detection• Moving objects may meet other objects and boundaries

– Collision detection algorithm is responsible for detecting such situations• Simple collision detection:

– Width and/or height, calculated from expected position, is beyond some limit• Potential problem:

– Rounding errors may conceal collision event!

33


Non-Linear Interpolation• EaseIn / EaseOut / EaseBoth:

– Methods of “slowing down” and speeding uo– Frequently used (in small proportions) in sorts– Idea: Start slowly, speed up, “cruise”, slow down, end smoothly

34


Animation in JavaFX• JavaFX contains

pre-defined animation templates

• Key idea is the mapping from timeline values to actual object values

35

4 programming with animations - medien.ifi.lmu.de · ludwig-maximilians-universität münchen!prof....

Documents