Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford...
Transcript of Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford...
![Page 1: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/1.jpg)
Piech + Sahami, CS106A, Stanford University
AnimationChris Piech + Mehran SahamiCS106A, Stanford University
![Page 2: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/2.jpg)
Piech + Sahami, CS106A, Stanford University
• Turing Award is like the nobel prize in CS
• Professor here at Stanford (CS107E, CS348)
• Founding employee at Pixar
• Wrote RenderMan, won 3 Academy Awards
• And just a really wonderful human.
Turing Award Winner
![Page 3: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/3.jpg)
Piech + Sahami, CS106A, Stanford University
Learning Goals1. Write animated programs
![Page 4: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/4.jpg)
Piech + Sahami, CS106A, Stanford University
You will be able to write Bouncing Ball
![Page 5: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/5.jpg)
Piech + Sahami, CS106A, Stanford University
Great foundation
![Page 6: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/6.jpg)
Piech + Sahami, CS106A, Stanford University
Move to Center
![Page 7: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/7.jpg)
Piech + Sahami, CS106A, Stanford University
In our last episode...
![Page 8: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/8.jpg)
Piech + Sahami, CS106A, Stanford University
Graphics from tkinter (aka tk)
import tkinter
# we write this for you, and include it# in all of your projects!canvas = Canvas(width, height, title)
![Page 9: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/9.jpg)
Piech + Sahami, CS106A, Stanford University
Add square
![Page 10: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/10.jpg)
Piech + Sahami, CS106A, Stanford University
Graphics from tkinter (aka tk)
import tkinter
# we write this for you, and include it# in all of your projects!def Canvas(width, height, title):
![Page 11: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/11.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT, 'Move Square')start_y = CANVAS_HEIGHT / 2 - SQUARE_SIZE / 2
end_y = start_y + SQUARE_SIZE
rect = canvas.create_rectangle(0, start_y, SQUARE_SIZE, end_y, fill='black')canvas.mainloop()
![Page 12: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/12.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT, 'Move Square')start_y = CANVAS_HEIGHT / 2 - SQUARE_SIZE / 2
end_y = start_y + SQUARE_SIZE
rect = canvas.create_rectangle(0, start_y, SQUARE_SIZE, end_y, fill='black')canvas.mainloop()
![Page 13: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/13.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT, 'Move Square')start_y = CANVAS_HEIGHT / 2 - SQUARE_SIZE / 2
end_y = start_y + SQUARE_SIZE
rect = canvas.create_rectangle(0, start_y, SQUARE_SIZE, end_y, fill='black')canvas.mainloop()
![Page 14: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/14.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT, 'Move Square')start_y = CANVAS_HEIGHT / 2 - SQUARE_SIZE / 2
end_y = start_y + SQUARE_SIZE
rect = canvas.create_rectangle(0, start_y, SQUARE_SIZE, end_y, fill='black')canvas.mainloop()
CANVAS_HEIGHT/2
![Page 15: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/15.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT, 'Move Square')start_y = CANVAS_HEIGHT / 2 - SQUARE_SIZE / 2
end_y = start_y + SQUARE_SIZE
rect = canvas.create_rectangle(0, start_y, SQUARE_SIZE, end_y, fill='black')canvas.mainloop()
CANVAS_HEIGHT/2 – SQUARE_SIZE/2
CANVAS_HEIGHT/2
![Page 16: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/16.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT, 'Move Square')start_y = CANVAS_HEIGHT / 2 - SQUARE_SIZE / 2
end_y = start_y + SQUARE_SIZE
rect = canvas.create_rectangle(0, start_y, SQUARE_SIZE, end_y, fill='black')canvas.mainloop()
start_y
end_y
![Page 17: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/17.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT, 'Move Square')start_y = CANVAS_HEIGHT / 2 - SQUARE_SIZE / 2
end_y = start_y + SQUARE_SIZE
rect = canvas.create_rectangle(0, start_y, SQUARE_SIZE, end_y, fill='black')canvas.mainloop()
Some “heavy duty” variables allow you to call functions on them
![Page 18: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/18.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT, 'Move Square')start_y = CANVAS_HEIGHT / 2 - SQUARE_SIZE / 2
end_y = start_y + SQUARE_SIZE
rect = canvas.create_rectangle(0, start_y, SQUARE_SIZE, end_y, fill='black')canvas.mainloop()
(0, start_y)
(SQUARE_SIZE, end_y)
![Page 19: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/19.jpg)
Piech + Sahami, CS106A, Stanford University
You’re now all graphics programmers!
Woot!
![Page 20: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/20.jpg)
Piech + Sahami, CS106A, Stanford University
End review...
![Page 21: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/21.jpg)
Piech + Sahami, CS106A, Stanford University
How do movies or gamesanimate?
![Page 22: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/22.jpg)
Piech + Sahami, CS106A, Stanford University
Move to Center
* That’s not quite toy story, but it is a start…
![Page 23: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/23.jpg)
Piech + Sahami, CS106A, Stanford University
Animation Loop
def main():# setup
while True:# update world
# pausetime.sleep(DELAY)
![Page 24: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/24.jpg)
Piech + Sahami, CS106A, Stanford University
Animation Loop
def main():# setup
while True:# update world
# pausetime.sleep(DELAY)
Make all the variables you need.
![Page 25: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/25.jpg)
Piech + Sahami, CS106A, Stanford University
Animation Loop
def main():# setup
while True:# update world
# pausetime.sleep(DELAY)
The animation loop is a repetition of heartbeats
![Page 26: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/26.jpg)
Piech + Sahami, CS106A, Stanford University
Animation Loop
def main():# setup
while True:# update world
# pausetime.sleep(DELAY)
Each heart-beat, update the world forward one frame
![Page 27: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/27.jpg)
Piech + Sahami, CS106A, Stanford University
Animation Loop
def main():# setup
while True:# update world
# pausetime.sleep(DELAY)
If you don’t pause, humans won’t be able to see it
![Page 28: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/28.jpg)
Piech + Sahami, CS106A, Stanford University
Move To Center
def main():# setupcanvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)rect = canvas.create_rectangle(0, 0, 100, 100)while not is_past_center(canvas, r):
# update worldcanvas.move(rect, 1, 0)canvas.update()# pausetime.sleep(DELAY)
![Page 29: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/29.jpg)
Piech + Sahami, CS106A, Stanford University
We are ready…
![Page 30: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/30.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
![Page 31: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/31.jpg)
Piech + Sahami, CS106A, Stanford University
Milestone #1
![Page 32: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/32.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
First heartbeat
Key variable: how much the ball position change each heartbeat?
![Page 33: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/33.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
First heartbeat
change_x
change_y
The move function takes in a change in x and a change in y
![Page 34: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/34.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Second heartbeat
change_x
change_y
![Page 35: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/35.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Third heartbeat
change_x
change_y
![Page 36: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/36.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
What happens when we hit a wall?
![Page 37: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/37.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
We have this velocity
change_y
change_x
![Page 38: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/38.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Our new velocity
When reflecting vertically: change_y = -change_y
change_xchange_y
![Page 39: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/39.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Seventh heartbeat
change_xchange_y
![Page 40: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/40.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Eighth heartbeat
change_xchange_y
![Page 41: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/41.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Ninth heartbeat
change_xchange_y
![Page 42: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/42.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
We want this!
![Page 43: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/43.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
change_xchange_y
This was our old velocity
![Page 44: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/44.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
When reflecting horizontally: change_x = -change_x
change_xchange_y
This is our new velocity
![Page 45: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/45.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
When reflecting horizontally: change_x = -change_x
change_xchange_y
Tenth heartbeat
![Page 46: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/46.jpg)
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
![Page 47: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/47.jpg)
Piech + Sahami, CS106A, Stanford University
def make_ball(canvas):
Hold up!
If you get a copy when you pass a parameter. Does this copy the
canvas??!!
Python variables are stored using a reference. Which is like a URL. The URL gets copied when you pass the variable
![Page 48: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/48.jpg)
Piech + Sahami, CS106A, Stanford University
Key:
How do you share google docs?Antelope Canyon Article
https://docs.google.com/document/d/1eBtnEilI3KHefFS-kSAOpXqeSXpbfTTMlmOgj6I9dvk/
![Page 49: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/49.jpg)
Piech + Sahami, CS106A, Stanford University
main
heapstack
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_rectangle( … , fill='blue')
![Page 50: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/50.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_rectangle( … , fill='blue')
main
canvas
heapstack
memory.com/42
memory.com/42
![Page 51: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/51.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_oval( … , fill='blue')
main
canvas
heapstack
42
memory.com/42
![Page 52: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/52.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_oval( … , fill='blue')
main
canvas
heapstack
42
make_ball
canvas
memory.com/42
![Page 53: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/53.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_oval( … , fill='blue')
main
canvas
heapstack
42
make_ball
canvas 42
memory.com/42
![Page 54: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/54.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_oval( … , fill='blue')
main
canvas
heapstack
42
make_ball
canvas 42
memory.com/42
![Page 55: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/55.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_oval( … , fill='blue')
main
canvas
heapstack
42
make_ball
canvas 42
memory.com/42
![Page 56: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/56.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_oval( … , fill='blue')
main
canvas
heapstack
42
make_ball
canvas 42
memory.com/42
![Page 57: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/57.jpg)
Piech + Sahami, CS106A, Stanford University
def main():canvas = Canvas(…)make_ball(canvas)
def make_ball(canvas):canvas.create_oval( … , fill='blue')
main
canvas
heapstack
42
memory.com/42
![Page 58: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/58.jpg)
Piech + Sahami, CS106A, Stanford University
When passing variables, some act just like you are
passing a URL.
That allows functions to modify the variable
![Page 59: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/59.jpg)
Piech + Sahami, CS106A, Stanford University
Learning Goals1. Write animated programs
![Page 60: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/60.jpg)
Piech + Sahami, CS106A, Stanford University
ball_colors.py
![Page 61: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/61.jpg)
Piech + Sahami, CS106A, Stanford University
pong.py
![Page 62: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/62.jpg)
Piech + Sahami, CS106A, Stanford University
# get the x location of the mousemouse_x = canvas.get_mouse_x()
# move shape to some new coordinatescanvas.moveto(shape, new_x, new_y)
# move shape by a given change_x and change_ycanvas.move(shape, change_x, change_y)
# get the coordinates of a shapetop_y = canvas.get_top_y(shape)left_x = canvas.get_left_x(shape)coord_list = canvas.coords(shape)
# return a list of elements in a rectangle arearesults = canvas.find_overlapping(x1, y1, x2, y2)
# you can change a shape’s color toocanvas.set_fill_color(shape, new_color)canvas.set_outline_color(shape, new_color)
Special Graphics Functions
![Page 63: Animation...If you don’t pause, humans won’t be able to see it Piech + Sahami, CS106A, Stanford University Move To Center def main(): # setup canvas = Canvas(CANVAS_WIDTH, CANVAS_HEIGHT)](https://reader033.fdocuments.net/reader033/viewer/2022060807/608c6c3399b0a54ee45752f7/html5/thumbnails/63.jpg)
Piech + Sahami, CS106A, Stanford University