Practice 2.3: Balloon
Make a program with a balloon and clouds that blow in the wind


  • Balloon

    • You must have a balloon that floats upward over time

      • When it hits the top, it wraps back to the bottom

    • If the user presses the left or right mouse button, it accelerates in that direction

      • When it hits the left or right side, it wraps to the opposite side

    • The balloon must have a dangling string that falls below it and billows in the wind

  • Clouds

    • Your program must have three semi-transparent white clouds

    • The clouds must move and wrap in at least one direction


Part A - Drawing The Balloon

    • Declare variables at the top of the program

    • Start xPos and yPos at the middle of the screen using the built-in variables width and height

    • Draw the background, balloon, and string

Starting Outline

float xPos;

float yPos;

void setup()


// Write code here to set xPos to middle of screen

// Write code here to set yPos to middle of screen


void draw()


// Write code here to set background to sky blue
Write code here to set your balloon's color

// Write code here to draw an ellipse at xPos, yPos

// Write code here to draw a line representing the String

// Hint: One point is at xPos, yPos.


Part B - Floating Up!

    • At the top...

      • Create a variable called ySpeed

    • In setup()

      • Give ySpeed a starting value. Try a few values - we want it to go UP.

    • In draw()

      • Make the balloon move up

      • When it goes off the top of the screen, it should wrap back to the bottom

Part B - Example Code:

// Change the balloon's position based on ySpeed, which sets how fast we rise up.

yPos = yPos + ySpeed;

Part C - Wind

    • At the top...

      • Create a variable called xSpeed

        1. This represents how fast the wind moves your balloon

    • In setup()

      • Give xSpeed a starting value. Try a few different values, both positive and negative.

    • In draw()

      • Make your balloon's string bend in the wind

      • Make the balloon go left or right based on wind.

Part C - Example Code:

// Change the String's bottom position based on the wind. The bigger the multiple, the more it bends.

line(xPos, yPos, xPos - xSpeed * 5, yPos + 100);

// Move the whole balloon based on the wind's speed.

xPos = xPos + xSpeed;

Part D - Controlling the Wind

  • In draw()

    • If the user clicks the mouse and it is the LEFT mouse button

      • Decrease xSpeed by 0.2

    • If the user clicks the mouse and it is the RIGHT mouse button

      • Increase xSpeed by 0.2

Part D - Example Code:

// Is the mouse pressed and is it the left button?

if(mousePressed && mouseButton == LEFT)


xSpeed = xSpeed - 0.2;


Part E - Left and Right Wrapping

  • Just like you wrapped from the top of the screen, make sure the Balloon wraps from left to right and right to left.

    • Hint: One side is zero, the other side uses width.

Part F - Cloud

  • Create two variables at the top of the program to represent a cloud's x and y positions.

  • Give the cloud a starting position of your choice

  • Draw the cloud. Be sure to use noStroke() and transparency.

  • Be sure to write stroke(0) afterward. This will enable stroke again - otherwise you'll lose your string!

Starting Outline

float cloudOneX;

float cloudOneY;

void setup()


// Write code here to set cloudX to a point of your choice

// Write code here to set cloudY to a point of your choice


void draw()


noStroke(); // Clouds don't have outlines

fill(255, 255, 255, 50); // Try different alpha values

ellipse(cloudX, cloudY, 200, 100); // Any width and height is okay!

stroke(0); // Turns lines back on


At this point you should have a cloud that doesn't move at a position of your choice.

Part G - Moving Cloud

  • Make the cloud move. You have two options - either is okay:

    • Option #1 - Clouds always move to the right gradually

    • Option #2 - Relate it to wind speed in some way

  • If the cloud goes off the screen, wrap it back to the other side.

Part H - More Clouds

  • Repeat the previous parts to have at least THREE clouds.

    • They must all move and wrap independently

    • They can go the same speed or different speed

    • They can overlap sometimes

    • The clouds should be different sizes

Part I - Cleaning Up Edges <Optional>

  • Modify your program so that all of the transitions on the edges are smooth

  • You may need to add or remove half of an object’s width or height to make it work properly

  • Once it’s done, things won’t “pop” on the edges.

  • Trick: You may need to use && and account for wind direction to make this work in more than one direction