//create static shapes. Rain drops 

//create shapes three shapes that will move down in different speeds

//create shape that moves up 

//add detail color in background and drops

​

//Creating Variables and array

let myRaindrops = [];

let numRaindrops = 70;

let s;

let sPos;

let m;

let mPos;

let h;

let hPos;

let ml;

let mlPos;

​

//Adding value and movement to variables and array

function setup() {

  createCanvas(600, 600);

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

    let x = random(width);

    let y = random(height);

    let z = random(1, 4);

    myRaindrops[i] = new Raindrop(x, y, z);  

  }

}

​

//Creating background, mapped in minisquares with RGB color per square. Adding value to the angleMode in the range of -1 to 1 

function draw() {

  background(220);

  angleMode(RADIANS)

  noStroke()

  let r = map(sin(frameCount / 500), -1,1,0,220)

  for(let a = 0; a <= height; a += 20){

    for(let c = 0; c <= width; c += 20){

      let g = map(c, 100, width, 0,100)

      let b = map(a, 200, height, 0, 255)

      fill(r, g, b) 

      rect(a,c,20,20)

    }

  }

  //Ellipse timing seconds 

  stroke(sPos,175,250);

  strokeWeight(3);

  fill(sPos,175,250);

  s = second();

  sPos = map(s,0,59,0,width);

  ellipse(sPos,sPos,20);

  //Ellipse timing minutes 

  m = minute();

  mPos = map(m,0,59,0,width);

  ellipse(mPos+60,mPos,40);

  //Ellipse timing hours 

  h = hour();

  hPos = map(h,0,23,0,width);

  ellipse(hPos - 70,hPos,60);

  //Setting up for raindrop movement

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

    myRaindrops[i].move();

    myRaindrops[i].show();

  }

}

 //creating the chair 

 class Raindrop {

  constructor(x, y, z) {

    this.x = x;

    this.y = y;

    this.z = z;

  }

  // Movement 

  move() {

    this.x = this.x + random(-1, 1);

    this.y = this.y + random(-1, 1);

  }

  //Characteristics of the raindrop

  show() {

    stroke(178,102,255);

    strokeWeight(2);

    fill(240);

    ellipse(this.x, this.y, this.z * 2);

  }

}

//To create my code, I researched on the following links:

//Link about arrays of Objects: https://www.youtube.com/watch?v=fBqaA7zRO58

//sin: https://p5js.org/reference/#/p5/sin

//angleMode: https://p5js.org/reference/#/p5/angleMode

//https://p5js.org/reference/#/p5/class

​