​

let CloudXPos1 = 75;

let CloudXPos2 = 100;

let CloudXPos3 = 150;

let CloudXPos4 = 200;

let CloudXPos5 = 250;

let CloudXPos6 = 300;

let CloudXPos7 = 350;

let CloudXPos8 = 300;

let xPos1 = 40;

let xPos2 = 50;

let xPos3 = 60;

let xPos4 = 70;

let xPos5 = 75;

let xPos6 = 100;

let xPos7 = 130;

let xPos8 = 120;

let xPos9 = 145;

let xPos10 = 200;

let xPos11 = 210;

let xPos12 = 225;

let xPos13 = 235;

let xPos14 = 260;

let xPos15 = 280;

let xPos16 = 300;

let xPos17 = 315;

let xPos18 = 328;

let xPos19 = 340;

let xPos20 = 355;

let CloudYPos1 = 50;

let CloudYPos2 = 75;

let CloudYPos3 = 50;

let CloudYPos4 = 75;

let CloudYPos5 = 50;

let CloudYPos6 = 100;

let CloudYPos7 = 50;

let CloudYPos8 = 25;

let yPos1 = 120;

let yPos2 = 200;

let yPos3 = 240;

let yPos4 = 100;

let yPos5 = 175;

let yPos6 = 199;

let yPos7 = 321;

let yPos8 = 340;

let yPos9 = 120;

let yPos10 = 149;

let yPos11 = 286;

let yPos12 = 312;

let yPos13 = 220;

let yPos14 = 270;

let yPos15 = 97;

let yPos16 = 250;

let yPos17 = 199;

let yPos18 = 231;

let yPos19 = 276;

let yPos20 = 370;

let cloudSize = 140;

let cloudSize1 = 100;

let cloudSize2 = 150;

let cloudSize3 = 100;

let mySize, myColor;

let RainDropSize1 = 10;

let RainDropSize2 = 10;

let RainDropSize3 = 10;

let myColor2 = (51, 153, 255);

let myColor3 = (0, 0, 204);

let myColor4 = (0, 102, 204);

let myColor5 = (102, 102, 255);

let CloudColor = 220;

let lbx1 = 100,

  lbx2 = 110,

  lbx3 = 150,

  lbx4 = 160;

let lby1 = 100,

  lby2 = 200,

  lby3 = 150,

  lby4 = 300;

​

//initial drawing is done by choosing colors and a random value for the xpos and xpos of raindrops and clouds

​

function setup() {

  createCanvas(400, 400);

  xPos = random(1, width);

  yPos = random(200, height);

  yPos1 = random(200, 250);

  xPos1 = random(1, 200);

​

  myColor = color(random(255), random(255), random(255));

  myColor2 = color(51, 153, 255);

  myColor3 = color(0, 0, 204);

  myColor4 = color(0, 102, 204);

  myColor5 = color(102, 102, 255);

  CloudColor = color(220);

}

​

function draw() {

  background(170, 180, 225);

  Cloud1(cloudSize);

  Cloud2(cloudSize2);

  Cloud3(cloudSize1);

  Cloud4(cloudSize2);

  Cloud5(cloudSize);

  Cloud6(cloudSize1);

  Cloud7(cloudSize2);

  Cloud8(cloudSize);

  RainDrop1(RainDropSize1);

  RainDrop2(RainDropSize2);

  RainDrop3(RainDropSize3);

  RainDrop4(RainDropSize2);

  RainDrop5(RainDropSize1);

  RainDrop6(RainDropSize1);

  RainDrop7(RainDropSize2);

  RainDrop8(RainDropSize3);

  RainDrop9(RainDropSize2);

  RainDrop10(RainDropSize1);

  RainDrop11(RainDropSize2);

  RainDrop12(RainDropSize3);

  RainDrop13(RainDropSize2);

  RainDrop14(RainDropSize1);

  RainDrop15(RainDropSize2);

  RainDrop16(RainDropSize3);

  RainDrop17(RainDropSize2);

  RainDrop18(RainDropSize1);

  RainDrop19(RainDropSize2);

  RainDrop20(RainDropSize3);

  //by creating a random value of stroke and strokeWeight in the drawing of the lightning bolts it gives it a live illusion using the draw functions 60 framerates.

  stroke(255, 255, 40);

  strokeWeight(random(1, 10));

  line(lbx1, lby1, lbx2, lby2);

  line(lbx2, lby2, lbx3, lby3);

  line(lbx3, lby3, lbx4, lby4);

}

