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.





 algorithms sorting


For loop




For example, on the Unit 2 Lab 1 page, Developing a Number Guessing Game with Script Variables , you may choose to explore the concept of a binary search algorithm and to develop an algorithm offline before even opening Snap!. Some teachers have used this approach:

In both of the in-person Number Guessing Game and the Guess My Word games, be animated about the halving process after each clue.
  • First, play a round or two of the Number Guessing Game in small groups or as a class.
  • Then, play a round of 'Guess My Word.' One person selects a (perhaps random) word from a dictionary, and the other person tries to find that word in the dictionary by selecting a word about halfway through the possibilities left and asking if the chosen word is before or after.
  • Then, have a class discussion:Then introduce the idea of writing out an algorithm in regular words (e.g. "prompt the user to pick a number within the range"). Provide chart paper to each group if available.
    • How were we making our guesses?
    • What did we do with the information received (such as "no, the number I'm thinking of is lower", or "no, my word comes after that")?
    Emphasize how the previous guess becomes the new upper bound or lower bound for the new range of possibilities.
  • Encourage students to record the bounds of the range and the number guessed on paper in a new row of a table to help keep track of their algorithm-testing process and to communicate their progress with their group-mates.
  • Now ask students to write instructions for the computer. Their syntax will likely mimic the programming language(s) with which they are most familiar (e.g. Snap!), but they should not be held to this as a constraint.
  • As the very last step, they can code the algorithm in Snap!. If all goes well, the time spent programming in Snap! will be significantly less than the time spent building the algorithm offline as the majority of the debugging will already have been done on paper.


Let’s say I am picking a random number between 1 and 1,000,000

224,031 works

Given only the hints of higher or lower I would begin guessing at


You have just eliminated half of the options. There were 1,000,000 options but now there are only 500,000 options after 1 guess. This slicing continues:

middle of 125,000 and 250,000 is the lower boundary (125,000) + half the distance between the two numbers (62,500)
sooooo 187,500?

Note that regardless of answer the next amount leaves only 31250 options. This is down from 1,000,000 to 31,250, a difference of 968,750. 96.875% bad options eliminated in 4 guesses.

not 224,031 yet … higher

( (upperbound) 250,000 - (lower bound) 224,031 )/ 2 = 12984.5 difference of numbers cut in half
224,031 (lower bound) + 12984.5 (half difference) = 237015.5
lets round for convenience to 237016

227277? in 8 guesses we only have 9739 options left

Well I kept doing this by hand but recognized… I got into coding to make the algorithms do the work for me so I made the following:

Link to number guessing javascript

Now… let me instead copy paste in the results that gets spit out of my script (I love being constructively lazy):

The target number is 481025
Guess #1: 500000?
Guess #2: 250000?
Guess #3: 375000?
Guess #4: 437500?
Guess #5: 468750?
Guess #6: 484375?
Guess #7: 476562?
Guess #8: 480468?
Guess #9: 482421?
Guess #10: 481444?
Guess #11: 480956?
Guess #12: 481200?
Guess #13: 481078?
Guess #14: 481017?
Guess #15: 481047?
Guess #16: 481032?
Guess #17: 481024?
Guess #18: 481028?
Guess #19: 481026?
Guess #20: 481025?
Yes! the secret number was 481025
the answer was found in 20 guesses!
=> ‘EUREKA!!!’

the maximum amount of times it needs to guess is 20. By cutting the number of options in half each step you see the following:

500000 options left after 1 guesses
250000 options left after 2 guesses
125000 options left after 3 guesses
62500 options left after 4 guesses
31250 options left after 5 guesses
15625 options left after 6 guesses
7812 options left after 7 guesses
3906 options left after 8 guesses
1953 options left after 9 guesses
976 options left after 10 guesses
488 options left after 11 guesses
244 options left after 12 guesses
122 options left after 13 guesses
61 options left after 14 guesses
30 options left after 15 guesses
15 options left after 16 guesses
7 options left after 17 guesses
3 options left after 18 guesses
1 options left after 19 guesses
20th answer is the winner in the longest possible path to a solution

Another visualization of it is from the following site:


5 Gifs to Understand Binary Search Trees


Boolean Logic5


More Boolean Logic4


Also, here’s a Google Doodle for G.B.: Birthday Boole4

A good bit-by-bit overview video series:

Little dryer, but the first video does start from the very beginning and has a bit more of the ‘why’:

WarmUpWorksheet-solution.docx11 (877.4 KB)
WarmUpWorksheet.docx15 (868.9 KB)

CompArt 20Slideshow(LoopsConditional)