//https://hypertextbook.com/facts/2007/EvanKaplan.shtml#:~:text=When%20a%20raindrop%20falls%20to,as%20would%20any%20falling%20body.

//https://hypertextbook.com/facts/2007/EvanKaplan.shtml#:~:text=When%20a%20raindrop%20falls%20to,as%20would%20any%20falling%20body.

//https://www.youtube.com/watch?v=YQysSfaLDyo

​

//for color

let c1, c2;

​

//raindrops

drops = [];

​

// for stars

let stars = []; //global variable (array)

let numStars = 400; //variable to control number of stars

​

//sound

let sound;

let hasPlayed = false;

​

// mountine image and sound preload

function preload() {

  img1 = loadImage("/Mount.png");

  sound = loadSound("/rain.mp3");

}

​

function setup() {

  createCanvas(500, 500);

​

  //declare and initialize  variable named i for the stars in the background - it is in the setup because I only want it to run once. 3d vector for depth

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

    stars[i] = createVector(random(width), random(height), random(0.2, 1)); // gives dimention to the background makes the stars feel far away

  }

​

  // for colors C1 is the starting color C2 is the 2nd color in the gradiant "from to"

  c1 = color(0, 40, 50);

  c2 = color(206, 206, 200);

}

​

function draw() {

  //call the function

  gradientSky(0, 0, width, height, c1, c2);

​

  //stars

  fill(100);

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

    //     draw stars at position x,y with a size of z

    ellipse(stars[i].x, stars[i].y, stars[i].z, stars[i].z);

​

    //image

    image(img1, 0, 200, 500, 300);

  }

  //play sound

  if (!sound.isPlaying() && !hasPlayed) {

    sound.play();

    hasPlayed = true;

  }

  // for the raindrops

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

    drops.push(new RainDrop(random(width), 0, 0));

  }

​

  for (let d of drops) {

//     https://p5js.org/reference/p5.Element/show/

    d.show();

    d.update();

  }

}

​

// color function

function gradientSky(x, y, w, h, c1, c2) {

  noFill();

  // Top to bottom gradient pixcel by pixcel vertically , i represents the pixcels position vertically

  for (let i = y; i <= y + h; i++) {

    //     interpolation factor changes from 0 to 1

    let inter = map(i, y, y + h, 0, 1);

    //     https://p5js.org/reference/p5/lerpColor/

    let c = lerpColor(c1, c2, inter);

    //       strok of C colors the shades

    stroke(c);

    //       a horizantal line is drawn for each i creating the gradiant

    line(x, i, x + w, i);

  }

}

​