animation and cs philip chan. animation hand-drawn early disney movies
TRANSCRIPT
![Page 1: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/1.jpg)
Animation and CS
Philip Chan
![Page 2: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/2.jpg)
Animation
Hand-drawn Early Disney movies
![Page 3: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/3.jpg)
Animation
Hand-drawn Early Disney movies
Computer-drawn Pixar movies
![Page 4: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/4.jpg)
Animation
A sequence of drawings Shown to the audience quickly
“flip book”
![Page 5: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/5.jpg)
A simple animation
A stick figure kicking a ball What are the basic shapes that you need?
![Page 6: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/6.jpg)
A simple animation
A stick figure kicking a ball What are the basic shapes that you need?
lines circles
![Page 7: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/7.jpg)
Drawing a Line
![Page 8: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/8.jpg)
Drawing a Line
Input Starting point: (x1, y1) Ending point: (x2, y2)
Output A line from (x1,y2) to (x2, y2)
How?
![Page 9: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/9.jpg)
Drawing a Line
Same as plotting an equation on graph paper
![Page 10: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/10.jpg)
Drawing a Line
Same as plotting an equation on graph paper Given an equation: y = f(x)
![Page 11: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/11.jpg)
Drawing a Line
Same as plotting an equation on graph paper 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
![Page 12: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/12.jpg)
Equation for a Line
What is the equation for a line?
![Page 13: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/13.jpg)
Equation for a Line
What is the equation for a line? y = mx + b What is m? What is b?
![Page 14: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/14.jpg)
Equation for a Line
Given (x1, y1) [start] and (x2, y2) [end]? How to determine m and b?
![Page 15: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/15.jpg)
Finding Slope m(x2, y2)
(x1, y1)
![Page 16: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/16.jpg)
Finding Slope m(x2, y2)
(x1, y1)
?
![Page 17: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/17.jpg)
Finding Slope m(x2, y2)
(x1, y1)
y2-y1
?
![Page 18: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/18.jpg)
Finding Slope m
m = rise / run
(x2, y2)
(x1, y1)
y2-y1
x2-x1
![Page 19: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/19.jpg)
Finding Slope m
m = rise / run m = (y2 – y1) / (x2 – x1)
(x2, y2)
(x1, y1)
y2-y1
x2-x1
![Page 20: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/20.jpg)
Finding y-intercept b
y = mx + b Plug in the calculated m and given (x1,y1)
y1 = m*x1 + b Solve for b
![Page 21: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/21.jpg)
Finding y-intercept b
y = mx + b Plug in the calculated m and given (x1,y1)
y1 = m*x1 + b Solve for b
b = ?
![Page 22: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/22.jpg)
Finding y-intercept b
y = mx + b Plug in the calculated m and given (x1,y1)
y1 = m*x1 + b Solve for b
b = y1 - m*x1
![Page 23: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/23.jpg)
Calculating Slope
m = slope = (y2 – y1) / (x2 – x1) Could have a problem?
![Page 24: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/24.jpg)
Calculating Slope
m = slope = (y2 – y1) / (x2 – x1) Could have a problem?
x2 – x1 could be zero Division by zero! What kind of line is that?
![Page 25: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/25.jpg)
Vertical Lines
x1 is the same as x2 Don’t need the equation Change y values from y1 to y2
Without changing x
![Page 26: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/26.jpg)
Equation for a Line -- Summary
Given (x1, y1) [start] and (x2, y2) [end]
y = mx + b
m = (y2 – y1) / (x2 – x1) If x2 and x1 are not the same
b = y1 - m*x1
![Page 27: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/27.jpg)
Drawing a Line (reminder)
Same as plotting an equation on graph paper 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
![Page 28: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/28.jpg)
Algorithm Summary
If not a vertical line Find equation for the line
By calculating slope (m) and y-intercept (b) For each x value from x1 to x2 (domain)
Calculate corresponding y value Plot the (x, y) pair
Else For each y value from y1 to y2
Plot the (x, y) pair
![Page 29: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/29.jpg)
Drawing a Circle
![Page 30: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/30.jpg)
Drawing a Circle
Input Center (a, b) Radius r
Output A circle centered at (a,b) with radius r
![Page 31: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/31.jpg)
Drawing a Circle
Similar to a line Find the equation Sample x values
Calculate the corresponding y values Plot the (x,y) pairs
![Page 32: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/32.jpg)
Equation for a Circle
(a,b)
(x,y)
r
![Page 33: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/33.jpg)
Equation for a Circle
(a,b)
(x,y)
r
![Page 34: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/34.jpg)
Equation for a Circle
(a,b)
(x,y)
r
?
![Page 35: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/35.jpg)
Equation for a Circle
(a,b)
(x,y)
r
x-a
?
![Page 36: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/36.jpg)
Equation for a Circle
(a,b)
(x,y)
r
x-a
y-b
![Page 37: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/37.jpg)
Equation for a Circle
(𝑥−𝑎)2+(𝑦−𝑏)2=𝑟2(a,b)
(x,y)
r
x-a
y-b
![Page 38: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/38.jpg)
Equation for a Circle
We want to sample x and get y values Solve for y
![Page 39: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/39.jpg)
Equation for a Circle
We want to sample x and get y values Solve for y
![Page 40: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/40.jpg)
Equation for a Circle
We want to sample x and get y values Solve for y
![Page 41: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/41.jpg)
Equation for a Circle
We want to sample x and get y values Solve for y
![Page 42: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/42.jpg)
Domain of x Values
(a,b)
(x,y)
r
x-a
y-b
(?,?)(?,?)
![Page 43: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/43.jpg)
Domain of x Values
(a,b)
(x,y)
r
x-a
y-b
(a+r, b)(a-r, b)
![Page 44: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/44.jpg)
Each x Value has Two y Values
(a,b)
(x,y)
r
x-a
y-b
(a+r, b)(a-r, b)
![Page 45: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/45.jpg)
Each x Value has Two y Values
![Page 46: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/46.jpg)
Algorithm Summary
For each x value from a-r to a+r (domain) Calculate the corresponding two y values
Using the equation for a circle Plot the two (x,y) pairs
![Page 47: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/47.jpg)
Drawing a Filled Circle
![Page 48: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/48.jpg)
Fill the Circle with a Color
Ideas?
![Page 49: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/49.jpg)
Fill the Circle with a Color
How would you systematically fill it by hand?
![Page 50: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/50.jpg)
Fill the Circle with a Color
Hint: you have two y values for each x
![Page 51: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/51.jpg)
Algorithm Summary
For each x value from a-r to a+r (domain) Calculate the corresponding two y values (y1
and y2) Using the equation for a circle
Draw vertical line between (x,y1) and (x,y2)
![Page 52: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/52.jpg)
Drawing a Moving Ball
![Page 53: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/53.jpg)
Drawing a Moving Ball
Basic ideas for moving a ball?
![Page 54: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/54.jpg)
Drawing a Moving Ball
Drawing the ball in a different location for each frame/image
Sequence of images flipbook
![Page 55: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/55.jpg)
Moving a Ball in a Straight Line
Input Center of ball and starting point (x1,y1) Radius of ball r Ending point (x2, y2)
Output Moving a ball with radius r
from (x1, x2) to (x2, y2)
![Page 56: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/56.jpg)
Moving a Ball in a Straight Line
Redraw the ball At a different center Along a straight line
Using the equation for a line
![Page 57: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/57.jpg)
Two Approaches to a Moving Ball
1. Multiple pictures Each picture is different
Ball at different locations
![Page 58: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/58.jpg)
Two Approaches to a Moving Ball
1. Multiple pictures Each picture is different
Ball at different locations
2. One picture Edit the picture
Ball at different locations
![Page 59: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/59.jpg)
Two Approaches to a Moving Ball
1. Multiple pictures Each picture is different
Ball at different locations
2. One picture Edit the picture
Ball at different locations
Tradeoffs? When the picture has only a moving ball
![Page 60: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/60.jpg)
Two Approaches to a Moving Ball
1. Multiple pictures Each picture is different
Ball at different locations
2. One picture Edit the picture
Ball at different locations
Tradeoffs? When the picture has only a moving ball When the picture has many stationary objects
(e.g. buildings), and only one moving ball
![Page 61: Animation and CS Philip Chan. Animation Hand-drawn Early Disney movies](https://reader035.vdocuments.site/reader035/viewer/2022062313/56649c765503460f94929d51/html5/thumbnails/61.jpg)
Algorithm Summary (using only one picture) At each (x,y) along a straight line from (x1,y1)
to (x2,y2) Draw a filled circle centered at (x,y) Show the picture Delay/sleep for some time
Why? Erase the filled circle centered at (x,y)
Why? How?