​

​

//These are all th functions that will draw the clouds, raindrops and the lightning bolts

​

function Cloud1(diameter) {

  noStroke();

  fill(CloudColor);

  ellipse(CloudXPos1, CloudYPos1, diameter, diameter / 2);

}

​

function Cloud2(diameter) {

  noStroke();

  fill(CloudColor);

  ellipse(CloudXPos2, CloudYPos2, diameter, diameter / 2);

}

​

function Cloud3(diameter) {

  noStroke();

  fill(CloudColor);

  ellipse(CloudXPos3, CloudYPos3, diameter, diameter / 2);

}

​

function Cloud4(diameter) {

  noStroke();

  fill(CloudColor);

  ellipse(CloudXPos4, CloudYPos4, diameter, diameter / 2);

}

​

function Cloud5(diameter) {

  noStroke();

  fill(CloudColor);

  ellipse(CloudXPos5, CloudYPos5, diameter, diameter / 2);

}

​

function Cloud6(diameter) {

  noStroke();

  fill(CloudColor);

  ellipse(CloudXPos6, CloudYPos6, diameter, diameter / 2);

}

​

function Cloud7(diameter) {

  noStroke();

  fill(CloudColor);

  ellipse(CloudXPos7, CloudYPos7, diameter, diameter / 2);

}

​

function Cloud8(diameter) {

  noStroke();

  fill(CloudColor);

  ellipse(CloudXPos8, CloudYPos8, diameter, diameter / 2);

}

​

function RainDrop1(diameter) {

  fill(myColor);

  ellipse(xPos2, yPos2, diameter / 4, diameter);

}

​

function RainDrop2(diameter) {

  fill(myColor2);

  ellipse(xPos1, yPos1, diameter / 4, diameter);

}

​

function RainDrop3(diameter) {

  fill(myColor3);

  ellipse(xPos3, yPos3, diameter / 4, diameter);

}

​

function RainDrop4(diameter) {

  fill(myColor4);

  ellipse(xPos4, yPos4, diameter / 4, diameter);

}

​

function RainDrop5(diameter) {

  fill(myColor5);

  ellipse(xPos5, yPos5, diameter / 8, diameter);

}

​

function RainDrop6(diameter) {

  fill(myColor5);

  ellipse(xPos6, yPos6, diameter / 4, diameter);

}

function RainDrop7(diameter) {

  fill(myColor4);

  ellipse(xPos7, yPos7, diameter / 6, diameter);

}

function RainDrop8(diameter) {

  fill(myColor3);

  ellipse(xPos8, yPos8, diameter / 4, diameter);

}

function RainDrop9(diameter) {

  fill(myColor2);

  ellipse(xPos9, yPos9, diameter / 5, diameter);

}

function RainDrop10(diameter) {

  fill(myColor);

  ellipse(xPos10, yPos10, diameter / 6, diameter);

}

function RainDrop11(diameter) {

  fill(myColor2);

  ellipse(xPos11, yPos11, diameter / 5, diameter);

}

function RainDrop12(diameter) {

  fill(myColor3);

  ellipse(xPos12, yPos12, diameter / 4, diameter);

}

function RainDrop13(diameter) {

  fill(myColor4);

  ellipse(xPos13, yPos13, diameter / 6, diameter);

}

function RainDrop14(diameter) {

  fill(myColor5);

  ellipse(xPos14, yPos14, diameter / 4, diameter);

}

function RainDrop15(diameter) {

  fill(myColor4);

  ellipse(xPos15, yPos15, diameter / 5, diameter);

}

function RainDrop16(diameter) {

  fill(myColor3);

  ellipse(xPos16, yPos16, diameter / 6, diameter);

}

function RainDrop17(diameter) {

  fill(myColor2);

  ellipse(xPos17, yPos17, diameter / 5, diameter);

}

