/* 
Rishabh Patni

Use: Control the snow with the force! (Kidding, use your mouse)

*/

/* MOVE MOUSE TO CHANGE THE DIRECTION AND SPEED OF THW SNOW */

// A variable to hold the new object
var mySnow;

//Initializing an array to hold the multiple new objects
var allMySnow = [];

function setup() {
  createCanvas(600, 600);
 
  // Creating a new object and assigning it to the variable
  mySnow = new Snow();

  // For loop to add objects to the array
  for (var i = 0; i < 800; i++) {
    allMySnow[i] = new Snow();
  }
}

function draw() {
  background("black");

  //Loop over array to draw all snow
  for (var i = 0; i < allMySnow.length; i++) {
    allMySnow[i].display();
    allMySnow[i].move();
  }
}

//Object
class Snow {
  constructor() {
    this.x = round(random(-400, 1000));
    this.y = round(random(0, height));
    this.size = random(2, 8);
    this.speed = random(1, 6);
  }

  display() {
    //Draws the concentric circles
    noStroke();
    fill("white");
    circle(this.x, this.y, this.size);

  }

  move() {
    let dir = map(mouseX, 0, width, -this.speed/5, this.speed/5, true);
    let sp = map(mouseY, 0, height, this.speed/5, this.speed, true);
    //Moves the circles in different speeds
    this.y += sp;
    this.x += dir
    
    //Brings the object back to the top of the canvas
    if (this.y > height) {
      this.y = 0;
    }
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js