tutorials / processing / arrays

# 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

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

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

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

## 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:

• Give it an array type. An array type is a normal type with square brackets `[]` after it, meaning that the variable will hold multiple values of that type.
• Give it a name.
• Give it an array value. An array value is multiple values inside curly brackets `{}` and separated by commas.

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!

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

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

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

• Create a program that shows a ball bouncing around the screen. Make it so there are 10 (or 100, or 1000…) balls bouncing around. Make all of the balls have random positions, speeds, colors, and sizes.
• Make it so a new ball is automatically added every 5 seconds. Hint: check out the `append()` function in the Processing reference!
• Create a function that takes an array as a parameter and return a new array that contains the same values, except the values are now sorted in order. There are a ton of sorting algorithms, and this is a huge subject in computer science.