Processing

Animation

INTRO

• We know that the draw() function is called 60 times per second, and we know how to use operators like + and - to get new values.

Variables

• Reassigning Variables
• float circleY = 50;
• circleY = 100;

​

• Modifying Variables
• float circleY = 50;
• circleY = 100;
• float circleY = height/2;
• float circleY = 50;
• circleY = circleY + 1;

The draw() Loop

• float circleY = 25;

​

• void draw(){
• background(200);
• ellipse(50, circleY, 10, 10);
• circleY = circleY + 1;
• }

Scope

• What if we declared the circleY variable inside the draw() function?
• void draw(){
• float circleY = 25;

​

• background(200);
• ellipse(50, circleY, 10, 10);
• circleY = circleY + 1;
• }

​

• The variable “forgets” its old value
• If you want a variable to remember its value between frames, then you have to declare it at the top of your sketch!

​

• Similarly, what if we declare the circleY variable inside the setup() function?
• void setup(){
• size(200, 200);
• float circleY = 25;
• }

​

• void draw(){
• background(200);
• ellipse(50, circleY, 10, 10);
• circleY = circleY + 1;
• }
• Since we declare the circleY variable inside the setup() function, we can only access it inside the setup() function. So when we try to use it in the draw() function, we’ll get an error.

​

• Since we declare the circleY variable inside the setup() function, we can only access it inside the setup() function. So when we try to use it in the draw() function, we’ll get an error.
• Where you can access a variable is called its scope. So to make sure the variable is in-scope between multiple calls to the draw() function, we have to declare it at the top of the sketch.
• (sketch-level variable)

​

​

​

1. float circleY;

​

• void setup(){
• size(200, 200);
• circleY = height/2;
• }

​

• void draw(){
• background(200);
• ellipse(100, circleY, 20, 20);
• circleY = circleY + 1;
• }

​

​

​

• This program declares the circleY variable at the sketch level. Then in the setup() function, it sets the size and initializes the circleY variable to point to height/2. Note that if we tried this assignment at the top of the sketch, it wouldn’t work because the size hasn’t been set yet! Finally, the draw() funtion uses the circleY variable and then reassigns it to create an animation.

Resetting

• Now we have an animation, but our circle falls off the window and never comes back. That’s not verasaasy interesting. The ball will start fall down from the top, after pass the buttom window.
• float circleY = 25;

​

• void draw(){
• background(200);
• ellipse(50, circleY, 20, 20);
• circleY = circleY + 1;
• if(circleY > height){
• circleY = 0;
• }
• }

Bouncing

• One way to do this is to use another variable to hold the direction the circle should travel.
• float circleY = 25;
• float ySpeed = 1;

​

• void draw(){
• background(200);
• ellipse(50, circleY, 20, 20);
• circleY = circleY + ySpeed;
• }

Now when we detect the circle has fallen off the bottom of the window (when circleY > height), we can reassign the ySpeed variable:

​

​

• float circleY = 25;
• float ySpeed = 1;

​

• void draw(){
• background(200);
• ellipse(50, circleY, 20, 20);
• circleY = circleY + ySpeed;
• if(circleY > height){
• ySpeed = ySpeed * -1; /*bouncing*/
• }
• }

• We can expand that to make the ball bounce off all of the sides of the screen:

​

• float circleX = 50;
• float circleY = 0;

​

• float xSpeed = 1;
• float ySpeed = 1;

​

• void draw() {
• background(200);

​

• ellipse(circleX, circleY, 20, 20);

​

• circleX = circleX + xSpeed;
• circleY = circleY + ySpeed;

​

• if (circleX < 0 || circleX > width) {
• xSpeed = xSpeed * -1;
• }

​

• if (circleY < 0 || circleY > height) {
• ySpeed = ySpeed * -1;
• }
• }

Shortcuts

• circleY = circleY + 10;
• circleY += 10;
• circleY++;