Arrays

tutorial processing basic

Now we know how to use variables, functions, and for loops.

So far our variables have held a single value. This tutorial introduces arrays, which are variables that hold multiple values.

Multiple Variables

Let’s start with an example program:

float circleY = 0;
float circleSpeed = 1;

void draw() {
  background(200);

  ellipse(50, circleY, 10, 10);

  circleY += circleSpeed;

  if (circleY < 0 || circleY > height) {
    circleSpeed *= -1;
  }
}

This program creates two variables: circleY and circleSpeed. In the draw() function, a gray background is drawn, and a circle is drawn at 50,circleY. Then circleY is increased by circleSpeed. If circleY becomes less than 0 or greater than height, then circleSpeed gets multiplied by -1.

bouncing circle

In other words, this program draws a circle that bounces between the top and bottom of the window.

The Bad Way

What if we want to add another circle? We might be tempted to just use more variables:

float circleY_0 = 0;
float circleSpeed_0 = 1;

float circleY_1 = 100;
float circleSpeed_1 = 1;

void draw() {
  background(200);

  ellipse(25, circleY_0, 10, 10);
  circleY_0 += circleSpeed_0;
  if (circleY_0 < 0 || circleY_0 > height) {
    circleSpeed_0 *= -1;
  }

  ellipse(75, circleY_1, 10, 10);
  circleY_1 += circleSpeed_1;
  if (circleY_1 < 0 || circleY_1 > height) {
    circleSpeed_1 *= -1;
  }
}

This code uses two sets of variables: circleY_0 and circleSpeed_0, and circleY_1 and circleSpeed_1 to draw two circles that bounce up and down

two bouncing circles

Creating an Array

What if we wanted to add a third ball? Or ten more balls? We could keep adding variables, but that’s going to make our program very long and hard to modify. Instead, we can use an array.

An array is a single variable that holds multiple values. Remember that to create a variable you need to give it a type, a name, and a value. To create an array, you need to do three things:

For example, this line of code creates a float[] array named circleY that holds two values, 10 and 20:

float[] circleY = {10, 20};

Accessing an Array

An array is a variable that holds multiple values. To use an individual value inside an array, you can use the array access operator. The array access operator is an int value inside square brackets []. The int value provides the index of the array value that you want to use. For example, this line of code uses the first value from the array to draw a circle:

ellipse(25, circleY[0], 10, 10);

This line of code does the same thing as when we weren’t using arrays, but now it’s getting the value from an array index instead of from a variable.

Start at Zero

You might notice that we’re using 0 instead of 1 to get the first value from the array. That’s because array indexes start at zero!

To get the second value from the array, we’d use 1 as an index:

ellipse(75, circleY[1], 10, 10);

This can be pretty confusing, but just remember that array indexes start at zero. Think about it this way: if you have an array with ten values, the last index is 9.

Setting an Array Index

Just like we can modify the value a variable holds, we can modify the value an array index holds.

This line of code reassigns the first index of the array to a new value:

circleY[0] = 100;

And this line of code adds 5 to the first array index:

circleY[0] = circleY[0] + 5;

Which can be shortened to:

circleY[0] += 5;

The Bad Way with Arrays

Putting it all together, we could rewrite our program to use arrays instead of single-value variables:

float circleY[] = {0, 100};
float circleSpeed[] = {1, 1};

void draw() {
  background(200);

  ellipse(25, circleY[0], 10, 10);
  circleY[0] += circleSpeed[0];
  if (circleY[0] < 0 || circleY[0] > height) {
    circleSpeed[0] *= -1;
  }

  ellipse(75, circleY[1], 10, 10);
  circleY[1] += circleSpeed[1];
  if (circleY[1] < 0 || circleY[1] > height) {
    circleSpeed[1] *= -1;
  }
}

Now if we wanted to add a third circle, we wouldn’t have to add another variable: we’d just add a value to the circleY and circleSpeed arrays.

But we’d still have to add the code that uses those new values. That’s going to get very annoying, but luckily we can use for loops to make our life easier.

For Loops

Let’s say our circleY array holds ten values. We can write code that draws ten circles:

ellipse(5, circleY[0], 10, 10);
ellipse(15, circleY[1], 10, 10);
ellipse(25, circleY[2], 10, 10);
ellipse(35, circleY[3], 10, 10);
ellipse(45, circleY[4], 10, 10);
ellipse(55, circleY[5], 10, 10);
ellipse(65, circleY[6], 10, 10);
ellipse(75, circleY[7], 10, 10);
ellipse(85, circleY[8], 10, 10);
ellipse(95, circleY[9], 10, 10);

(I’m leaving out the code for moving the circles, but imagine how long that code would be!)

This will work, but notice that this code contains a pattern: it uses an index that starts at 0, increases by 1, and stops at 9.

Notice that the x value of the circles also follows a pattern: it starts at 5, increases by 10, and ends at 95. We can use our first pattern to get this second pattern. We just have to multiply our loop variable by 10 and add 5. (5 equals 0*10+5, 15 equals 1*10+5, 25 equals 2*10+5…)

That means we can rewrite this code to use a for loop instead!

for(int i = 0; i < 10; i++){
  ellipse(i*10+5, circleY[i], 10, 10);
}

