Scribd
Upload
41 views61 pages

11 Animations

The document provides an overview of animation in programming. It discusses using an animation loop with heartbeats to repeatedly update the world and pause between frames. It then walks through animating a bouncing ball, including initializing velocity, updating position each frame, and reversing velocity when the ball hits a wall to simulate bouncing. Key aspects covered include using variables to track change in position each frame, and changing the sign of one component of velocity when reflecting off a wall.

Uploaded by

daisiesonline
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views61 pages

11 Animations

The document provides an overview of animation in programming. It discusses using an animation loop with heartbeats to repeatedly update the world and pause between frames. It then walks through animating a bouncing ball, including initializing velocity, updating position each frame, and reversing velocity when the ball hits a wall to simulate bouncing. Key aspects covered include using variables to track change in position each frame, and changing the sign of one component of velocity when reflecting off a wall.

Uploaded by

daisiesonline
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 61

Animation

Chris Piech + Mehran Sahami


CS106A, Stanford University

Piech + Sahami, CS106A, Stanford University


Learning Goals
1. Feel more confident debugging
2. Write animated programs

Piech + Sahami, CS106A, Stanford University


You will be able to write Bouncing Ball

Piech + Sahami, CS106A, Stanford University


Great foundation

Piech + Sahami, CS106A, Stanford University


Move to Center

Piech + Sahami, CS106A, Stanford University


In our last episode...

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 make_canvas(width, height, title):

Piech + Sahami, CS106A, Stanford University


Add square

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 make_canvas(width, height, title):

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_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()

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_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()

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_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()

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_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

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_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

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_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

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_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

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_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)

Piech + Sahami, CS106A, Stanford University


You’re now all graphics
programmers!

Woot!

Piech + Sahami, CS106A, Stanford University


End review...

Piech + Sahami, CS106A, Stanford University


How do movies or games
animate?

Piech + Sahami, CS106A, Stanford University


Move to Center

* That’s not
Piech quite CS106A,
+ Sahami, toy story, butUniversity
Stanford it is a start…
Animation Loop

def main():
# setup

while True:
# update world

# pause
time.sleep(DELAY)

Piech + Sahami, CS106A, Stanford University


Animation Loop

Make all the variables


def main():
you need.
# setup

while True:
# update world

# pause
time.sleep(DELAY)

Piech + Sahami, CS106A, Stanford University


Animation Loop

def main():
# setup
The animation loop is a
while True: repetition of heartbeats
# update world

# pause
time.sleep(DELAY)

Piech + Sahami, CS106A, Stanford University


Animation Loop

def main():
# setup

while True:
Each heart-beat, update
# update world the world forward one
frame
# pause
time.sleep(DELAY)

Piech + Sahami, CS106A, Stanford University


Animation Loop

def main():
# setup

while True:
# update world

# pause If you don’t pause,


time.sleep(DELAY) humans won’t be able
to see it

Piech + Sahami, CS106A, Stanford University


Move To Center

def main():
# setup
canvas = make_canvas(CANVAS_WIDTH, CANVAS_HEIGHT)
r = canvas.create_rectangle(0, 0, 100, 100)
while not is_past_center(canvas, r):
# update world
canvas.move(r, 1, 0)
canvas.update()
# pause
time.sleep(DELAY)

Piech + Sahami, CS106A, Stanford University


We are ready…

Piech + Sahami, CS106A, Stanford University


Bouncing Ball

Piech + Sahami, CS106A, Stanford University


Milestone #1

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
First heartbeat

Key variable: how much the ball position


change each heartbeat?
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
Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Second heartbeat

change_x

change_y

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
Third heartbeat

change_x

change_y

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
What happens when we hit a wall?

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
We have this velocity

change_x

change_y

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
Our new velocity

change_y
change_x

When reflecting vertically: change_y = -change_y


Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Seventh heartbeat

change_y
change_x

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
Eighth heartbeat

change_y
change_x

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
Ninth heartbeat

change_y
change_x

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
We want this!

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
This was our old velocity

change_y
change_x

Piech + Sahami, CS106A, Stanford University


Bouncing Ball
This is our new velocity

change_y
change_x

When reflecting horizontally: change_x = -change_x


Piech + Sahami, CS106A, Stanford University
Bouncing Ball
Tenth heartbeat

change_y
change_x

When reflecting horizontally: change_x = -change_x


Piech + Sahami, CS106A, Stanford University
Bouncing Ball

Piech + Sahami, CS106A, Stanford University


Hold up!

def make_ball(canvas):

If you get a copy when you pass a


parameter. Does this copy the
canvas??!!

Large variables (objects) are stored using


a reference. Which is like a URL. The URL
gets copied when you pass the variable
Piech + Sahami, CS106A, Stanford University
How do you share google docs?
Antelope Canyon Article

Key:

https://docs.google.com/document/d/1eBtnEilI3KHe
fFS-kSAOpXqeSXpbfTTMlmOgj6I9dvk/
Piech + Sahami, CS106A, Stanford University
def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_rectangle( … , fill='blue')

stack heap

main

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_rectangle( … , fill='blue')

stack heap
memory.com/42
main memory.com/42

canvas

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_oval( … , fill='blue')

stack heap
memory.com/42
main
canvas 42

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_oval( … , fill='blue')

stack heap
memory.com/42
main
canvas 42

make_ball
canvas

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_oval( … , fill='blue')

stack heap
memory.com/42
main
canvas 42

make_ball
canvas 42

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_oval( … , fill='blue')

stack heap
memory.com/42
main
canvas 42

make_ball
canvas 42

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_oval( … , fill='blue')

stack heap
memory.com/42
main
canvas 42

make_ball
canvas 42

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_oval( … , fill='blue')

stack heap
memory.com/42
main
canvas 42

make_ball
canvas 42

Piech + Sahami, CS106A, Stanford University


def main():
canvas = make_canvas(…)
make_ball(canvas)

def make_ball(canvas):
canvas.create_oval( … , fill='blue')

stack heap
memory.com/42
main
canvas 42

Piech + Sahami, CS106A, Stanford University


When passing variables,
some act just like you are
passing a URL.

That allows functions to


modify the variable

Piech + Sahami, CS106A, Stanford University


When passed as parameters

Variables that act like Variables that act like


their value is copied their URL is copied

boolean canvas
integer pixel
float SimpleImage
string list

Piech + Sahami, CS106A, Stanford University


Learning Goals
1. Feel more confident writing methods
2. Write animated programs

Piech + Sahami, CS106A, Stanford University


Special Graphics Functions
# get the x location of the mouse
mouse_x = canvas.winfo_pointerx()

# move shape to some new coordinates


canvas.moveto(shape, new_x, new_y)

# move shape by a given change_x and change_y


canvas.move(shape, change_x, change_y)

# get the coordinates of a shape


coord_list = canvas.coords(shape)

# return a list of elements in a rectangle area


results = canvas.find_overlapping(x1, y1, x2, y2)

# you can change a shapes color too


canvas.itemconfig(shape, fill=new_color, outline=...)

Come back on Monday to learn about lists!


Piech + Sahami, CS106A, Stanford University
Piech + Sahami, CS106A, Stanford University

You might also like