 ## Draw an array of bubbles

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

##### 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.

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.