## Practice 2.3: BalloonMake a program with a balloon and clouds that blow in the wind

REQUIREMENTS

• 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

STEP BY STEP

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