4! Programming with Animations

Transcription

1 4! Programming with Animations 4.1! Animated Graphics: Principles and History 4.2! Types of Animation 4.3! Programming Animations 4.4! Design of Animations 4.5! Game Physics Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-1

2 Eadweard Muybridge: Chronofotografie Quelle: Wikipedia Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-2

3 J. Stuart Blackton: The Father of Animation Became rapid drawing cartoonist for Thomas A. Edison The Enchanted Drawing 1900 Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-3

4 Problem: How to Create SO Many Pictures? Drawing work for Gertie the Dinosaur Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-4

5 Winsor McKay: Character Animation Gertie the Dinosaur 1914 First character animation First 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) Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-5

6 Walt Disney: Animation Industry Pencil Ink Pen Source: Midori Kitagawa, Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-6

7 In-Between Drawing Key frames: Define the start and end points of a smooth transition In-between frames: Filled in to create the transition Traditional hand-drawn animation: Work split between senior artist and assistant Source: Midori Kitagawa, Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-7

8 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) / steps value(i) = start + delta * i Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-8

9 4! Programming with Animations 4.1! Animated Graphics: Principles and History 4.2! Types of Animation 4.3! Programming Animations 4.4! Design of Animations 4.5! Game Physics Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-9

10 Frame-By-Frame Animation Each image is drawn manually Special tools may be used for previewing the effect! (onion skinning) Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-10

11 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 Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-11

12 Example: Motion Tween in Flash (1) motiontween0.fla Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-12

13 Example: Motion Tween in Flash (2) motiontween1.fla Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-13

14 Example: Tweening Colours in Flash Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-14

15 Example: Tweening Object Size in Flash Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-15

16 Example: Shape Tweening (Morphing) in Flash Shape tweening interpolates between geometric shapes Different way of creation: One layer containing two key frames with the two shapes Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-16

17 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 Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-17

18 4! Programming with Animations 4.1! Animated Graphics: Principles and History 4.2! Types of Animation 4.3! Programming Animations 4.4! Design of Animations 4.5! Game Physics Literature:! W. McGugan 2007 (see above)! K. Peters: ActionScript 3.0 Animation - Making Things Move!!! Friends of ED/Apress 2007!! Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-18

19 Linear Interpolation of Position (Python/Pygame) xstart = 40 xend = 600 steps = 80 #Number of steps deltax = (xend - xstart)/steps frame_no = 1 x = xstart y = 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() Speed of animation depends on computing speed Absolute positioning of objects gives precise control Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-19

20 Interpolation using Fixed Frame Rate xstart = 40 xend = 600 framerate = 30 #frames per second steps = 80 #Number of steps deltax = (xend - xstart)/steps clock = pygame.time.clock() x = xstart y = 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) timepassed = clock.tick(framerate) if x+40 < screen_width: x += deltax pygame.display.update() Speed of animation relative to frame rate Relative positioning of objects leads to simple code Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-20

21 Computation of Speed Frame rate f, e.g. f = 30 frames/s Time between frames t f = 1/f, e.g. t f = 1/30 s = s Number of in-between steps s, e.g. s = 80 Distance d, e.g. d = 560 px Distance of motion per frame: d f = d/s, e.g. d f = 560/80 px = 7 px Speed of animation motion v: v = d f / t f E.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 d f = t f v s = d / d f = d / (t f v) = (f d)/v Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-21

22 Interpolation with Fixed Frame Rate and Speed xstart = 40 xend = 600 framerate = 30 #frames per second speed = 210 #pixels per second clock = pygame.time.clock() x = xstart y = 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) timepassed_secs = clock.tick(framerate)/ if x+40 < screen_width: x += timepassed_secs*speed pygame.display.update() Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-22

23 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) s h = cos(α) v v s v = sin(α) v s v α v = s h 2 + s v 2 s h α = atan (s v / s h ) Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-23

24 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 += ax vy += ay x += vx y += vy (ax, ay) acceleration (vx, vy) velocity Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-24

25 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 Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-25

26 Interpolating Colors red = (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) Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-26

27 Interpolating Colors and Size... x = xstart y = 240 steps = framerate*(xend-xstart)/speed sizefactor = 1 colorfactor = 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)/ if x+80 < screen_width: x += timepassed_secs*speed sizefactor += 1.0/steps colorfactor += 1.0/steps pygame.display.update() Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-27

28 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 Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-28

29 Example: Frame-Dependent Animation in Flash (1) Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-29

30 Example: Frame-Dependent Animation in Flash (2) Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-30

31 Example: Frame-Dependent Animation in Flash (3) Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-31

32 Adding Vertical Movement package { 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; } } } Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-32

33 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! Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-33

34 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 Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-34

35 Animation in JavaFX JavaFX contains pre-defined animation templates Key idea is the mapping from timeline values to actual object values Ludwig-Maximilians-Universität München! Prof. Hußmann! Multimedia-Programmierung 4-35