2.1 Introduction to Arrays

What Are Arrays?

Computer scientists spend a lot of time thinking about information. After all, computers are just tools to manipulate pieces of information in certain ways. Before computers were around, humans invented lots of different ways to store information. The library was given the Dewey Decimal system, in which numbers were associated with the information in certain books. That's a pretty complicated way of storing information.

But one way of storing information that you've definitely used before is a list. Maybe you've made a list of people to invite to your birthday. Maybe you made a list of things to buy at the grocery store. Something useful about lists is that they're one object themselves: you don't have to carry around a lot of different scraps of paper containing the name of everything you want to get at the store. You can just carry the list. And lists can change - you can cross something off a list, add something to a list, or replace one element with another. So how can we translate the efficiency and usefulness of a list to coding? Simple: we use an array.

By now, you should understand what a variable is. It's a name that you give to a piece of data or information. You can change the value of the variable, but the name will always stay the same. Sometimes, we need to create many variables, which can get really complicated really quickly. But with arrays, we can store many separate values in one variable name. How does it work?

Think of variables and arrays like buildings. Let's say you want to count the number of people on each floor of a building. If the building only has one floor, it's easy, right? You can just say "The building has 30 people in it." But if we're thinking about the Empire State Building, it's harder than that. You need to find a way to talk about the number of people on each floor of the Empire State Building.

So how would you say that in real life? You'd probably say something like "There are 20 people on the first floor, 30 people on the second floor, 32 people on the third floor…" and so on. And we all know you're talking about the same building, the Empire State Building, you're just referring to each floor separately.

So you can think of an array as something similar. It's a bunch of different values, but with the same name. And we write it in a similar way as we would talk about buildings with floors. If we had a variable that held the number of people on the ground floor of a single-story building, the declaration might look something like this: var building = 30;. But if we're talking about a building with many floors, our array might look like this: building[0] = 25; building[1] = 40, building[2] = 30;. Notice the '[ ]' after the name of our variable? That's where we put the index, or number, of the element, or specific value within the array, that we want to access or change.

Using the syntax, and assuming this is the building we're talking about, what would building[3] be equal to? What about building[1]?

You may have noticed something weird. When I was declaring values in the array, I started with building[0]. Why did I do that, and not start with building[1]? Because in p5, arrays are zero-indexed, which means they start at zero. Think of it like a building that counts the ground floor as zero and starts counting at one after you've gone up a floor.

Here's another way of thinking about what an array looks like.

So here, assuming our array is named "colors," we can access the array using the syntax we learned earlier. Colors[2] would equal 'green', and colors[0] would equal 'red'. What would colors[4] equal? Let's test this, using console.log().

Click here for the example!

Notice that we have two different arrays printing out different types of data to the console!

In p5, arrays can hold any type of data. They can hold numbers, text, or Boolean (true or false) values. We can declare an array like we would a variable, but by listing out the values in the declaration, we can create the array quickly. If I wanted to declare the above "colors" array, I would simply write var colors = [ 'red', 'blue', 'green', 'yellow', 'orange'];

Exercise #1: Make a Building

It’s time to put our new knowledge of arrays to work! We’ve been using the building analogy to describe what an array is, so let’s actually put it into practice and design a building!

Your building can look any way you want – as long as it has three or more floors, all different colors. And how do we store these colors? In an array, of course! You can make each floor an ellipse, a rectangle, even a triangle. But when it comes to using fill() to color each floor, remember -- you should be getting the color value from your array.

Extensions

After you complete your project think about the following and try out this challenge:

1. How could you maybe use another array to make your code even easier to understand and more simple?
2. What other values are you changing for each floor?
3. Could you change the text used for colors to RGB values instead?
4. Is there a way to do that using one array instead of three?