class building{

  constructor(x,y){

    this.x = x;

    this.y = y;

  }

  display(){

    fill(0,0,155);

    rect(this.x, this.y, 20,50);

  }

  shadowdisplay(){

    fill(190);

    noStroke();

    if(mouseX> 0 && mouseX< width/2 - 10){

      rect(this.x+20, this.y+30, 30,20)

    }else{if(mouseX> width/2 - 15 && mouseX< width/2 + 15){

        //circle(150,50,40)

      }

          else{{if(mouseX> width/2 + 10 && mouseX< width){

                  rect(this.x-30, this.y+30, 30,20);}

               }

            }

         }

  }

}

class Sun{

  constructor(x,y){

    this.x = x;

    this.y = y;

  }

  display(){

    fill(255,255,153)

    if(mouseX> 0 && mouseX< width/2 - 10){

      circle(20,70,40);

    }else{if(mouseX> width/2 - 15 && mouseX< width/2 + 15){

        circle(width/2,50,40);}

          else{{if(mouseX> width/2 + 10 && mouseX< width){

                  circle(300,70,40);}

               }

            }

         }

  }

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  let b1 = new building(width/2-50,100);

  let b2 = new building(width/2+50,100);

  b1.display();

  b1.shadowdisplay();

  b2.display();

  b2.shadowdisplay();

  let sun1 = new Sun(mouseX, mouseY);

  sun1.display();

}