let drop_sound

​

//noise

//let xoff = 4

​

let landscape

let clouds = []

let drops = []

​

//cloud coordinates

let xpos = 50

let ypos = 50

let wid = 100

let ht= 50

​

//gravity

let gravity;

​

//rain coordinates

let dropx

let dropy

let dropw

let min_speed = 5

let max_speed = 15

​

//create raindrop class

//let raindrop inherit from Clouds

class RainDrop{

  constructor(dropx, dropy, dropw, speedr){

    this.dropx = dropx

    this.dropy = dropy

    this.dropw = dropw

    this.speedr =  speedr

    this.initial_y = dropy

    this.initial_x = dropx

    this.z = random(0, 20)

  }

  draw_drop(){

    fill(105,122,140)

    let t = map(this.z, 0, 20, 0, 2) //trying to create parralax

    strokeWeight(t)

    ellipse(this.dropx, this.dropy, this.dropw)

    triangle(this.dropx -this.dropw/2, this.dropy, this.dropx, this.dropy-this.dropw, this.dropx+this.dropw/2, this.dropy)

  }

  update(){

    //let s = map(this.z, 0, 20, 4, 10)

    this.dropy += this.speedr

    if(this.dropy > height){

      this.dropy = this.initial_y

    }

    if(mouseX > width/2 && this.dropy > height/3){//rain moves right

      this.dropx += 5

      //this.dropx = this.initial_x

    }

    else if(mouseX < width/2 && this.dropy >  height/3){//moves left

      this.dropx -= random(5)

      //this.dropx = this.initial_x

    }

    else{

      this.dropx = this.initial_x

    }

  }

  offScreen(){

    return this.dropy > height

  }

}

​

//create cloud class

class Cloud{

  constructor(xpos, ypos, wid, ht){

    this.xpos = xpos

    this.ypos = ypos

    this.wid = wid

    this.ht = ht

    this.cl = (196, 211, 223)

  }

  draw(){

    fill(this.cl)

    ellipse(this.xpos, this.ypos, this.wid, this.ht)

    ellipse(this.xpos + this.wid - 20, this.ypos, this.wid, this.ht)

    ellipse(this.xpos + this.wid/2, this.ypos-20, this.wid, this.ht)

  } 

  change_color(r, g, b){

    this.cl = (r, g, b)

  }

}

​

​

​

function setup() {

  //load sounds

  drop_sound.setVolume(0.5);

  createCanvas(600, 600);

  //add gravity to the rain

  gravity = random(0, 0.5)

  //set up the clouds first

  //noStroke()

  for(i =0; i< width; i+=width/3){

    clouds.push(new Cloud(xpos + i, ypos, wid, ht)) 

    if(i  < 2*width/3){

      x = 3*xpos + i

      y = ypos + 50

      clouds.push(new Cloud(x, y, wid, ht))

    }

  }

​

  //play the rain sounds

  drop_sound.play()

  for(i =0; i<1000; i++){

    //set up random positions for the x and y coordinates of the drop

    let x = random(0, width)

    let y = random(ypos, ypos+50)

    //let speedr = map(noise(xoff), 0, 1, 0, width) + gravity

    //xoff += 0.01

    //let speedr = map(mouseY, 0, height, min_speed, max_speed) + gravity

    let speedr = random(min_speed, max_speed) + gravity

    //add the drops to the drop array

    drops.push(new RainDrop(x, y, 5, speedr))

  }

}

​

​

function draw() {

  background(landscape);

  //draw the clouds first

  push()

  noStroke()

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

    clouds[i].draw() 

  }

  pop()

  //let the rain drops fall continuously

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

    drops[i].update()

    drops[i].draw_drop()

  }

}

​

function mousePressed(){

  if (drop_sound.isPlaying() && drops.length != 0) {

    drop_sound.stop();

    drops.length = 0

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

      clouds[i].change_color(255,255,255) 

    }

  } else {

    drop_sound.play();

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

      clouds[i].change_color(196, 211, 223) 

    }

    for(i =0; i<1000; i++){

    //set up random positions for the x and y coordinates of the drop

    let x = random(0, width)

    let y = random(ypos, ypos+50)

    //add the drops to the drop array

    let speedr = random(min_speed, max_speed) + gravity

    drops.push(new RainDrop(x, y, 5, speedr))

  }

  }

}

​

function preload(){

  soundFormats("mp3")

  landscape = loadImage("landscape1.jpeg")

  drop_sound = loadSound("rain.mp3")

}