Lesson 7.3

Arrays of Objects

Watch: Arrays of Objects - p5.js Tutorial

Video for 7.3:

In this lesson we will walk through the process of creating an array (list) of objects, and then calling some functions on each element in that list.

In order to make an arbitrary number of objects, we need to make them from a template called a class.

We can start by writing a class for some object – in this example, balls. We will call the class Ball, which will require a constructor function for the properties that balls are to have.

The properties we wish each ball to have are an x and y coordinate and a velocity along those coordinates. We add those to the constructor function. Each instance of the class that we make will have the values for those parameters that we send to the constructor as arguments.

Now we can add functions or methods to our class.

Now that we have a class we can make an instance of the object.

This is fine is we wanted to make a single object, but in that case it would be odd to have taken the trouble to make a class – we could have just made an object literal. To make an arbitrary number of objects we will create a list of objects using a for loop.

Here is a for loop. We place the objects in a list named newList. We give each ball made an x value of 10, a vx 1 and a vy of 1. We vary the objects by giving them unique y coordinates depending on the value of the variable i used to iterate through the list. When

i y
0 160
1 180
2 200
3 220
4 240

We could place this loop in setup() to make the list of objects, or as an alternative we can write a function that makes the ball list, and call that function whenever wanted – including in setup() .

Here we call the function in setup(). The array variable needs to first be declared.

We can now call the methods for the objects in the list, one at a time, using another for loop.

Example 7.3.1

Exercise 7.3a: Add a color property to the ball class from example 7.3.1. When a new ball is made have it be one of the following colors. ["grey","red","yellow","green","blue","purple","white"]. When the balls bounce off the vertical walls have them randomly change color.

Exercise 7.3b: Instead of having the balls change color whenever they hit the vertical wall, have them only change color randomly when the mouse is pressed..


When we created lists in the past, we built them up one item at a time. By adding them one at a time we were sure that we were not creating any holes in our array. How do we add a new value to a list that is already formed?

If the list is called alist and the value avalue, we want to write

but how do we know the value of i? The value is given by alist.length, since the length of the list is always 1 larger than the last item number for the list. For example, for alist = [1,2,3], alist[2] = 3 = alist.length.

Example 7.3.2: Write a function, addOneToList(), that adds a value to the end of a list and returns that list.

We can try it out by calling it in the console.

There is an array method that is predefined to accomplish this task called push().

Example 7.3.3: Write a function, addOneToList2(), that adds a value to the end of a list and returns that list and uses the push() method.

Again, we can try it out by calling it in the console.

We can apply the same logic if we wish to add one list to another.

Example 7.3.4: Write a function, addLists(), that combines two lists and returns that combined list.

We can accomplish the same using the push() method.

Calling these functions-

Exercise 7.3c Vary the sketch from 7.3b by not having any balls made during setup(), but only where the mouse is clicked. Create an increasingly large array with every mouse click and call the ball methods as before in draw().

Exercise 7.3d Create a new class named Patch. It will be the template for rectangles. The constructor properties should be (x,y,w,h,col). Use it to create an array of squares covering the canvas with random colors.

Exercise 7.3d Here is the canvas after setup() has been called.

Exercise 7.3e Add a function to 7.3e which turns all of the grey squares red when the mouse is clicked.

Exercise 7.3f Add a function to 7.3e which turns all of the squares on the left side red and all of the squares on the right side dodgerblue when the mouse is clicked.