Practice 2.3: Balloon
Make 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
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