Skip to content

Loops 🩵 Arrays#

With arrays and their numeric indexes, I don't think it will be a huge surprise that we can easily combine arrays and loops. For this, by far the most common loop is the for-loop. Let's say we have this code here:

1
2
3
4
5
6
7
8
String[] movies = {
    "Iron Man",
    "The Incredible Hulk",
    "Iron Man 2",
    "Thor",
    "Captain America: The First Avenger",
    "The Avengers"
};

Multiple Lines

Yes, you can write an array over multiple lines. I would suggest indenting the entries by one level. This still is not "a block of code", it's still just a list of strings that we're assigning to our String array variable.

How would we now work with that? Of course, we can still use movies[3] to get to the value "Thor", but let's put this into a loop instead!

continuation! we're assuming the array above!
 9
10
11
for (int i = 0; i < 3; i++) {
    println(movies[i]);
}

This will print the first three entries from that array. We're just using a for-loop to give us numbers from 0 to 2 in the variable i, we then put that variable i into the square brackets to access the value at that index!

The Array's Length#

That for-loop is pretty interesting and useful already, but that array six entries and not just three. How do we print all of them? And what would happen if I removed or added a few entries? This looks terribly brittle1! Whenever I change my array, I now need to also change that for loop? Isn't there a better way?

Yes there is! An array knows how many entries it holds! It knows what we call its "length". Let's print that length:

continuation! we're assuming the array above!
 9
10
println(movies.length);
// should print 6 because we have six entries in that array.

With that new piece of information, can you change the for loop, to run for the correct number of times?

What would the for-loop look like to print all the entries?
continuation! we're assuming the array above!
 9
10
11
for (int i = 0; i < movies.length; i++) {
    println(movies[i]);
}

Yes, we just need to replace our literal value 3 in the for loop with our movies.length which will always be the correct number, even if we change the array later on!

Did you get that right?

Properties

We call .length a "property" of the array. This behaves pretty much exactly like a variable would and you can use it in the exact same places.

You have seen something similar with the mouse wheel event, where we had something similar to a function. That . dot notation will be explained next week in more detail.

Example: Oh Snap!#

Let's start with a more involved example that actually does something. To get there, please take a good look at this piece of code (no, it does not contain an array, yet)!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
float snapAnchor = 150;
float snapDistance = 25;

void setup() {
    size(800, 200);
}

void draw() {
    float possiblySnappedX = mouseX;

    background(120, 120, 180);

    if (abs(possiblySnappedX - snapAnchor) < snapDistance) {
        possiblySnappedX = snapAnchor;
        stroke(255, 0, 0);
    } else {
        stroke(0, 0, 0);
    }

    line(snapAnchor, 0, snapAnchor, height);

    stroke(0, 0, 0);
    circle(possiblySnappedX, mouseY, 50);
}

We draw a circle at the mouse coordinates, but if the mouseX is close to our snapAnchor (line 13), then we snap our circle to its coordinates. Code very similar to this one will be in all the graphical tools you use, this is basically how all guidelines work! Make sure you understand the code above before moving on.

Your graphical tool, though lets you have more than one single guideline, so how do we do that? We don't want to litter our global variables with stuff like this?

Anti-Example!
float snapAnchor1 = 150;
float snapAnchor2 = 200;
float snapAnchor3 = 80;
// ... and so on ...

Instead we want to have a variable that can contain "many" things at once. An Array. This following code is very similar to the code above – in fact, it only differs in three lines (marked below)!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
float[] snapAnchors = {80, 150, 317, 600};
float snapDistance = 25;

void setup() {
  size(800, 200);
}

void draw() {
    float possiblySnappedX = mouseX;

    background(120, 120, 180);

    for (int i = 0; i < snapAnchors.length; i++) {
        float anchorX = snapAnchors[i];

        if (abs(possiblySnappedX - anchorX) < snapDistance) {
            possiblySnappedX = anchorX;
            stroke(255, 0, 0);
        } else {
            stroke(0, 0, 0);
        }

        line(anchorX, 0, anchorX, height);
    }

    stroke(0, 0, 0);
    circle(possiblySnappedX, mouseY, 50);
}

So, in this example, we get to define as many guidelines to snap to as we want!

Change the Guidelines

Copy the Code from above to your Processing Editor. Change the numbers, add or remove a few numbers on line 1 of the code. Does it still run with more (or fewer) guidelines in place?

Relevant excerpt from Learning Processing#

(the section starts at 3:28:02 and runs through 3:40:29, the video should start and stop on these automatically.)

  1. When code breaks easily because of small changes like that, we call that "brittle". Changing a list like that should usually not break the rest of the program. ↩