Practice 3.5: Snowfall
Make a program that uses an array of objects to make animated snowfall
REQUIREMENTS
Your program must use an array of objects to display snow falling.
STEP BY STEP
Click here to download a running example of this project.
Part A - Simple Snowflake Class
Create a new tab by clicking on the downward triangle next to your main tab.
Select "New Tab" and call the tab Snowflake
In this new tab, we'll define a snowflake class
To get started, we'll include the following code:
class Snowflake // This means we're defining a class - like we did with Robots!
{
float x; // This is the data belonging to the class
float y; // Every snowflake has its own x and y position
Snowflake() // This is the constructor. It's called when the object is made.
{ // Think of it like the setup() for each object.
x = random(width);
y = random(height);
}
void render() // This method is called render(). That's just a programming word
{ // that refers to drawing stuff on the screen.
fill(255);
ellipse(x, y, 10, 10); // Later on we'll add another method to handle movement.
}
}
Right click on the triangle next to the tabs to make a new tab.
Your project isn't ready to run yet! Let's add some basic code to main to get it started.
Part B - A Single Snowflake
We're going to add some temporary code to show you how this works with a single snowflake
You'll need to delete some of this later when we replace it with an array!
At the top of your program, declare a variable of type Snowflake named tempSnow
Snowflake tempSnow; // This declares a single snowflake
Write a setup() method...
Set the window size
Suggested size: 800 x 600
Initialize the snowflake
tempSnow = new Snowflake(); // This calls the Snowflake constructor, initializing it
Write a draw method
Draw a blue background
Tell the snowflake to render itself
tempSnow.render(); // This calls the Snowflake's render method
Your program should show a blue background. Make sure the array is both declared and initialized!
This seems like a lot of work to just get a single ellipse! I know! But trust me, the magic is about to happen.
We're going to change it to use an Array and then we'll add in some movement. Be patient.
Part C - Using An Array of Objects
We're going to replace tempSnow with an array of Snowflakes.
The code segment below to see how your main tab should look.
Red and crossed out means old code we are deleting
Aqua means new code we're adding to replace it
Snowflake tempSnow
Snowflake[] snowflakes;
void setup()
{
size(800, 600);
tempSnow = new Snowflake
snowflakes = new Snowflake[500];
for(int i = 0; i < snowflakes.length; i++)
{
snowflakes[i] = new Snowflake();
}
}
void draw()
{
background(80, 140, 255);
snow.render();
for(int i = 0; i < snowflakes.length; i++)
{
snowflakes[i].render();
}
}
I want to highlight one special part. In setup(), notice that we need to initialize the array itself and every single snowflake in the array. It's easy to forget to do both.
If you don't initialize each snowflake, you'll have a container but nothing to store in it. This will give you an error called a NullPointerException.
Now we are showing 500 snowflakes. They're not moving yet. We're going to add that in with the next step.
Since we're using a class, we can have them be different in many ways - they won't just move vertically like we did in the Bubbles project.
Part C - Simple Movement
In your draw() method, add a line that calls a method called update() for each snowflake inside the loop that tells them to render
for(int i = 0; i < snowflakes.length; i++)
{
snowflakes[i].update();
snowflakes[i].render();
}
Now go to your Snowflake tab and write a method called update().
This method should change the snowflake's x and y position in some way.
Make sure that they loop when they hit the bottom of the screen.
Your bubbles should be moving downward and wrapping. They may be moving sideways too!
Part D - More Data!
Modify your Snowflake class so every Snowflake has five variables: x, y, xSpeed, ySpeed, and radius
In the constructor, set starting random xSpeed, ySpeed, and radius within appropriate ranges
Hint: You'll want your ySpeed to be a positive number, and your xSpeed can go either way
In your update method...
Instead of changing x by a set value, change it by xSpeed
Instead of changing y by a set value, change it by ySpeed
Make sure you're wrapping on all sides that a snowflake could leave the screen on
In your render method...
Use noStroke() to get rid of the outline
Make sure the ellipse isn't always 10 by 10, but rather sized based on the snowflake
Snowflakes should move downward and to the right or left at different speeds. Every snowflake should be a different size.
EXPANSION IDEAS
Use images for the background or the snowflakes
Make each snowflake have its own color
Make each snowflake change speed over time
Make faster snowflakes larger and smaller snowflakes slower to create a depth of field effect
This is shown in Mr. M's running example above