Lesson 7.1


Watch: What is an array - p5.js Tutorial

Video for 7.1:

Arrays are a special kind of object used to store multiple values in a single variable. The objects we have seen up until now have stored those values as name:value pairs. Arrays are very similar but store values as number:value pairs, where the number is the index or place in the array.

Consider two composite variables, colorObject and colorArray, that hold the value of three numbers corresponding to colors.

How do you access the elements in the compound variable?

Open up the console and add the following at the command line. It will show the value corresponding to the name "red".

Here is another way to access the value corresponding to the name "red".

This second method is similar to how we access elements in an array.

Here is how we find the value of the first element in colorArray.

This difference in how values are accessed indicates when you might want to use a regular object and when an array. If you want to place 50 circles on the screen you will likely number them circle1, circle2, … . It would make sense to place them in an array. However, if you want to store related information, say zip codes, in a composite variable, it would make sense to store them as name:value pairs since you likely will want to reference them by name not number.

Here are two ways to store some zip codes.

The advantage of the first can be seen when you want to get at the information.

If you wanted to know the zip code of Newport it would be easier to find it in an object that contained all of the zip codes in name:value pairs, than in an array. In our list, how would you know it was the third item in the list corresponding to an index number of 2?

How do you add items to objects and arrays in code?

In the console we can see the new values. Note that East Providence was added at the end of the object, but we needed to know where the end was in the array to add it at the end.

If we had placed East Providence with an index of 4 it would have left a hole in the array with value empty.

Exercise 7.1a: Use an array to display the words, red, LimeGreen, and yellow, one at a time an in that order (as if they represented the colors of a traffic signal.) The words for the colors can be used in place of an rgb value. For example, fill("red") gives a red fill just like fill(255,0,0). Have a small circle of the same color accompany the display.

Here are the results from three clicks of the mouse, one at a time.

Exercise 7.1b: Use an array to display the colors, red, LimeGreen, and yellow, one at a time an in that order as if they represented the lights of a traffic signal.

Exercise 7.1c: Have the computer generate some 3 word/phrase poetry. Have it select 3 words or phrases from a list randomly and display them on the canvas in some order. I used the list ["found", "hope", "in", "friendship", "in quiet places", "lost", "time"], but you should make up your own.

Here are three poems from my program.