var rain_drop = [];

var num_drops = 400;

​

function setup() {

  createCanvas(500, 500);

  frameRate(20);

  for (var i = 0; i < num_drops; i++) {

    rain_drop[i] = new Rain();

  }

}

​

function draw() {

  background(249, 94, 4);

  fill(0);

  for (let x = 0; x < width; x = x + 5) {

    for (let y = 0; y < height; y = y + 5) {

      if (y < height / 4 + 10) {

        ellipse(x + random(width / 20, -width / 20), y, 8, 10);

      } else if (y < height / 2 - 30) {

        ellipse(x + random(width / 20, -width / 20), y, 6, 10);

      } else if (y < (3 * height) / 4) {

        ellipse(x + random(width / 20, -width / 20), y, 4, 10);

      } else {

        ellipse(x + random(width / 20, -width / 20), y, 3, 10);

      }

    }

  }

  if (mouseIsPressed) {

    background(0);

    frameRate(80);

    for (var i = 0; i < num_drops; i++) {

      rain_drop[i].create();

      rain_drop[i].fall();

    }

  } else {

    frameRate(20);

  }

}

class Rain {

  constructor() {

    this.x = random(0, width);

    this.y = random(0, -height);

  }

  create() {

    noStroke();

    fill(140, 223, 232);

    ellipse(this.x, this.y, random(3, 6), random(3, 10));

  }

  fall() {

    this.y += random(10, 30);

    if (this.y > height) {

      this.x = random(0, width);

      this.y = random(0, -height);

    }

  }

}

​