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

``````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`.

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:

• Declare a variable to keep track of your pattern, and initialize it to the number your pattern starts at: `int lineX = 25;`
• Write a test that evaluates to a `boolean` value of `false` whenever the pattern should stop: `lineX <= 75;`
• Reassign the variable so that it follows the pattern: `lineX = lineX + 25;` (which can be shortened to `lineX += 25`)

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:

• `int lineX = 25;` creates a loop variable with a value of `25`. This only happens once, at the very beginning of the loop.
• `lineX <= 75;` decides when to continue looping. This test is evaluated every step (which is called an iteration) of the pattern, at the beginning of the iteration. Whenever the test evaluates to `false`, the pattern is over and the loop stops iterating.
• `lineX += 25` updates the loop variable. This happens at the end of every iteration, after the body of the loop has run.
• `line(lineX, 0, lineX, height);` uses the `lineX` variable to draw a line in the pattern we gave it.

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

• The code executes your reassignment statement to update the loop variable.
• Then the code jumps back to the beginning of the `for` loop!
• The check is evaluated, and if it’s `true`, the body of the loop is executed again. If it’s `false`, the loop exits and skips over the body.

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

• A loop variable is created and initialized to the first number in the pattern.
• The check is evaluated, and if it’s `false`, the loop exits and its body is skipped. If it’s `true`, then the body is executed.
• After the body executes, the loop variable is updated.
• Then the code jumps back to the beginning of the loop and performs the check again.

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.

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);
}
``````

## 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`!

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);
}
``````

## Homework

• Write a program that gives you the total of 1+2+3+4+…+100. Hint: try it without `for` loops first and try to find a pattern.
• Draw a 10x10 grid that fills up the window, no matter what size the window is.
• Write a program that draws a horizontal gradient. Hint: draw `width` lines, and make each one a darker shade of gray.
• Write a program that makes every pixel in the window a different random color.
• Write a program that draws a target with 10 rings. Hint: try it without `for` loops first and try to find a pattern.
• Create a function that takes two parameters: `targetSize` and `ringCount` and draws a target of that size with that many rings. Call that function with different values to make sure it works.