function RainDrop18(diameter) {

  fill(myColor);

  ellipse(xPos18, yPos18, diameter / 4, diameter);

}

function RainDrop19(diameter) {

  fill(myColor2);

  ellipse(xPos19, yPos19, diameter / 4, diameter);

}

function RainDrop20(diameter) {

  fill(myColor3);

  ellipse(xPos20, yPos20, diameter / 6, diameter);

}

​

//The following function changes the values of all the ellipses and color of the raindrops with a mouse press

​

function mousePressed() {

  CloudXPos1 = random(0, width);

  CloudYPos1 = random(0, 100);

  CloudXPos2 = random(0, width);

  CloudYPos2 = random(0, 100);

  CloudXPos3 = random(0, width);

  CloudYPos3 = random(0, 100);

  CloudXPos4 = random(0, width);

  CloudYPos4 = random(0, 100);

  CloudXPos5 = random(0, width);

  CloudYPos5 = random(0, 100);

  CloudXPos6 = random(0, width);

  CloudYPos6 = random(0, 100);

  CloudXPos7 = random(0, width);

  CloudYPos7 = random(0, 100);

  CloudXPos8 = random(0, width);

  CloudYPos8 = random(0, 100);

  yPos1 = random(75, 400);

  xPos1 = random(25, 375);

  xPos2 = random(25, 375);

  yPos2 = random(75, 400);

  xPos3 = random(25, 375);

  yPos3 = random(75, 400);

  xPos4 = random(25, 375);

  yPos4 = random(75, 400);

  xPos5 = random(25, 375);

  yPos5 = random(75, 400);

  xPos6 = random(25, 375);

  yPos6 = random(75, 400);

  xPos7 = random(25, 375);

  yPos7 = random(75, 400);

  xPos8 = random(25, 375);

  yPos8 = random(75, 400);

  xPos9 = random(25, 375);

  yPos9 = random(75, 400);

  xPos10 = random(25, 375);

  yPos10 = random(75, 400);

  xPos11 = random(25, 375);

  yPos11 = random(75, 400);

  xPos12 = random(25, 375);

  yPos12 = random(75, 400);

  xPos13 = random(25, 375);

  yPos13 = random(75, 400);

  xPos14 = random(25, 375);

  yPos14 = random(75, 400);

  xPos15 = random(25, 375);

  yPos15 = random(75, 400);

  xPos16 = random(25, 375);

  yPos16 = random(75, 400);

  xPos17 = random(0, 400);

  yPos17 = random(75, 400);

  xPos18 = random(25, 375);

  yPos18 = random(75, 400);

  xPos19 = random(0, 400);

  yPos19 = random(75, 400);

  xPos20 = random(0, 400);

  yPos20 = random(75, 400);

  cloudSize = int(random(100, 200));

  CloudColor = color(random(100, 230));

  cloudSize1 = int(random(150, 200));

  //CloudColor1 = color(random(100, 230));

  cloudSize2 = int(random(125, 250));

  //CloudColor2 = color(random(100, 230));

  cloudSize3 = int(random(100, 200));

  //CloudColor3 = color(random(100, 230));

  RainDropSize1 = int(random(10, 30));

  RainDropSize2 = int(random(5, 25));

  RainDropSize3 = int(random(15, 35));

  myColor = color(

    int(random(0, 146)),

    int(random(0, 146)),

    int(random(100, 255))

  );

​

  myColor2 = color(

    random(0, 146),

    random(0, 146),

    random(100, 255)

  );

​

  myColor3 = color(

    random(0, 146),

    random(0, 146),

    random(100, 255)

  );

​

  myColor4 = color(

    random(0, 146),

    random(0, 146),

    random(100, 255)

  );

​

  myColor5 = color(

    random(0, 146),

    random(0, 146),

    random(100, 255)

  );

​

  lbx1 = int(random(50, 300));

  lbx2 = int(lbx1 + int(random(10, 50)));

  lbx3 = int(lbx2 + 25);

  lbx4 = int(lbx3 + int(random(0, 50)));

  lby1 = int(random(50, 60));

  lby2 = int(random(140, 160));

  lby3 = int(lby2 - 20);

  lby4 = int(random(250, 350));

}

​