let cloudY;

let i, k, m, n; //variables for cloud variations

let w, l; //width and length variables

let x1,x2,x3,x4,x5,x6; //x-coordinates for clouds

let y1,y2,y3,y4,y5,y6; //y-coordinates for clouds

let xDiff,yDiff;

let sumX = 0;

​

function setup() {

​

  frameRate(8)

  createCanvas(400, 600);

  //initial cloud coordinates 

  cloudX = 0; 

  cloudY = 100;

  w = 100;

  //random values for cloud variations

  i = random(50,75);

  k = random(150,175);

  m = random(175,200);

  n = random(55,60);

  //coordinates for clouds

  x1 = 0;

  y1 = 0;

  x2 = random(50, 75); 

  y2 = random(150, 175); 

  x3 = random(175, 200) + 10; 

  y3 = random(55, 60); 

  x4 = random(150, 175); 

  y4 = random(55, 60); 

  x5 = random(375,400); 

  y5 = random(55, 60); 

  x6 = random(320,340); 

  y6 = random(150, 175); 

}

​

function draw() {

  //night scene 

  if (mouseIsPressed){

    background('#082736BA');

    //generating rain 

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

      let xRain = random(width);

      let yRain = random(height);

      let sizeRain = random(1, 4);

      fill(255);

      noStroke();

      ellipse(xRain, yRain, sizeRain, sizeRain);

    }

    //the moon

    fill ('#F3F3F3');

    noStroke();

    ellipse(width - 75, 75, 100, 100); 

    fill('#082736BA');

    noStroke ();

    ellipse(width - 75-35, 75, 100, 100); 

    //the beach: water and sand 

    fill('#224347');

    noStroke();

    rect(0,400,400,400);

    stroke('#9E9E9E')

    strokeWeight(3);

    line(0,500,400,500);

    noStroke();

    fill('#38270D')

    rect(0,500,400,400);

    //water details

    for (let s = 0; s < 5; s++){

      let xStart = random(0, 400);

      let length = random(20, 100);

      let yPos = random(410, 490);

      stroke('#3A686E');

      strokeWeight(2);

      line(xStart, yPos, xStart + length, yPos);

    }

    //sand details

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

      let xPosition = random(0, 400); 

      let yPosition = random(510, 590); 

      let circleSize = random(4, 10); 

      fill('#5E441C');

      noStroke(); // No border

      circle(xPosition, yPosition, circleSize);

    }

    //lightning

    if (random(1) < 0.03) { //3% chance of lightning 

      stroke(255);

      strokeWeight(3); 

      let xLightning = random(width);

      let yLightning = 0; 

      //7 lines to form the lightning

      for (let l = 0; l < 7; l++) {

        let xLightningEnd = xLightning + random(-20, 20); 

        let yLightningEnd = yLightning + random(30, 50);  

        line(xLightning, yLightning, xLightningEnd, yLightningEnd); 

        xLightning = xLightningEnd; 

        yLightning = yLightningEnd;

      }

    }

    //drawing the boat

    fill('rgb(65,3,3)');

    quad(70,350,170,450,370,450,470,350);

    fill('rgb(25,1,1)');

    let yShadow = random(100,120);

    triangle(70,350,yShadow,350,170,450);

    fill('rgb(81,80,80)');

    noStroke();

    let offsetFlag1 = random(110,120);

    triangle(268.5,200,268.5,330,offsetFlag1,330);

    let offsetFlag2 = random(370,375);

    triangle(270,200,270,310,offsetFlag2,310);

    stroke('#372119');

    strokeWeight(5);

    line(270,350,270,200)

    //for the clouds

    fill('rgb(192,192,192)');

    noStroke();

  }

  //sunny scene

  else{

    background('#D0DCE2BA');

    //the sun

    fill('#FFCC02');

    noStroke();

    ellipse(width - 75, 75, 100, 100); 

    //sun rays 

    fill('#FFC107');

    triangle(313, 28, 330, 27, 320, 10);

    triangle(276, 70, 276, 86, 265, 76);

    triangle(375, 72, 375, 83, 385, 77);

    triangle(323, 125, 336, 123, 331, 136);

    triangle(283, 49, 293, 39, 271, 31);

    triangle(357, 37, 367, 49, 381, 34);

    triangle(290, 110, 297, 117, 283, 123);

    triangle(356, 114, 364, 107, 372, 120);

    //birds

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

      let xPosition = random(0, 400); 

      let yPosition = random(70, 350); 

      let birdSize = random(10, 30); 

      stroke(0); 

      strokeWeight(2); 

      line(xPosition, yPosition, xPosition - birdSize / 2, yPosition - birdSize / 3); 

      line(xPosition, yPosition, xPosition + birdSize / 2, yPosition - birdSize / 3); 

    }

    //the beach: water + sand 

    fill('#90BEC4');

    noStroke();

    rect(0,400,400,400);

    stroke('rgb(255,255,255)')

    strokeWeight(3);

    line(0,500,400,500);

    fill('#E3BA7C')

    noStroke();

    rect(0,500,400,400);

    //water details

    for (let s = 0; s < 5; s++){

      let xStart = random(0, 400);

      let length = random(20, 100);

      let yPos = random(410, 490);

      stroke('#9ED7DE');

      strokeWeight(2);

      line(xStart, yPos, xStart + length, yPos);

    }

    //sand details

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

      let xPosition = random(0, 400); 

      let yPosition = random(510, 590); 

      let circleSize = random(4, 10); 

      fill('#C4944D')

      noStroke(); // No border

      circle(xPosition, yPosition, circleSize);

    }

    //boat

    offsetBoat1 = random(70,75);

    offsetBoat2 = random(170,175);

    fill('rgb(132,9,9)');

    quad(offsetBoat1,350,offsetBoat2,450,370,450,470,350);

    fill('rgb(88,3,3)');

    let yShadow = random(100,120);

    triangle(offsetBoat1,350,yShadow,350,offsetBoat2,450);

    fill('rgb(194,194,194)');

    noStroke();

    let offsetFlag1 = random(110,120);

    triangle(268.5,200,268.5,330,offsetFlag1,330);

    let offsetFlag2 = random(370,375);

    triangle(270,200,270,310,offsetFlag2,310);

    stroke('#795548');

    strokeWeight(5);

    line(270,350,270,200)

    //for the clouds

    fill(255);

    noStroke();

  }

  //loop through clouds to draw them at different positions 

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

    //move the cloud 

    cloudX+=2; 

    //set cloud position based on current iteration 

    if (i == 0){

      xDiff = x1;

      yDiff = y1;

    }

    else if (i == 1) { 

      xDiff = x2; 

      yDiff = y2; 

    } 

    else if (i == 2) { 

      xDiff = x3; 

      yDiff = y3; 

    } 

    else if (i == 3) { 

      xDiff = x4; 

      yDiff = y4; 

    } 

    else if (i == 4) { 

      xDiff = x5; 

      yDiff = y5; 

    } 

    else if (i == 5) {

      xDiff = x6; 

      yDiff = y6; 

    } 

    //drawing the cloud 

    ellipse(cloudX + xDiff, 75 + yDiff - 50, 100, 80);

    ellipse(cloudX - 40 + xDiff, 60 + yDiff - 50, 80, 60);

    ellipse(cloudX + 40 + xDiff, 70 + yDiff - 50, 60, 50);

    ellipse(cloudX - 20 + xDiff, 70 + yDiff - 50, 80, 60);

  }

​

  //loop through clouds to draw their inverses

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

    cloudX+=2;

    if (i == 0){

      xDiff = -x1;

      yDiff = y1;

    }

    else if (i == 1) { 

      xDiff = -x2; 

      yDiff = y2; 

    } 

    else if (i == 2) { 

      xDiff = -x3; 

      yDiff = y3; 

    } 

    else if (i == 3) { 

      xDiff = -x4; 

      yDiff = y4; 

    } 

    else if (i == 4) { 

      xDiff = -x5; 

      yDiff = y5; 

    } 

    else if (i == 5) {

      xDiff = -x6; 

      yDiff = y6; 

    } 

    ellipse(cloudX + xDiff, 75 + yDiff - 50, 100, 80);

    ellipse(cloudX - 40 + xDiff, 60 + yDiff - 50, 80, 60);

    ellipse(cloudX + 40 + xDiff, 70 + yDiff - 50, 60, 50);

    ellipse(cloudX - 20 + xDiff, 70 + yDiff - 50, 80, 60);

  }

  //reset clouds once they move off the screen

  if (cloudX > width+50) {

    cloudX = -100; //reset cloud to start over from the left

  }

}