This code uses a for loop with a loop variable i that goes from 0 to 9 (when it reaches 10, then i < 10 evaluates to false and the loop exits). Inside the body of the loop, the code uses that loop variable to access every index of the array. It also uses that loop variable to calculate the x value of each circle.

We can rewrite our code to use a for loop along with our array:

float circleY[] = {0, 10, 20, 30, 40, 50, 60, 70, 80, 90};
float circleSpeed[] = {1, 1, 1, 1, 1, 1, 1, 1, 1, 1};

void draw() {
  background(200);

  for(int i = 0; i < 10; i++){
    ellipse(i*10+5, circleY[i], 10, 10);
    circleY[i] += circleSpeed[i];
    if(circleY[i] < 0 || circleY[i] > height){
      circleSpeed[i] *= -1 ;
    }
  }
}

And that’s the cool thing about arrays, especially when you use for loops with them: we now have 10 bouncing balls, without any extra code!

ten bouncing circles

Code Editor

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

Array Length

When using a for loop with an array, we have to know how many values are in the array, so we know which index to stop at. When there are two values, our for loop looks like this: for (int i = 0; i < 2; i++) { and when there are ten values, our for loop looks like this: for (int i = 0; i < 10; i++) {.

In other words, we always want to stop our loop when our loop variable equals the number of variables in our array (also called the length of the array). Since array indexes start at 0, the last index is always at length-1. (If that doesn’t make sense, try saying 5 numbers out loud, starting with zero: what’s the last number you say out loud?)

So if we add a variable to our array initialization (the values in the curly brackets {}), we have to change the check in our for loop. Wouldn’t it be nice if the computer could keep track of that for us?

You guessed it: the computer does kep track of the length of an array. To use the length value, you type .length after the name of an array:

int numberOfValues = lengthX.length;

You can use this length variable exactly like you can any other variable (except you can’t reassign it!), including in a for loop check:

for (int i = 0; i < circleY.length; i++) {

Now if we add values to our arrays, we no longer have to modify the for loop check- the computer will do it for us!

Delayed Initialization

Remember that declaring a variable is when you give it a type and a name, and initializing a variable is when you give it a value. (Then reassigning is when you change the value.)

So far, we’ve been initializing our arrays as soon as we declare them, using values inside curly brackets {}:

float circleY[] = {0, 10, 20, 30, 40, 50, 60, 70, 80, 90};

But what if we don’t know what the values should be yet? In this case, we can delay the initialization of the array.

To create an array without initializing its values, you use the new keyword, followed by the array type, and then you give the array a size inside square brackets [].

This line of code creates an array with ten empty indexes:

float[] circleY = new float[10];

(Technically, the indexes all contain the value 0, but that’s only useful if you want all of your indexes to be 0.)

Now we can set the values in each of the indexes individually:

  circleY[0] = 0;
  circleY[1] = 10;
  circleY[2] = 20;
  circleY[3] = 30;
  circleY[4] = 40;
  circleY[5] = 50;
  circleY[6] = 60;
  circleY[7] = 70;
  circleY[8] = 80;
  circleY[9] = 90;

Or better yet, we can use a for loop:

for(int i = 0; i < circleY.length; i++){
  circleY[i] = (i+1)*10;
} 

Notice that we can use the loop variable in the calculation of the value. That’s because we can get the pattern of the values at each index from the pattern of the index.

This is useful for spacing things out like above, or when you have very large arrays. It’s also useful when you don’t know the values ahead of time.

For example, we could start all of the circles at random positions:

for(int i = 0; i < circleY.length; i++){
  circleY[i] = random(height);
} 

randomly placed circles

You can also use a for loop to initialize both arrays:

float circleY[] = new float[10];
float circleSpeed[] = new float[10];

void setup() {
  for (int i = 0; i < circleY.length; i++) {
    circleY[i] = (i*1) * 10;
    circleSpeed[i] = 1;
  }
}

The Payoff

Now if we want to create a program with 50 circles, we only need to change the lengths of our arrays. The code then handles initializing, drawing, and changing all of them.

float circleY[] = new float[50];
float circleSpeed[] = new float[50];

void setup() {
  
  size(500, 500);
  
  for (int i = 0; i < circleY.length; i++) {
    circleY[i] = (i*1) * 10;
    circleSpeed[i] = 1;
  }
}

void draw() {
  background(200);

  for (int i = 0; i < circleY.length; i++) {
    ellipse(i*10+5, circleY[i], 10, 10);
    circleY[i] += circleSpeed[i];
    if (circleY[i] < 0 || circleY[i] > height) {
      circleSpeed[i] *= -1 ;
    }
  }
}

50 bouncing circles

Imagine how much code this would take if we weren’t using arrays!

Code Editor

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

Summary

Arrays are variables that hold multiple values. By combining them with for loops, we can write programs that handle a ton of data in just a few lines of code.

Remember that array indexes start at 0, which means that the last index is at length-1.

Cheat Sheet

Create an array:

float[] myArray = {1, 2, 3};

Access an array’s first index:

float valueAtFirstIndex = myArray[0];

Create an empty array for delayed initialization:

float[] myArray = new float[10];

Use a for loop to initialize indexes in an array:

for(int i = 0; i < myArray.length; i++){
   myArray[i] = i * 10;
}

Use a for loop to access every index in an array:

for(int i = 0; i < myArray.length; i++){
   println(myArray[i]);
}

Homework

Next: User Input

Go back up