Practice 3.3: Bubbles
Make a program that uses an array to make bubbles float up the screen
REQUIREMENTS
Your program must use an array to animate bubbles floating up the screen.
Once the basics are done, feel free to expand or change up the project's theme!
STEP BY STEP
Part A - Background
Declare an array and call it yPositions at the top of your program
Write a setup() method...
Set the window size
Suggested size: 800 x 600
Initialize your array to have a number of elements
Suggested length: 40 elements
Write a draw method
Draw a blue background
Your program should show a blue background. Make sure the array is both declared and initialized!
Part B - Initial Placement and Drawing
In your setup() method, loop through yPositions
Set each element of yPositions to a random value between 0 and height.
In your draw method, loop through yPositions
Draw an ellipse with the xPosition based on the current index of the loop, and the yPosition based on the value of yPosition. Consider the example like below. Make sure you understand what each part does.
ellipse(i * 20, yPositions[i], 20, 20);
A bunch of bubbles on the screen. Look closely and you'll notice they are evenly spaced horizontally, but random vertically.
Part C - Movement
In your draw() method inside the loop you just wrote,
Add a line of code that decreases each bubble's yPosition by one.
Add an if statement that checks if the current bubble's yPosition has gone below zero
Set the bubble's yPosition equal to height.
Your bubbles should be moving upward and wrap from the top of the screen
Understanding, Exploration, and a Challenge
This was a really quick practice - your project will be a bit more involved
Make sure you take some time to understand why we're using arrays here.
Think: How many variables would you need to use to do this without loops and arrays?
Feel free to expand and improve your project for practice!
You could change the theme
Replace each bubble with an image
Make the bubbles bounce instead of wrapping
Challenge
How could you keep track of multiple pieces of data at once?
For example, giving each bubble both an xPosition and a yPosition and moving them in two directions?
Can you figure out how to code this?