Piech, CS106A, Stanford University

AnimationChris Piech

CS106A, Stanford University

This is Method Man. He is part of the Wu Tang Clan. J

Piech, CS106A, Stanford University

Learning Goals1. Feel more confident debugging

2. Write animated programs

Piech, CS106A, Stanford University

You will be able to write Bouncing Ball

Piech, CS106A, Stanford University

Piech, CS106A, Stanford University

Goal

Piech, CS106A, Stanford University

Great foundation

Piech, CS106A, Stanford University

Move to Center

Piech, CS106A, Stanford University

Animation Loop

private void run() {// setup

while(true) {// update world

// pausepause(DELAY);

}}

Piech, CS106A, Stanford University

Animation Loop

private void run() {// setup

while(true) {// update world

// pausepause(DELAY);

}}

Make all the variables you need. Add graphics to the screen.

Piech, CS106A, Stanford University

Animation Loop

private void run() {// setup

while(true) {// update world

// pausepause(DELAY);

}}

The animation loop is a repetition of heartbeats

Piech, CS106A, Stanford University

Animation Loop

private void run() {// setup

while(true) {// update world

// pausepause(DELAY);

}}

Each heart-beat, update the world forward one frame

Piech, CS106A, Stanford University

Animation Loop

private void run() {// setup

while(true) {// update world

// pausepause(DELAY);

}}

If you don’t pause, humans won’t be able to see it

Piech, CS106A, Stanford University

Move To Center

private void run() {// setupGRect r = makeRect();while(!isPastCenter(r))

// update worldr.move(1, 0);// pausepause(DELAY);

}}

Piech, CS106A, Stanford University

Bouncing Ball

Piech, CS106A, Stanford University

Milestone #1

Piech, CS106A, Stanford University

Bouncing Ball

First heartbeat

Velocity: how much the ball position changes each heartbeat

Piech, CS106A, Stanford University

Bouncing Ball

First heartbeat

vx

vy

The GOval move method takes in a change in x and a change in y

Piech, CS106A, Stanford University

Bouncing Ball

Second heartbeat

vx

vy

Piech, CS106A, Stanford University

Bouncing Ball

Third heartbeat

vx

vy

Piech, CS106A, Stanford University

Bouncing Ball

What happens when we hit a wall?

Piech, CS106A, Stanford University

Bouncing Ball

We have this velocity

vy

vx

Piech, CS106A, Stanford University

Bouncing Ball

Our new velocity

When reflecting vertically: vy = -vy

vxvy

Piech, CS106A, Stanford University

Bouncing Ball

Seventh heartbeat

vxvy

Piech, CS106A, Stanford University

Bouncing Ball

Eighth heartbeat

vxvy

Piech, CS106A, Stanford University

Bouncing Ball

Ninth heartbeat

vxvy

Piech, CS106A, Stanford University

Bouncing Ball

We want this!

Piech, CS106A, Stanford University

Bouncing Ball

vxvy

This was our old velocity

Piech, CS106A, Stanford University

Bouncing Ball

When reflecting horizontally: vx = -vx

vx

vy

This is our new velocity

Piech, CS106A, Stanford University

Bouncing Ball

When reflecting horizontally: vx = -vx

vx

vy

Tenth heartbeat

Piech, CS106A, Stanford University

Bouncing Ball

Piech, CS106A, Stanford University

A Sticky Situation

This is our new velocity

The ball is bellow the bottom so we reverse its vy

The ball is above the bottom so we reverse its vy

Piech, CS106A, Stanford University

Learning Goals1. Feel more confident writing methods

2. Write animated programs