Practice 3.3: Bubbles
Make a program that uses an array to make bubbles float up the screen


  • 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!


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?