var park;

var sun;

var lamp1,lamp2,lamp3,lamp4;

var stars = [];

var random_color;

var drawWindow;

var color = "red";

var cometOneX = 10, cometOneY = 50;

​

​

​

​

function setup() {  

  colors = ['yellow','white','black'];

  drawWindow = (x,y,width,height,color) => {

    fill(color);

    rect(x,y,width,height);

  }

  random_color= () => {

    return colors[Math.floor(Math.random()*colors.length)]; 

  }

  createCanvas(400, 400);

//   Stars

  for (var i = 0; i < 500; i++) {

        stars[i] = new Star();

    }

  b1=new Building();

  b1.position=0;

  b1.floors=22;

  b2=new Building();

  b2.position=1;

  b2.floors=18;

  b3=new Building();

  b3.position=2;

  b3.floors=24;

  b4=new Building();

  b4.position=3;

  b4.floors=26;

  b5=new Building();

  b5.position=6;

  b5.floors=23;

  b6=new Building();

  b6.position=7;

  b6.floors=23;

​

  b7=new Building();

  b7.position=8;

  b7.floors=20;

  b8=new Building();

  b8.position=9;

  b8.floors=24;

  park = new Park();

  park.xPosition = 153;

  park.yPosition = 390;

  park.width = 80;

  park.height = 10;

  // Moon

  sun = new Sun();

  sunCover = new Sun();

​

  sun.xPosition = 100;

  sun.yPosition = 50;

  sun.diameter = 60;

  sunCover.xPosition = 120;

  sunCover.yPosition = 50;

  sunCover.diameter = 60;

  lamp1 = new Lamp();

  lamp2 = new Lamp();

  lamp3 = new Lamp();

  lamp4 = new Lamp();

//   Lamp 1

  lamp1.rectangleOne.xPosition = 26;

  lamp1.rectangleOne.yPosition = 333;

  lamp1.rectangleOne.width = 3;

  lamp1.rectangleOne.height = 60;

  lamp1.rectangleTwo.xPosition = 26;

  lamp1.rectangleTwo.yPosition = 333;

  lamp1.rectangleTwo.width = 12;

  lamp1.rectangleTwo.height = 2;

//   Lamp 2

  lamp2.rectangleOne.xPosition = 72;

  lamp2.rectangleOne.yPosition = 333;

  lamp2.rectangleOne.width = 3;

  lamp2.rectangleOne.height = 60;

  lamp2.rectangleTwo.xPosition = 66;

  lamp2.rectangleTwo.yPosition = 333;

  lamp2.rectangleTwo.width = 12;

  lamp2.rectangleTwo.height = 2;

//   Lamp 3

  lamp3.rectangleOne.xPosition = 306;

  lamp3.rectangleOne.yPosition = 333;

  lamp3.rectangleOne.width = 3;

  lamp3.rectangleOne.height = 60;

  lamp3.rectangleTwo.xPosition = 306;

  lamp3.rectangleTwo.yPosition = 333;

  lamp3.rectangleTwo.width = 12;

  lamp3.rectangleTwo.height = 2;

// Lamp 4

  lamp4.rectangleOne.xPosition = 356;

  lamp4.rectangleOne.yPosition = 333;

  lamp4.rectangleOne.width = 3;

  lamp4.rectangleOne.height = 60;

  lamp4.rectangleTwo.xPosition = 348;

  lamp4.rectangleTwo.yPosition = 333;

  lamp4.rectangleTwo.width = 12;

  lamp4.rectangleTwo.height = 2;

​

}

​

