let yPosition =70; // Position of y coordinate of ellipse

let gravityAcceleration = 0.05; // gravity acc set to 0.05

function setup() {

  createCanvas(400, 400);

  rainSound.play(); // playing sound

frameRate(20); // to control the speed of rain

}

​

function preload() { // preloading sound of rain

    soundFormats('mp3');

    rainSound = loadSound('heavy-rain-nature-sounds-8186.mp3');

 }

function raindrops(xPosition,ySpeed){

  fill('#C4D3DF ');

  ySpeed = ySpeed + gravityAcceleration; // implementing gravity

  yPosition = yPosition + ySpeed;

   ellipse(xPosition,yPosition,6,10);

  if(yPosition > 450) // to make the rain drops fall again when the rain drops go past 450 in the canvas

{

 yPosition =70;

  ySpeed = 0;

}

​

}

​

function draw() {

  background("#9099a1");

  if (frameCount % 15 == 0)

  {

    rainSound.play(); //sound of rain plays

  }

  fill(255, 255, 255, 200); // opacity set to 200 and color is white

  noStroke();

  for (let i = 0; i < 3; i++) { //making three clouds with ellipses

    let x = 70 + i * 130;

    let y = 70;

    ellipse(x, y, 80, 80);

    ellipse(x - 30, y, 80, 80);

    ellipse(x + 30, y, 80, 80);

    ellipse(x - 15, y - 20, 80, 80);

    ellipse(x + 15, y - 20, 80, 80);

  }

​

​

for (let i = 10; i < 400; i+=10) //rain drops looped with different x position and  different speeds

{

  raindrops(random(0,400),random(0,10)); 

}

​

}

​

​

​

​

​

​