Assumed Knowledge
Learning Outcomes
  • Understand what a variable is
  • Understand how variables are written in processing
  • Write code that requires variables
  • Understand how variables support animation
  • Understand how variables correspond to named memory slots

Variables are a slot of memory in the computer with a name.

Chapters 3 and 4 of Learning Processing by Danel Shiffman.

Expressions or Statements

Every part of a program can be clasified as a statement or an expression and it is useful to do so.

A statement is a section of code that does something. For example, it might update a memory location, or draw something to the screen

An expression is a section of code that has a value. For example 2 has the value 2 (obvioulsy). A more complex example is

int x;
x = 5;

x is also an expression, it’s value is 5.

Rules

  • Values are expressions
  • Variables are expressions
  • Declations (such as int x) are statements
  • Assignments (such as x = 5) are statements

Notice that the assignment statement is made up of two expressions connected with an = symbol?

How memory works

Before we can fully grasp this, we need to update our understanding of how a Processing program runs. In an earlier topic we saw program execution as a conversation between user, compiler, processing and computer. This model still holds but we need to add to it. When processing is doing its thing, it has access to a bank of memory and it might put things in there or read things out of there.

From here on in, we will tend to leave out the conversation because it is the same every time, but we will often look to the memory bank to see what is going on in our program.

We visualise this memory bank as a grid of buckets (we will also call a bucket a “slot in memory”). Each bucket may hold a value. A program with no variables, will have a memory that looks like a grid of empty holes

Whereas a program that is using two slots to hold the values 1 and 15 will look like

15 1

Or those same values might end up in other memory slots (buckets)

15 1

But memory slots don’t just fill themselves, they only get a value if we put one in there. The way to put values in memory slots is to name a slot, then fill it, and that is what we do with variables.

int x;
x = 5;

is processing code to pick a new slot and name it “x” (int x) and put 5 in that slot (x = 5). The end result is memory that looks like this

x 5

Alternately, the same code might make the following situation - we don’t know the exact memory location that will be used, but we do know it will be called x.

x 5

Draw what the computer memory will look like after the following code has run

int y;
int x;

y = 10;
x = y + 5;
Solution x y 15 10

Draw what the computer memory will loop like after the following code has run

int x;
x = 5;
int y;
y = 25;

x = y;
y = x;

Was the result what you expected?

Solution x y 25 25

You might have expected one of the memory slots to hold `5` but if you trace the code, that can't ever happen.

What is the output of the following processing snippet?

int x = 4;
int y = x;
x = 7;
println(y);
Solution

The answer is 4. Some people will think the answer is 7 reasoning that after line 2 x and y are linked but variables don’t work that way. The value in slot x is copied to slot y in line 2 (i.e. 4) but that is the only link between them

Write a processing program that moves a blue circle from the top of the screen to the bottom of the screen over time. If you have forgotten how to put a blue circle on the screen, you should review this previous exercise.

solution

The problem description does not directly relate to variables, so we need to “re-interpret” it to put it into “code-speak”. Another way to consider the problem statement (as a Processing programmer) is “write a program where a blue circle is drawn on the screen and every time it is drawn it moves downwards a little.””

Compared to the solution to the previous exercise, we need to:

  • Introduce the setup and draw functions. You can’t have animated programs without them.
  • Stop using a set-value for the y-position of the circle and introduce a variable for this ypos instead.
  • Start that variable at 0 when the program starts. setup is run once when the program starts, so that is the right place to put it.
  • Clear the background everytime the sketch is drawn so that old circles go away.
  • Change the value of the variable each time the sketch is drawn so it is set to a new value ready for the next screen drawing.
int ypos;

void setup(){
  ypos = 0;
}

void draw(){
  background(255);
  noStroke();
  fill(92, 136, 218);
  circle(width/2, ypos, 20);
  ypos++;
}

Some more details of randomness

In processing, we can get a random real number between 0 and n (including 0 but excluding n) using,

double r = random(n);

If we cast the result to an integer, that integer will be between 0 and n (including 0 but excluding n)

int z = (int)r;

Difficult: Write a processing program that moves a blue circle from the top of the window to the bottom of the window in exactly 200 frames of time, no matter what the size of the window is. If you have forgotten how to put animate blue circle on the screen, you should review this previous exercise.

solution

Here we need to use one variable (the height variable) to determine the value in another variable. Another way to consider the problem statement (as a Processing programmer) is “write a program where a blue circle is drawn on the screen and every time it is drawn it moves downwards a little. The amount it moves downward each time is 1/200th of the height of the window.””

Compared to the solution to the previous exercise, we need to start using a variable to control the speed of the circle. That variable must be a float because we will be dividing the size of the screen by 200 and we have no idea what the size of the screen might be. This means we also need to move to a float for the position on the screen. NB: circle will happily accept an int or a float, so we have no further changes to make there.

float ypos;
float yspeed;

void setup(){
  size(800,800);
  ypos = 0;
  yspeed = height/200;
}

void draw(){
  background(255);
  noStroke();
  fill(92, 136, 218);
  circle(width/2, ypos, 20);
  ypos = ypos + speed;
}

Experiment with this program by changing what is in line 5 and checking the animation still takes the same amount of time.

Hold-on! It’s not working???? This solution is actually wrong thanks to a subtlety of how ints and floats are divided. See what happens when the height of the window goes below 200 (say 100)? The circle does not move. If we “think backwards from the problem to what must be happening” we see that yspeed must be getting set to 0, but how? Well 100/200 is 0.5 in float arithmetic, but it is 0 in int arithmetic. So processing must be using int arithmetic. But why? height is an int, and, because procesing uses the left-most number to decide which type of arithmetic to use, int/float is done in int arithmetic, so we have to convert height to a float first. <aside>“tricky” rules like int/float being different from float/int are called edge cases and are frequent sources of bugs. You can’t remember all the edge cases, so you often need to work backwards and think what “must be” true to find them</aside>

float ypos;
float yspeed;

void setup(){
  size(800,800);
  ypos = 0;
  float h = (float)height;
  yspeed = h/200;
}

void draw(){
  background(255);
  noStroke();
  fill(92, 136, 218);
  circle(width/2, ypos, 20);
  ypos = ypos + yspeed;
}

Experiment with this program. It works this time!

Furthering your understanding