Processing Tips & Tricks: Iteration/Loops (while, for)

Processing has two different ways to create loops AKA repeat something AKA iterate. Those two options are while and for. A simple rule of thumb for choosing which one to use

  • while: when you want to repeat something, but you don’t know exactly how many times
  • for: when you want to repeat something, and you know the amount of times that you want to do it

But there are other things to also know about while and for. Let’s try to go through them.

While

The while loop structure resembles the if statement, with one key difference: an if statement is only executed once (or 0 times) and the while loop is going to repeat itself as long as the expression is true. Note: Because of this functionality, it is important to make sure that the while does not get stuck in an infinite loop. So make sure that there is a way for the expression to become false.

while (expression) {
  statements
}

In general, you use the while loop when you want to repeat something, but you do not know exactly how many times you want to repeat it. Some examples of cases like these that you might run into:

  • Your program waits for the user to give some sort of input to move on to the next part of your code.
  • Your program waits for a device to connect before moving to the next part of your code. You might run into this in the Electronics for Artists.

Or you can also use the while loop in a way where you create a specific variable that you control to be able to escape from the loop. How is this useful? Let’s say you wanted to draw a bunch of rectangles side by side:

void setup() {
  size(640, 280);
}

void draw() {
  background(255);
  // y is always in the center of the screen
  int y = height/2;
  // using while loop
  int x = 0;
  while (x < width) {
    fill(255);
    rect(x, y, 64, 64);
    fill(0);
    text(x, x, y);
    x = x + 64;
  }
}

Each rectangle is 64 pixels wide and each of them is drawn 64 pixels to the right of the previous rectangle. The x variable is used as a way to be able to escape the while loop

Below is another example using while loops. This code uses two while loops, one for the x and one for the y, to draw a grid of lines.

For

As you can see, when you use the while loop you often need:

  1. A variable that you reset in the beginning (initialization)
  2. An expression that compares that variable to some kind of limit (boolean expression/test)
  3. Some kind of update statement that changes the variable. Often you increment this value by some amount. (update)

This is a very common structure and you often end up using it all the time. Therefore, a specific loop exists to do just this. This is the for loop.

for (init; test; update) {   statements }

Here is the example we did earlier with the while loop converted to use a for loop.

void setup(){
  size(640,280);
}

void draw(){
  background(255);
 	
  // the y is always in the center of the screen
  int y = height/2;
	
  // using the for loop
  for(int x = 0; x<width; x = x +64){
    fill(255);
    rect(x,y,64,64);
    fill(0);
    text(x,x,y);
  }
}

In the examples above, we use the for loop in a structure where the variable controlling the loop is used to directly control our drawing. The variable is called x, we add 64 to the value of x after each loop.

A more common structure is to separate the for loop structure and the variable manipulation. So you will often see something like this:

for(int i = 0; i < 10; i++){
   //your code goes here
}
  • The variable starts from 0 and after each loop we add 1 to the value of i:
    (i++ is the same as i=i+1)
  • The expression we use in the second part (i <10) of the for defines how many times the loop is repeated. In this case the loop runs 10 times.
  • Every time the loop runs, the value of i counts up, and we essentially count from 0 to 9

A detailed example missing here. We are going to make one during the class. -Matti

Examples

Here is an image that is drawn multiple times. The upper row is drawn using a while loop and the lower row is drawn using a for loop. Note the similarities in the code. Using a for loop is often much more convenient, since you anyway need to build the control structure for your expression. I would recommend using the for loop for most of the cases where you need repeat something multiple times.

This is the example we worked on during the class (5/3/2018). I cleaned it up a little bit. This demonstrates the way a for loop can be used for going through an array of values.

The example below shows how you can draw a grid using two nested for loops.