Practice 3.5: Snowfall
Make a program that uses an array of objects to make animated snowfall


  • Your program must use an array of objects to display snow falling.


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.

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);


for(int i = 0; i < snowflakes.length; i++)





    • 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++)





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


  • 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