let leaves = []; // array of leaves

​

function setup() {

  createCanvas(400, 400);

​

  for (let i = 0; i < 10; i++) {

    leaves[i] = new FallingLeaves(random(width), random(height));

  }

​

  for (let i = 0; i < 30; i++) {

    drops[i] = new RainDrops(random(width), random(height));

  }

}

​

function draw() {

  background(203, 203, 187, 15);

​

  //drawing leaves in the background

​

  for (let i = 0; i < leaves.length; i++) {

    leaves[i].leafbody();

    leaves[i].shake();

  }

​

  //drawing drops in the foreground

​

  for (let i = 0; i < drops.length; i++) {

    drops[i].body();

    drops[i].move();

  }

}

​

//the rain drop object

​

class RainDrops {

  constructor(dropX, dropY) {

    this.dropx = dropX;

    this.dropy = dropY;

  }

​

  body() {

    //assigning color and shape to the drops

​

    noStroke();

    fill(95, 121, 158, 40);

    ellipse(this.dropx, this.dropy, 5, 15);

  }

​

  move() {

    // movement of drops

​

    this.dropy++;

​

    if (this.dropy > height) {

      this.dropy = 0;

    }

  }

}

​

//the leaf object

​

class FallingLeaves {

  constructor(leafX, leafY, leafX1, leafY1, leafX2, leafY2) {

    this.leafX = leafX;

    this.leafY = leafY;

    this.leafX1 = leafX1;

    this.leafY1 = leafY1;

    this.leafX2 = leafX2;

    this.leafY2 = leafY2;

  }

​

  leafbody() {

    //assigning color and shape to the leaves

    stroke(64, 75, 35);

    strokeWeight(4);

    // noFill();

    triangle(

      this.leafX,

      this.leafY,

      this.leafX1,

      this.leafY1,

      this.leafX2,

      this.leafX2

    );

  }

​

  shake() {

    // movement of leaves

    this.leafX = this.leafX + random(-5, 5);

    this.leafY = this.leafY + random(-5, 5);

    this.leafX1 = this.leafX1 + random(-5, 5);

    this.leafY1 = this.leafY1 + random(-5, 5);

    this.leafX2 = this.leafX2 + random(-5, 5);

    this.leafY2 = this.leafY1 + random(-5, 5);

  }

}

​