How to create a Snowfall Animation Effect using p5.js ?

Last Updated : 17 Feb, 2023

In this article, we are going to see how to create a snow-falling animation using p5.js. p5.js is a JavaScript library that helps in creating graphics that users can interact with and is easy to use and helps in visualizing different kinds of graphics and animations. This article will show you how to create a snowfall using p5.js.

Approach:

Create an empty array of snowflakes to store all the snowflakes.
In the setup function, initialize the canvas and create a Snowflake object for each snowflake and add it to the snowflake array.
In the draw function, clear the canvas and update and display each snowflake in the snowflakes array.
In the Snowflake class, create a constructor function to initialize the position, velocity, and size of each snowflake.
In the update function, update the position of each snowflake by adding its velocity to its position. If a snowflake falls off the canvas, reset its position to a random position above the canvas.
In the show function, display each snowflake as an ellipse with stroke and fill color, and set the size of each snowflake using its size property.
This is a basic outline of the steps to create a snow-falling animation in p5.js. You can modify and extend this code to add more features to the animation.

Used Functions:

setup(): This function sets up the canvas and creates the initial state of the animation. It also creates a Snowflake object for each snowflake and adds it to the snowflake array.
draw(): This function is called repeatedly by the p5.js library to update and display the animation. It clears the canvas, and updates and displays each snowflake in the snowflakes array.
Snowflake class: This class represents a single snowflake in the animation. It has the following functions:
constructor(): This function initializes the position, velocity, and size of each snowflake.
update(): This function updates the position of each snowflake by adding its velocity to its position. If a snowflake falls off the canvas, it resets its position to a random position above the canvas.
show(): This function displays each snowflake as an ellipse with stroke and fill color, and sets the size of each snowflake using its size property.

These are the main functions used to create the snow falling animation in p5.js.

Example: In this example we are going to create a snowfall animation, using p5.js.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <script src= 
"https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"> 
   </script> 
  
</head> 
  
<body> 
    <h2 style="color: green;">GeeksforGeeks</h2> 
</body> 
<script> 
    let snowflakes = []; 
  
    function setup() { 
        createCanvas(400, 400); 
        for (let i = 0; i < 100; i++) { 
            snowflakes.push(new Snowflake()); 
        } 
    } 
  
    function draw() { 
        background(0); 
  
        for (let i = 0; i < snowflakes.length; i++) { 
            let s = snowflakes[i]; 
            s.update(); 
            s.show(); 
        } 
    } 
  
    class Snowflake { 
        constructor() { 
            this.pos = createVector(random(width), random(-100, -10)); 
            this.vel = createVector(0, random(2, 5)); 
            this.size = random(5, 20); 
        } 
        update() { 
            this.pos.add(this.vel); 
            if (this.pos.y > height) { 
                this.pos.y = random(-100, -10); 
                this.pos.x = random(width); 
            } 
        } 
        show() { 
            stroke(255); 
            strokeWeight(2); 
            fill(255); 
            ellipse(this.pos.x, this.pos.y, this.size, this.size); 
        } 
    } 
</script> 
  
</html>