Animation and CS Philip Chan Animation n Handdrawn

Animation and CS Philip Chan

Animation n Hand-drawn n Early Disney movies

Animation n Hand-drawn n Early Disney movies n Computer-drawn n Pixar movies

Animation n A sequence of drawings n Shown to the audience quickly n “flip book”

A simple animation n A stick figure kicking a ball n What are the basic shapes that you need?

A simple animation n A stick figure kicking a ball n What are the basic shapes that you need? n lines n circles

Drawing a Line

Drawing a Line n Input n Starting point: (x 1, y 1) n Ending point: (x 2, y 2) n Output n A line from (x 1, y 1) to (x 2, y 2) n How?

Drawing a Line n Same as plotting an equation on graph paper

Drawing a Line n Same as plotting an equation on graph paper n Given an equation: y = f(x)

Drawing a Line n Same as plotting an equation on graph paper n Given an equation: y = f(x) 1. Determine the x interval (domain) 2. Sample x values 3. Calculate the corresponding y values (range) 4. Plot the (x, y) pairs

Equation for a Line n What is the equation for a line?

Equation for a Line n What is the equation for a line? n y = mx + b n What is m? n What is b?

Equation for a Line n Given (x 1, y 1) [start] and (x 2, y 2) [end]? n How to determine m and b?

Finding Slope m (x 2, y 2) (x 1, y 1)

Finding Slope m (x 2, y 2) ? (x 1, y 1)

Finding Slope m (x 2, y 2) y 2 -y 1 (x 1, y 1) ?

Finding Slope m (x 2, y 2) y 2 -y 1 (x 1, y 1) n m = rise / run x 2 -x 1

Finding Slope m (x 2, y 2) y 2 -y 1 (x 1, y 1) x 2 -x 1 n m = rise / run n m = (y 2 – y 1) / (x 2 – x 1)

Finding y-intercept b n y = mx + b n Plug in the calculated m and given (x 1, y 1) n y 1 = m*x 1 + b n Solve for b

Finding y-intercept b n y = mx + b n Plug in the calculated m and given (x 1, y 1) n y 1 = m*x 1 + b n Solve for b n b = ?

Finding y-intercept b n y = mx + b n Plug in the calculated m and given (x 1, y 1) n y 1 = m*x 1 + b n Solve for b n b = y 1 - m*x 1

Calculating Slope n m = slope = (y 2 – y 1) / (x 2 – x 1) n Could have a problem?

Calculating Slope n m = slope = (y 2 – y 1) / (x 2 – x 1) n Could have a problem? n x 2 – x 1 could be zero n Division by zero! n What kind of line is that?

Vertical Lines n x 1 is the same as x 2 n Don’t need the equation n Change y values from y 1 to y 2 n Without changing x

Equation for a Line -- Summary n Given (x 1, y 1) [start] and (x 2, y 2) [end] n y = mx + b n m = (y 2 – y 1) / (x 2 – x 1) n If x 2 and x 1 are not the same n b = y 1 - m*x 1

Drawing a Line (reminder) n Same as plotting an equation on graph paper n Given an equation: y = f(x) 1. Determine the x interval (domain) 2. Sample x values 3. Calculate the corresponding y values (range) 4. Plot the (x, y) pairs

Algorithm Summary n If not a vertical line n Find equation for the line n n By calculating slope (m) and y-intercept (b) For each x value from x 1 to x 2 (domain) n n Calculate corresponding y value Plot the (x, y) pair n Else n For each y value from y 1 to y 2 n Plot the (x, y) pair

Drawing a Circle

Drawing a Circle n Input n Center (a, b) n Radius r n Output n A circle centered at (a, b) with radius r

Drawing a Circle n Similar to a line n Find the equation n Sample x values n n Calculate the corresponding y values Plot the (x, y) pairs

Equation for a Circle (x, y) r (a, b)

Equation for a Circle (x, y) r (a, b)

Equation for a Circle (x, y) r (a, b) ?

Equation for a Circle (x, y) r ? (a, b) x-a

Equation for a Circle (x, y) r (a, b) y-b x-a

Equation for a Circle n (x, y) r (a, b) y-b x-a

Equation for a Circle n

Equation for a Circle n

Equation for a Circle n

Equation for a Circle n

Domain of x Values (x, y) r (? , ? ) (a, b) y-b x-a (? , ? )

Domain of x Values (x, y) r (a-r, b) (a, b) y-b x-a (a+r, b)

Each x Value has Two y Values n (x, y) r (a-r, b) (a, b) y-b x-a (a+r, b)

Each x Value has Two y Values n

Algorithm Summary n For each x value from a-r to a+r (domain) n Calculate the corresponding two y values n n Using the equation for a circle Plot the two (x, y) pairs

Drawing a Filled Circle

Fill the Circle with a Color Ideas?

Fill the Circle with a Color How would you systematically fill it by hand?

Fill the Circle with a Color Hint: you have two y values for each x

Algorithm Summary n For each x value from a-r to a+r (domain) n Calculate the corresponding two y values (y 1 and y 2) n n Using the equation for a circle Draw vertical line between (x, y 1) and (x, y 2)

Drawing a Moving Ball

Drawing a Moving Ball n Basic ideas for moving a ball?

Drawing a Moving Ball n Drawing the ball in a different location for each frame/image n Sequence of images n flipbook

Moving a Ball in a Straight Line n Input n Center of ball and starting point (x 1, y 1) n Radius of ball r n Ending point (x 2, y 2) n Output n Moving a ball with radius r n from (x 1, x 2) to (x 2, y 2)

Moving a Ball in a Straight Line n Redraw the ball n At a different center n Along a straight line n Using the equation for a line

Two Approaches to a Moving Ball 1. Multiple pictures n Each picture is different n Ball at different locations

Two Approaches to a Moving Ball 1. Multiple pictures n Each picture is different n Ball at different locations 2. One picture n Edit the picture n Ball at different locations

Two Approaches to a Moving Ball 1. Multiple pictures n Each picture is different n Ball at different locations 2. One picture n Edit the picture n Ball at different locations n Tradeoffs? n When the picture has only a moving ball

Two Approaches to a Moving Ball 1. Multiple pictures n Each picture is different n Ball at different locations 2. One picture n Edit the picture n Ball at different locations n Tradeoffs? n When the picture has only a moving ball n When the picture has many stationary objects (e. g. buildings), and only one moving ball

Algorithm Summary (using only one picture) n At each (x, y) along a straight line from (x 1, y 1) to (x 2, y 2) Draw a filled circle centered at (x, y) n Show the picture n Delay/sleep for some time n n n Why? Erase the filled circle centered at (x, y) n n Why? How?