Search form

diamond and ellipse animation frame ellipse bouncing off wall animation frame
From Here to There and Back Again: Loops, Variables and Conditionals in Processing

[Project Narrative] [Instructional Narrative] [Visual Guide]

Project Narrative

This project introduces animation using conditionals, while introducing or reinforcing variables and loops. 

The intention of the project is to lead students through the use of very simple tools as a class, introducing computational thinking via animation. 

Starting Points

The power of computer-based animation is the ability to loop something, to have it repeat over and over again, and to change what happens in each loop. The concepts introduced in this project are basic building blocks for any programming, computer-controlled sculpture, generative art, creative code [etc.] While the visual results are much simpler than students have seen in 3D computer-animated movies, the students will be able to control simple animation without an app or software written by someone else. While we use Processing as a development environment, the basic cocepts covered are transferable to nearly any programming language. 

Project Deliverables

The final project for this is a looping animation in Processing. Students are asked to use the draw loop, variables, conditionals and Processing shapes introduced in Coding Slowly [intro to basic programing with Processing] to develop a complex, geometric animation.

Project Timing

The material is introduced in one continuous lesson, lasting approximately an hour and a half.

Instructional Narrative

 This project introduces the following concepts:
 dynamic processing sketches:
 - void setup() []
 - void draw() []
 - draw is a loop, it continues until the sketch is exited
 - setup happens once, when the sketch begins
 - creating a variable
 - changing a variable
 - incrementing a variable
 - reversing a variable
 conditional statement:
 - if []

Visual Guide

expand all

Step 1: Phase 1: Drawing across a grid


Discuss Processing Grid vs Cartesian Grid []

Discuss number line []
Discuss Cartesian coordinate system that students may be familiar with from geometry []
x is horizontal, in Processing we refer to this as x and as the placement along the width of the sketch
y is vertical, in Processing we refer to this as y and as the placement along the height of the sketch

Discuss Processing coordinates:
Coordinates on the Processing grid go from 0,0 in the upper left corner to the maximum width and height set via size()[]
Ask some questions to see if everyone gets the general idea of adding and subtracting to move on a number line
e.g. If x is at 0 and you wanted to move to the left, what do we need to do to x?
if x is at 10 and we subtract 2 from x, where is x?
Review rect() []
rect(x,y,size of rect width, size of rect height)

Question:  How would we make the rectangle move to the right
Group Exercise: Make the rect move to the right by setting the x coordinate

Step 2: Phase 2: Variables


Variables []

Discuss variables as containers for data, but focus on numbers
int() is a whole number as opposed to float(), a number with a decimal point

Discuss that variable names are arbitrary
there are some words that are reserved, but you can name your variable almost anything

Discuss variables as something that can be changed
int myVariable; // declares the variable, it is an integer. We can store a whole number in this variable
myVariable = 5;
myVariable = 10;

The myVariable is set as 5 first but if we have both of these lines in a row, myVariable will be set to 5, then to 10.

Discuss that variables can stand in for numbers
  A = 5
  B = 6
  A + B = ?

Rewrite code so that we introduce a variable at the top, this is called declaring the variable. This creates a place in the computer's memory that we can use to store an integer, or whole number.
int myX = 10;

We have declared myX, it is an integer, and we are storing the number 10 in this variable.

Question: Ask where the variable would go in the rest of the code. We want to move the rectangle across the horizonal axis.
Solution: Replace the x in the rect() statement with the variable.  
change myX to move the right. You now move the rectangle by changing the variable. While this does not seem very different, it will become very useful.

Step 3: Phase 3: Motion


Remind students that draw is a loop, that it runs until exited. []

60 times a second, Processing will do whatever is the brackets of the draw loop []

Question: What do we want to ask the draw loop to do in order to move our rectangle to the right? 
We want to add what number to the x position to move the rectangle to the right?

Explain incrementing the variable:

It is counterintuitive, but what happens on the RIGHT is processed first and then the RESULT is put into the variable on the LEFT.

First, the right:
myX + 1

Next, the result is put into the variable:
myX = myX + 1;

if myX is set to 10, myX + 1 results in 11, the result is put into myX, the 10 is replaced by 11

myX = myX + 1;

Discuss a few examples so students get the general idea. 

Run the sketch.

Narrate the movement of the rectangle "It's going, it's going, it...goes away."

Discuss where the rectangle is, what values it is going through and how long it will continue (an int can go up to 2,147,483,647)

Aesthetic/philosophical discussion about whether the computer is  still "drawing" the rectangle, do computers have imaginations? If the computer is "drawing" the rect but the rect is no longer in the sketch window, is the rect being drawn?

Step 4: Phase 4: Conditionals

We now want the rectangle to go all the way to the edge, then change direction. 

Question: "IF" I want to tell Processing to make the rectangle go the other way, what word in the english language could I use to indicate that condition? []

Write if statement together, write as pseudocode

Unless a student has previous programming experience, the class
will develop the code above. This is an opportunity to see 
programming logic in action.

myX will be incremented by 1 continuously until it gets to 
401, at which point myX > 400 is TRUE, and the code in the if 
brackets is run. This will subtract 1 from myX, making it
400. The draw loop is run again, and myX is incremented by 1,
making it 401, the loop repeats forever.

Discuss how we might avoid this, let students suggest ways, whether
or not they will work in Processing. 

Discuss the need to introduce a new variable.

Let students discuss how a new variable might work.

Create a variable named speed to be added to myX

Change the conditional to change the value of speed

Step 5: Phase 5: There and Back


Narrate same as before but this time it turns around...and then...
it goes off the left side of the screen


Use another if statement to make the rect return from the left side

Step 6: Phase 6: Expanding


Change the speed of the rect

Change the sketch so that the rectangle moves up and down as well

Contributor(s): Adam Trowbridge, Jessica Parris Westbrook

Updated date: 07/24/2015 - 05:52

Software: processing

Downloadable Content: