Overview
In this learning activity we draw a large number of moving bubbles. We start by drawing one bubble, then draw a couple more. Each bubble requires variables to keep track of their position, and functions to move and display it. We see some repeated code. We then group all x and y positions into arrays, which we then fill and access with for loops. This allows us to create many more bubbles without repeating code.
Instructions
First, let's draw a bubble. Its x and y position are set to a random number in setup Then, each time draw is called, the bubble moves slightly in a random direction (this code is inside the moveBubble function), and drawn by the displayBubble function. Here is the result:
To add a second bubble, we need to add x and y variables for its position, a function that changes their values to move it, and a function that draws the bubble. We can't use the names x, y, moveBubble and displayBubble, as we have used those for the first bubble. For clarity, let's rename them to x1, y1, moveBubble1 and displayBubble1, and then add x1, y2, moveBubble2, and displayBubble2 for the second bubble.
Try adding a third bubble.
You probably noticed that, with each added bubble, the code gets considerable longer. Imagine creating 100 bubbles. We would need 100 variables for all the x positions, 100 variables for the y's, 100 move functions, 100 draw functions. moveBubble78 would need to add to x78, not x77 or x87. With all that copying and pasting, imagine how easy it would be to make a small mistake like that, and how hard it would be to spot it among hundreds and hundreds of code that look awfully similar ––almost identical, in fact.
Here is a better approach to add your third bubble: instead of three variables for x (x1, x2, x3) and three variables for y (y1, y2, y3), let's use arrays. Remember an array is a type of variable that holds a series of elements (see LA 3.2). So let's create one array that holds all three x's, and one array to hold the three y's. We initialize them as empty arrays (lines 1 and 2), so that p5 knows that these variables are arrays, and we can add elements to certain positions, like we do in lines 9 through 18 in setup:
Now let's create a hundred bubbles. You might say the example above isn't that much better than the one before it: there's still a lot of copying and pasting to be done. So let's take one more step. The advantage of using arrays instead of variables is that we can create, modify, and access their elements with for loops. Below, in setup, we use a for loop to initialize all the x and y's positions, another one to move each number a bit in moveBubble, and yet another one to draw all the bubbles in displayBubble. The example below creates 30 bubbles.
The code below draws 30 bubbles. Can you modify it so that it draws 100 bubbles? 300 bubbles? Notice how the code is almost the same (and the same length!) whether we draw three, thirty or three hundred bubbles. Can you change it so that changing the number of bubbles only takes changing one number in the code?
