1) Draw a Bubble, then two, then three
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
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.
2) Create an Array of Bubbles
Here is a better approach to add your third bubble: instead of three variables for x (
x3) and three variables for y (
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
3) Fill the array within a for loop
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?