function draw() {

  background(0);

    for (var i = 0; i < stars.length; i++) {

        stars[i].draw();

    }

  //   Star Draw and Animation

  fill(0);

  rect(0,180,400,400);

  fill(255,0,0);

  b1.display();

  fill('#fae');

  b2.display();

  fill('rgb(0,255,0)');

  b3.display();

  fill(0, 0, 255);

  b4.display();

  fill(255, 204, 0);

  b5.display();

  fill('#fae');

  b6.display();

  fill(255,0,0);

  b7.display();

  fill(0,255,0);

  b8.display();

  fill('rgb(0,255,0)');

  park.display();

  fill(209);

  sun.display();

  fill(0);

  sunCover.display();

  fill(209);

  lamp1.display();

  lamp2.display();

  lamp3.display();

  lamp4.display();

  //first tree

  fill('brown');

  //rect(top left x, top left y, width, height)

  rect(165,340,5,50);

  fill('green');

  //ellipse(x point, y point, width, height)

  ellipse(167,340,18,14);

  noStroke();

  ellipse(167,330,14,14);

  //second tree

  fill('brown');

  //rect(top left x, top left y, width, height)

  rect(185,340,5,50);

  fill('green');

  //ellipse(x point, y point, width, height)

  ellipse(187,340,18,14);

  noStroke();

  ellipse(187,330,14,14);

  //third tree

  fill('brown');

  //rect(top left x, top left y, width, height)

  rect(205,340,5,50);

  fill('green');

  //ellipse(x point, y point, width, height)

  ellipse(207,340,18,14);

  noStroke();

  ellipse(207,330,14,14);

//   Slanting Lights

  fill(255);

  rect(144,300,30,4);

  rect(144,255,30,4);

  rect(210,255,30,4);

  rect(210,300,30,4);

  fill('yellow');

  ellipse(175, 303, 5, 10);

  ellipse(175, 258, 5, 10);

  ellipse(210, 258, 5, 10);

  ellipse(210, 303, 5, 10);

//   Gates

  fill('purple');

  rect(5,360,15,35);

  fill('yellow');

  ellipse(16,380,3,3);

  fill('brown');

  rect(46,360,15,35);

  fill('yellow');

  ellipse(57,380,3,3);

  fill('purple');

  rect(85,360,15,35);

  fill('yellow');

  ellipse(96,380,3,3);

  fill('purple');

  rect(125,360,15,35);

  fill('yellow');

  ellipse(136,380,3,3);

  fill('green');

  rect(245,360,15,35);

  fill('yellow');

  ellipse(256,380,3,3);

  fill('purple');

  rect(284,360,15,35);

  fill('yellow');

  ellipse(295,380,3,3);

  fill('green');

  rect(325,360,15,35);

  fill('yellow');

  ellipse(336,380,3,3);

  fill('brown');

  rect(365,360,15,35);

  fill('yellow');

  ellipse(376,380,3,3);

  x = 5;

  y = 230;

  width = 6;

  height = 5;

  color = 'black';

//   Windows

//   Row 1

  for (i=0;i<15;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 15;

  y = 230;

  width = 6;

  height = 5;

  color = "white";

//   Row 2

  for (i=0;i<15;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  color = "black";

  x = 45;

  y = 255;

  width = 6;

  height = 5;

//   Row 3

  for (i=0;i<12;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 55;

  y = 255;

  width = 6;

  height = 5;

  color = "red";

//   Row 4

  for (i=0;i<12;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 85;

  y = 210;

  width = 6;

  height = 5;

  color = "black";

//   Row 5

  for (i=0;i<17;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 95;

  y = 210;

  width = 6;

  height = 5;

  color = "red";

//   Row 6

  for (i=0;i<17;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 123;

  y = 195;

  width = 6;

  height = 5;

  color = "black";

//   Row 7

  for (i=0;i<20;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 133;

  y = 195;

  width = 6;

  height = 5;

  color = "white"

//   Row 8

  for (i=0;i<20;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 242;

  y = 212;

  width = 6;

  height = 5;

  color = "black";

//   Row 9

  for (i=0;i<18;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 252;

  y = 212;

  width = 6;

  height = 5;

  color = "blue";

//   Row 10

  for (i=0;i<18;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 285;

  y = 212;

  width = 6;

  height = 5;

  color = "red";

//   Row 11

  for (i=0;i<18;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 295;

  y = 212;

  width = 6;

  height = 5;

  color = "blue";

//   Row 12

  for (i=0;i<18;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 325;

  y = 240;

  width = 6;

  height = 5;

  color = "black";

//   Row 13

  for (i=0;i<15;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 335;

  y = 240;

  width = 6;

  height = 5;

  color = "white"

//   Row 14

  for (i=0;i<15;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 365;

  y = 212;

  width = 6;

  height = 5;

  color = "black";

//   Row 14

  for (i=0;i<17;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

  x = 375;

  y = 212;

  width = 6;

  height = 5;

  color = "purple";

//   Row 15

  for (i=0;i<17;i++){

    drawWindow(x,y,width,height,color);

    y = y + 8;

  }

//   Applying Random Color to Windows

  fill('yellow')

  rect(5,254,6,5);

rect(5,262,6,5);

rect(5,278,6,5);

rect(5,302,6,5);

rect(5,318,6,5);

  fill('black')

  rect(15,254,6,5);

rect(15,262,6,5);

rect(15,278,6,5);

rect(15,302,6,5);

rect(15,31,8,6,5);

  fill('black');

  rect(55,287,6,5);

  rect(55,279,6,5);

  fill('red');

  rect(45,279,6,5);

  rect(45,271,6,5);

  fill('red');

  rect(85,226,6,5);

  rect(85,242,6,5);

  rect(85,314,6,5);

  fill('black');

  rect(95,210,6,5);

  rect(95,218,6,5);

  rect(95,242,6,5);

  fill('red');

  rect(95,226,6,5);

  rect(95,242,6,5);

  rect(95,314,6,5);

  fill('white');

  rect(123,203,6,5);

  rect(123,211,6,5);

  rect(123,259,6,5);

  rect(123,267,6,5);

  rect(123,323,6,5);

  rect(123,339,6,5);

​

  fill('white');

rect(242,220,6,5);

rect(242,276,6,5);

rect(242,316,6,5);

rect(242,332,6,5);

​

    fill('black');

rect(252,220,6,5);

rect(252,236,6,5);

rect(252,316,6,5);

  fill('white');

  rect(285,212,6,5);

rect(285,220,6,5);

rect(285,228,6,5);

rect(285,260,6,5);

rect(285,300,6,5);

rect(285,316,6,5);

  fill('black');

  rect(295,212,6,5);

rect(295,220,6,5);

rect(295,228,6,5);

rect(295,276,6,5);

rect(295,308,6,5);

rect(295,316,6,5);

  fill('white');

rect(325,256,6,5);

rect(325,288,6,5);

rect(325,336,6,5);

​

    fill('black');

rect(335,256,6,5);

rect(335,288,6,5);

rect(335,336,6,5);

  fill('white');

  rect(365,212,6,5);

rect(365,252,6,5);

rect(365,292,6,5);

rect(365,324,6,5);

​

    fill('black');

  rect(375,212,6,5);

rect(375,220,6,5);

rect(375,284,6,5);

rect(375,308,6,5);

rect(375,324,6,5);

//   Grass

  noStroke();

  fill('green');

  //   Left

  circle(155,393,10);

  circle(155,397,10);

  circle(160,393,10);

  circle(160,397,10);

  circle(165,393,10);

  circle(165,397,10);

  circle(170,393,10);

  circle(170,397,10);

  circle(175,393,10);

  circle(175,397,10);

  circle(180,393,10);

  circle(180,397,10);

  circle(185,393,10);

  circle(185,397,10);

  circle(190,393,10);

  circle(190,397,10);

  circle(195,393,10);

  circle(195,397,10);

//   Right

  circle(200,393,10);

  circle(200,397,10);

  circle(205,393,10);

  circle(205,397,10);

  circle(210,393,10);

  circle(210,397,10);

  circle(215,393,10);

  circle(215,397,10);

  circle(220,393,10);

  circle(220,397,10);

  circle(225,393,10);

  circle(225,397,10);

  circle(230,393,10);

  circle(230,397,10);

​

//   Comet 1

  fill(255);

  cometOneX = cometOneX + 10;

  cometOneY = cometOneY + 0.3;

  rect(cometOneX,cometOneY,40,2);

  console.clear();

  fill(255);

}

​