tutorials / processing / for-loops

For Loops

tutorial processing basic

Now we know how to write code using functions, variables, and if statements. So far our code has worked by executing each line one after the other, so if we wanted to draw three circles, we’d have to write three separate calls to the ellipse() function.

This tutorial introduces for loops, which allow you to repeat work without repeating code.

Patterns

Let’s start with an example program:

line(25, 0, 25, height);
line(50, 0, 50, height);
line(75, 0, 75, height);

This program draws three vertical lines: the first from position 25,0 to 25,height; the second from position 50,0 to 50,height; and the third from position 75,0 to 75,height.

3 lines

In other words, we’re changing the x position of the lines, and then drawing them from the top to the bottom of the window.

If we look closely, we can recognize a pattern in these three lines: the x position starts at 25, then increases by 25, and stops at 75. When we have a pattern like this (start at a number, increase by a number, stop at a number), we can use for loops to follow that pattern to repeat code.

New Syntax

To write a for loop, first type the keyword for, and then in parentheses () you give it three things:

Then inside curly brackets {}, type the code that uses your variable to follow the pattern. Putting it all together, it looks like this:

for(int lineX = 25; lineX <= 75; lineX += 25){
  line(lineX, 0, lineX, height);
}

This is new syntax, so let’s go over it piece by piece:

At the end of each iteration (when the code reaches the closing curly bracket }), a couple things happen:

This might seem like a lot to take in, but you can think about it as just a few steps:

Let’s step through it line-by-line. The for loop creates a loop variable named lineX and sets it to 25. Then the code checks whether lineX <= 75, which evaluates to true, so the body is executed. The body draws a line from 25,0 to 25,height. At the end of the body, 25 gets added to lineX making it 50. Then the code jumps to the top of the for loop and checks whether lineX <= 75. That evaluates to true, so the body is executed and draws a line from 50,0 to 50,height. The body ends, 25 is added to lineX making it 75, and the code jumps back to the top of the loop and checks whether lineX <= 75. That evaluates to true, so the body draws a line from 75,0 to 75,height. The body ends, 25 is added to lineX making it 100, and the code jumps back to the top of the loop. It checks whether lineX <= 75 which now evaluates to false, so the loop exits, the body is not executed again, and the code jumps to the end of the for loop.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The Benefit of For Loops

Our example is pretty simple, but for loops make it very easy to make more complicated patterns. For example, what if we wanted to draw 9 lines instead of 3 lines?

We could write code that draws each line manually:

line(10, 0, 10, height);
line(20, 0, 20, height);
line(30, 0, 30, height);
line(40, 0, 40, height);
line(50, 0, 50, height);
line(60, 0, 60, height);
line(70, 0, 70, height);
line(80, 0, 80, height);
line(90, 0, 90, height);

But this code contains a pattern: the x value starts at 10, increases by 10 each step, and ends at 90. We can use a for loop to do this in just a couple lines:

for(int lineX = 10; lineX <= 90; lineX += 10){
  line(lineX, 0, lineX, height);
}

This code uses a for loop to create a pattern where lineX starts at 10, increases by 10 each iteration, and stops when lineX is greater than 90 (in other words, when lineX <= 90 evaluates to false). During each step of the pattern, the code draws a vertical line using the lineX variable.

9 lines

What if we wanted to draw 50 lines? We can use a for loop to do the pattern for us instead of writing 50 lines of code:

size(510, 100);
for(int lineX = 10; lineX <= 500; lineX += 10){
  line(lineX, 0, lineX, height);
}

50 lines

Nested For Loops

You can put any code inside a for loop- including another for loop!

For example, let’s start with a program that draws a row of circles:

size(100, 300);

for (int circleX = 25; circleX <= 75; circleX += 25) {
  ellipse(circleX, 50, 20, 20);
}

This program creats a 100x300 pixels window, and then uses a for loop to draw three circles: one at 25,50, another at 50,50, and a third one at 75,50. The only thing changing is the circleX variable.

We can think of this for loop as a single unit that draws a row of circles. What if we wanted to draw three rows of circles?

We could use three separate for loops, one for each row:

size(100, 300);

for (int circleX = 25; circleX <= 75; circleX += 25) {
  ellipse(circleX, 50, 20, 20);
}

for (int circleX = 25; circleX <= 75; circleX += 25) {
  ellipse(circleX, 150, 20, 20);
}

for (int circleX = 25; circleX <= 75; circleX += 25) {
  ellipse(circleX, 250, 20, 20);
}

This code works, but it’s going to be annoying if we want to add another circle to each row, or change the diameter of the circles: we’d have to change the code in three different places.

Looking at the vertical position of each row, you might notice a pattern: it starts at 50, increases by 100 each step, and ends at 250. This sounds like a job for another for loop!

size(100, 300);

for (int circleY = 50; circleY <= 250; circleY += 100) {

  for (int circleX = 25; circleX <= 75; circleX += 25) {
    ellipse(circleX, circleY, 20, 20);
  }
}

The outer for loop creates a loop variable named circleY and sets it to 50. Then it checks whether circleY <= 250, which evaluates to true. Then the body of the outer loop is another for loop. The inner for loop creates a loop variable called circleX and sets it to 25. The body of the inner loop calls the ellipse() function to draw a circle at circleX,circleY, which is 50,25. Then the inner loop adds 25 to circleY, making it 50. The code jumps back to the beginning of the inner loop, checks that circleX <= 75, and repeats the body of the inner loop to draw a circle at 50,50. The inner loop adds 25 to circleX again, making it 75, then jumps back up to check that circleX <= 75. It is, so it executes the body again to draw a circle at 75,50. The inner loop adds 25 to circleY, making it 100. The code jumps back to the top of the inner loop and checks whether circleX <= 75 which evaluates to false this time, so the inner loop exits. That brings us to the end of the outer loop body, so the outer loop adds 100 to circleY making it 150. The code jumps to the top of the outer loop, checks that circleY <= 250, and then executes its body. This does the inner loop all over again, except now circleY is 150!

3 rows of circles

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Try thinking about the inner for loop as a single unit, and the outer for loop as a loop that executes that unit multiple times. For example, we could rewrite our program to use functions instead:

void setup() {
  size(100, 300);
}

void draw() {
  for (int circleY = 50; circleY <= 250; circleY += 100) {
    drawCircleRow(circleY);
  }
}

void drawCircleRow(int circleY) {
  for (int circleX = 25; circleX <= 75; circleX += 25) {
    ellipse(circleX, circleY, 20, 20);
  }
}

This program is pretty much identical to our previous program, except it uses functions. We’ve created a drawCircleRow() function that takes a circleY parameter. The drawCirclerow() function uses a for loop to draw a single row of circles. In the draw() function, we use a for loop to call the drawCircleRow() function three times. I’m just showing this example to get you thinking about inner for loops as a single unit.

Summary

A for loop lets you repeat code without writing the same thing over and over again. You should use a for loop when you have code that uses a pattern that starts at a number, increases by a number, and stops at a number.

A for loop inside of another for loop is called a nested for loop. These are useful when your pattern involves more than one number or for working with grids.

Cheat Sheet

for(int lineX = 25; lineX <= 75; lineX += 25){
  line(lineX, 0, lineX, height);
}

cheat sheet

Homework

Next: Arrays