If this is your first time reading about Bounce Coding, I recommend you start from the beginning.
Notice how I have a single variable x, that contains an array with 3 values in it. Each value represents the x coordinate of a circle. You can access each value of the array using an integer value called an index. An index value of 0 returns the first value. An index value of 1 returns the second and so on. Can you add a 4th circle by adding another value to the array and using it in another call to the ellipse function?
Let's get back to our Bounce project. I've modified the program from the previous step to use arrays. Each of the 4 variables listed above has been changed to be a three element array. I copied the code that made the circle move, bounce and render three times so there are now 3 differently sized circles, each moving a different speed, in a different y position.
Things to note
- Notice how we copied the same code 3 separate times with the only change being the index into the array to pull out different values for each circle. We'll see how to eliminate this duplicated code in the next step.
- Can you make each circle bounce against the top and bottom of the screen as well?
- If you manage to get the circles bouncing around the screen, you may notice that the circles still pass through each other. When I was first learning to program this was very unsatisfying. It took me years before I learned enough to make them bounce off each other. I'll show you how in one of the following steps.
- For more information on arrays, check out Khan Academy's tutorial.