Your browser does not support the canvas tag.
previous        Show / Hide Source    
Process
    Download        next
/******************************************
Cityscape by Steven kastelec
******************************************
Description:
this drawing is intended to demonstrate
the differences in a city as it goes from
day to night w/ cloud.
******************************************
Instructions:
- as you move the mouse down the y axis, the 
colour of the background changes from a bright 
days sky to a dark night sky.
  - as night falls on the city, the colors of
  the building gets darker and windows become
  engulfed in light.
  -stars gradient into the picture 
-as you move along x axis, the cloud at the top 
of the picture will follow you
-upon a mouse press, the cloud will emit a bolt of lightning
-upon a key press, the attena in the middle building 
emit a bright red light.
**********************************************/
void setup(){
 rectMode (CORNERS);
 ellipseMode(CORNERS);
 size(400,400);
 frameRate(30);
}
void draw(){
//Background
  background(255,255,255);

//Sky Black
noStroke();
fill(0,0,0);
rect(0,0,400,400);

//sky blue
noStroke();
fill(8,5,40,255-((mouseY-150)*2));
rect(0,0,400,400);

//light blue
noStroke();
fill(59,94,196,255-(mouseY*2));
rect(0,0,400,400);

// all stars
stroke(255,255,255,255+(mouseY-400));
//star 1
line(30,185,30,195);
line(25,190,35,190);
line(25,195,35,185);
line(25,185,35,195);
//star 2
line(30,85,30,95);
line(25,90,35,90);
line(25,85,35,95);
line(25,95,35,85);
//star 3
line(30,25,30,35);
line(25,30,35,30);
line(25,25,35,35);
line(25,35,35,25);
//star 4
line(85,70,95,70);
line(90,65,90,75);
line(85,65,95,75);
line(85,75,95,65);
//star 5
line(90,145,90,155);
line(85,150,95,150);
line(85,145,95,155);
line(85,155,95,145);
//star 6
line(150,105,150,115);
line(145,110,155,110);
line(145,105,155,115);
line(145,115,155,105);
//star 7
line(150,185,150,195);
line(145,190,155,190);
line(145,185,155,195);
line(145,195,155,185);
//star 8
line(250,105,250,115);
line(245,110,255,110);
line(245,105,255,115);
line(245,115,255,105);
//star 9
line(250,185,250,195);
line(245,190,255,190);
line(245,185,255,195);
line(245,195,255,185);
//star 10
line(310,145,310,155);
line(305,150,315,150);
line(305,145,315,155);
line(305,155,315,145);
//star 11
line(310,65,310,75);
line(305,70,315,70);
line(305,65,315,75);
line(305,75,315,65);
//star 12
line(370,25,370,35);
line(365,30,375,30);
line(365,25,375,35);
line(365,35,375,25);
//star 13
line(370,105,370,115);
line(365,110,375,110);
line(365,105,375,115);
line(365,115,375,105);
//star 14
line(370,185,370,195);
line(365,190,375,190);
line(365,185,375,195);
line(365,195,375,185);
//star 15
line(200,25,200,35);
line(195,30,205,30);
line(195,25,205,35);
line(195,35,205,25);

//Cloud
noStroke();
fill(77,78,80);
ellipse(mouseX-60,50,mouseX-40,70);
ellipse(mouseX-50,50,mouseX-20,80);
ellipse(mouseX-50,40,mouseX-30,60);
ellipse(mouseX-40,30,mouseX-10,60);
ellipse(mouseX-20,30,mouseX,50);
ellipse(mouseX-30,50,mouseX,80);
ellipse(mouseX-10,30,mouseX+30,70);
ellipse(mouseX-10,60,mouseX+10,80);
ellipse(mouseX+20,30,mouseX+40,50);
ellipse(mouseX+10,50,mouseX+40,80);
ellipse(mouseX+20,40,mouseX+60,80);
ellipse(mouseX+40,40,mouseX+60,60);

//building b6
//dark
noStroke();
fill(144,41,0);
rect(280,220,370,400);

noStroke();
fill(240,70,2,255-(mouseY-50));
rect(280,220,370,400);

//windows yellow
noStroke();
fill(255,255,0);
//column 1
rect(290,230,300,240);
rect(290,250,300,260);
rect(290,270,300,280);
rect(290,290,300,300);
rect(290,310,300,320);
rect(290,330,300,340);
rect(290,350,300,360);
rect(290,370,300,380);
rect(290,390,300,400);
//column 2
rect(310,230,320,240);
rect(310,250,320,260);
rect(310,270,320,280);
rect(310,290,320,300);
rect(310,310,320,320);
rect(310,330,320,340);
rect(310,350,320,360);
rect(310,370,320,380);
rect(310,390,320,400);
//column 3
rect(330,230,340,240);
rect(330,250,340,260);
rect(330,270,340,280);
rect(330,290,340,300);
rect(330,310,340,320);
rect(330,330,340,340);
rect(330,350,340,360);
rect(330,370,340,380);
rect(330,390,340,400);
//column 4
rect(350,230,360,240);
rect(350,250,360,260);
rect(350,270,360,280);
rect(350,290,360,300);
rect(350,310,360,320);
rect(350,330,360,340);
rect(350,350,360,360);
rect(350,370,360,380);
rect(350,390,360,400);

//windows black
noStroke();
fill(0,0,0,255-(mouseY-50));
//column 1
rect(290,230,300,240);
rect(290,250,300,260);
rect(290,270,300,280);
rect(290,290,300,300);
rect(290,310,300,320);
rect(290,330,300,340);
rect(290,350,300,360);
rect(290,370,300,380);
rect(290,390,300,400);
//column 2
rect(310,230,320,240);
rect(310,250,320,260);
rect(310,270,320,280);
rect(310,290,320,300);
rect(310,310,320,320);
rect(310,330,320,340);
rect(310,350,320,360);
rect(310,370,320,380);
rect(310,390,320,400);
//column 3
rect(330,230,340,240);
rect(330,250,340,260);
rect(330,270,340,280);
rect(330,290,340,300);
rect(330,310,340,320);
rect(330,330,340,340);
rect(330,350,340,360);
rect(330,370,340,380);
rect(330,390,340,400);
//column 4
rect(350,230,360,240);
rect(350,250,360,260);
rect(350,270,360,280);
rect(350,290,360,300);
rect(350,310,360,320);
rect(350,330,360,340);
rect(350,350,360,360);
rect(350,370,360,380);
rect(350,390,360,400);

//building 5
//dark
noStroke();
fill(41,12,0);
rect(250,330,290,400);

noStroke();
fill(166,33,0,255-(mouseY-50));
rect(250,330,290,400);

//windows yellow
noStroke();
fill(255,255,0);
rect(260,340,275,355);
rect(260,365,275,380);
rect(260,390,275,400);

//windows black
noStroke();
fill(0,0,0,255-(mouseY-50));
rect(260,340,275,355);
rect(260,365,275,380);
rect(260,390,275,400);

//building 4
//dark
noStroke();
fill(103,84,20);
rect(160,260,260,400);

noStroke();
fill(222,180,40,255-(mouseY-50));
rect(160,260,260,400);

//windows yellow
fill(255,255,0);
rect(230,270,250,290);
rect(230,300,250,320);
rect(230,330,250,350);
rect(230,360,250,380);
rect(170,270,190,290);

//windows black
fill(0,0,0,255-(mouseY-50));
rect(230,270,250,290);
rect(230,300,250,320);
rect(230,330,250,350);
rect(230,360,250,380);
rect(170,270,190,290);

//building 2
//dark
noStroke();
fill(113,9,13);
rect(60,240,145,400);

noStroke();
fill(203,14,21,255-(mouseY-50));
rect(60,240,145,400);

//windows yellow
fill(255,255,0);
//column 1
rect(70,250,85,265);

//column 2
rect(95,250,110,265);
rect(95,275,110,290);
rect(95,300,110,315);
rect(95,325,110,340);
rect(95,350,110,365);
rect(95,375,110,390);
//column 3
rect(120,250,135,265);
rect(120,275,135,290);

//windows black
fill(0,0,0,255-(mouseY-50));
//column 1
rect(70,250,85,265);

//column 2
rect(95,250,110,265);
rect(95,275,110,290);
rect(95,300,110,315);
rect(95,325,110,340);
rect(95,350,110,365);
rect(95,375,110,390);
//column 3
rect(120,250,135,265);
rect(120,275,135,290);

//building 3
//dark
noStroke();
fill(41,12,0);
rect(110,300,180,400);

noStroke();
fill(116,33,0,255-(mouseY-50));
rect(110,300,180,400);

//windows yellow
fill(255,255,0);
rect(125,315,140,340);
rect(125,355,140,380);
rect(125,395,140,400);
rect(155,315,170,340);
//windows balck
fill(0,0,0,255-(mouseY-50));
rect(125,315,140,340);
rect(125,355,140,380);
rect(125,395,140,400);
rect(155,315,170,340);

//building 1
//dark
noStroke();
fill(144,41,0);
rect(0,270,90,400);

noStroke();
fill(240,70,2,255-(mouseY-50));
rect(0,270,90,400);

//windows yelow
fill(255,255,0);
rect(0,280,90,300);
rect(0,310,90,330);
rect(0,340,90,360);
rect(0,370,90,390);

//windows black
fill(0,0,0,255-(mouseY-50));
rect(0,280,90,300);
rect(0,310,90,330);
rect(0,340,90,360);
rect(0,370,90,390);

//building 7
//dark
noStroke();
fill(113,9,13);
rect(355,295,400,400);

noStroke();
fill(203,14,21,255-(mouseY-50));
rect(355,295,400,400);

//windows yellow
fill(255,255,0);
rect(370,310,400,340);
rect(370,350,400,380);
rect(370,390,400,400);
//windows-black
fill(0,0,0,255-(mouseY-50));
rect(370,310,400,340);
rect(370,350,400,380);
rect(370,390,400,400);

//building 8
noStroke();
//dark version
fill(130,130,130);
triangle(140,400,200,200,260,400);

fill(215,215,215,255-(mouseY-50));
triangle(140,400,200,200,260,400);

//dark version
fill(85,85,85);
triangle(200,200,188,240,212,240);

fill(150,150,150,255-(mouseY-50));
triangle(200,200,188,240,212,240);

//windows-yellow
fill(255,255,0);
rect(190,250,210,280);
rect(175,300,195,330);
rect(205,300,225,330);
rect(160,350,180,380);
rect(190,350,210,380);
rect(220,350,240,380);

//windows-black
fill(0,0,0,255-(mouseY-50));
rect(190,250,210,280);
rect(175,300,195,330);
rect(205,300,225,330);
rect(160,350,180,380);
rect(190,350,210,380);
rect(220,350,240,380);

//antenna*/
stroke(0);
strokeWeight(2);
line(200,150,200,200);
fill(0,0,0);
ellipse(195,140,205,150);
}
void keyPressed(){

//Background
  background(255,255,255);

//Sky Black
noStroke();
fill(0,0,0);
rect(0,0,400,400);

//sky blue
noStroke();
fill(8,5,40,255-((mouseY-150)*2));
rect(0,0,400,400);

//light blue
noStroke();
fill(59,94,196,255-(mouseY*2));
rect(0,0,400,400);

// all stars
stroke(255,255,255,255+(mouseY-400));
//star 1
line(30,185,30,195);
line(25,190,35,190);
line(25,195,35,185);
line(25,185,35,195);
//star 2
line(30,85,30,95);
line(25,90,35,90);
line(25,85,35,95);
line(25,95,35,85);
//star 3
line(30,25,30,35);
line(25,30,35,30);
line(25,25,35,35);
line(25,35,35,25);
//star 4
line(85,70,95,70);
line(90,65,90,75);
line(85,65,95,75);
line(85,75,95,65);
//star 5
line(90,145,90,155);
line(85,150,95,150);
line(85,145,95,155);
line(85,155,95,145);
//star 6
line(150,105,150,115);
line(145,110,155,110);
line(145,105,155,115);
line(145,115,155,105);
//star 7
line(150,185,150,195);
line(145,190,155,190);
line(145,185,155,195);
line(145,195,155,185);
//star 8
line(250,105,250,115);
line(245,110,255,110);
line(245,105,255,115);
line(245,115,255,105);
//star 9
line(250,185,250,195);
line(245,190,255,190);
line(245,185,255,195);
line(245,195,255,185);
//star 10
line(310,145,310,155);
line(305,150,315,150);
line(305,145,315,155);
line(305,155,315,145);
//star 11
line(310,65,310,75);
line(305,70,315,70);
line(305,65,315,75);
line(305,75,315,65);
//star 12
line(370,25,370,35);
line(365,30,375,30);
line(365,25,375,35);
line(365,35,375,25);
//star 13
line(370,105,370,115);
line(365,110,375,110);
line(365,105,375,115);
line(365,115,375,105);
//star 14
line(370,185,370,195);
line(365,190,375,190);
line(365,185,375,195);
line(365,195,375,185);
//star 15
line(200,25,200,35);
line(195,30,205,30);
line(195,25,205,35);
line(195,35,205,25);

//Cloud
noStroke();
fill(77,78,80);
ellipse(mouseX-60,50,mouseX-40,70);
ellipse(mouseX-50,50,mouseX-20,80);
ellipse(mouseX-50,40,mouseX-30,60);
ellipse(mouseX-40,30,mouseX-10,60);
ellipse(mouseX-20,30,mouseX,50);
ellipse(mouseX-30,50,mouseX,80);
ellipse(mouseX-10,30,mouseX+30,70);
ellipse(mouseX-10,60,mouseX+10,80);
ellipse(mouseX+20,30,mouseX+40,50);
ellipse(mouseX+10,50,mouseX+40,80);
ellipse(mouseX+20,40,mouseX+60,80);
ellipse(mouseX+40,40,mouseX+60,60);

//building b6
//dark
noStroke();
fill(144,41,0);
rect(280,220,370,400);

noStroke();
fill(240,70,2,255-(mouseY-50));
rect(280,220,370,400);

//windows yellow
noStroke();
fill(255,255,0);
//column 1
rect(290,230,300,240);
rect(290,250,300,260);
rect(290,270,300,280);
rect(290,290,300,300);
rect(290,310,300,320);
rect(290,330,300,340);
rect(290,350,300,360);
rect(290,370,300,380);
rect(290,390,300,400);
//column 2
rect(310,230,320,240);
rect(310,250,320,260);
rect(310,270,320,280);
rect(310,290,320,300);
rect(310,310,320,320);
rect(310,330,320,340);
rect(310,350,320,360);
rect(310,370,320,380);
rect(310,390,320,400);
//column 3
rect(330,230,340,240);
rect(330,250,340,260);
rect(330,270,340,280);
rect(330,290,340,300);
rect(330,310,340,320);
rect(330,330,340,340);
rect(330,350,340,360);
rect(330,370,340,380);
rect(330,390,340,400);
//column 4
rect(350,230,360,240);
rect(350,250,360,260);
rect(350,270,360,280);
rect(350,290,360,300);
rect(350,310,360,320);
rect(350,330,360,340);
rect(350,350,360,360);
rect(350,370,360,380);
rect(350,390,360,400);

//windows black
noStroke();
fill(0,0,0,255-(mouseY-50));
//column 1
rect(290,230,300,240);
rect(290,250,300,260);
rect(290,270,300,280);
rect(290,290,300,300);
rect(290,310,300,320);
rect(290,330,300,340);
rect(290,350,300,360);
rect(290,370,300,380);
rect(290,390,300,400);
//column 2
rect(310,230,320,240);
rect(310,250,320,260);
rect(310,270,320,280);
rect(310,290,320,300);
rect(310,310,320,320);
rect(310,330,320,340);
rect(310,350,320,360);
rect(310,370,320,380);
rect(310,390,320,400);
//column 3
rect(330,230,340,240);
rect(330,250,340,260);
rect(330,270,340,280);
rect(330,290,340,300);
rect(330,310,340,320);
rect(330,330,340,340);
rect(330,350,340,360);
rect(330,370,340,380);
rect(330,390,340,400);
//column 4
rect(350,230,360,240);
rect(350,250,360,260);
rect(350,270,360,280);
rect(350,290,360,300);
rect(350,310,360,320);
rect(350,330,360,340);
rect(350,350,360,360);
rect(350,370,360,380);
rect(350,390,360,400);

//building 5
//dark
noStroke();
fill(41,12,0);
rect(250,330,290,400);

noStroke();
fill(166,33,0,255-(mouseY-50));
rect(250,330,290,400);

//windows yellow
noStroke();
fill(255,255,0);
rect(260,340,275,355);
rect(260,365,275,380);
rect(260,390,275,400);

//windows black
noStroke();
fill(0,0,0,255-(mouseY-50));
rect(260,340,275,355);
rect(260,365,275,380);
rect(260,390,275,400);

//building 4
//dark
noStroke();
fill(103,84,20);
rect(160,260,260,400);

noStroke();
fill(222,180,40,255-(mouseY-50));
rect(160,260,260,400);

//windows yellow
fill(255,255,0);
rect(230,270,250,290);
rect(230,300,250,320);
rect(230,330,250,350);
rect(230,360,250,380);
rect(170,270,190,290);

//windows black
fill(0,0,0,255-(mouseY-50));
rect(230,270,250,290);
rect(230,300,250,320);
rect(230,330,250,350);
rect(230,360,250,380);
rect(170,270,190,290);

//building 2
//dark
noStroke();
fill(113,9,13);
rect(60,240,145,400);

noStroke();
fill(203,14,21,255-(mouseY-50));
rect(60,240,145,400);

//windows yellow
fill(255,255,0);
//column 1
rect(70,250,85,265);

//column 2
rect(95,250,110,265);
rect(95,275,110,290);
rect(95,300,110,315);
rect(95,325,110,340);
rect(95,350,110,365);
rect(95,375,110,390);
//column 3
rect(120,250,135,265);
rect(120,275,135,290);

//windows black
fill(0,0,0,255-(mouseY-50));
//column 1
rect(70,250,85,265);

//column 2
rect(95,250,110,265);
rect(95,275,110,290);
rect(95,300,110,315);
rect(95,325,110,340);
rect(95,350,110,365);
rect(95,375,110,390);
//column 3
rect(120,250,135,265);
rect(120,275,135,290);

//building 3
//dark
noStroke();
fill(41,12,0);
rect(110,300,180,400);

noStroke();
fill(116,33,0,255-(mouseY-50));
rect(110,300,180,400);

//windows yellow
fill(255,255,0);
rect(125,315,140,340);
rect(125,355,140,380);
rect(125,395,140,400);
rect(155,315,170,340);
//windows balck
fill(0,0,0,255-(mouseY-50));
rect(125,315,140,340);
rect(125,355,140,380);
rect(125,395,140,400);
rect(155,315,170,340);

//building 1
//dark
noStroke();
fill(144,41,0);
rect(0,270,90,400);

noStroke();
fill(240,70,2,255-(mouseY-50));
rect(0,270,90,400);

//windows yelow
fill(255,255,0);
rect(0,280,90,300);
rect(0,310,90,330);
rect(0,340,90,360);
rect(0,370,90,390);

//windows black
fill(0,0,0,255-(mouseY-50));
rect(0,280,90,300);
rect(0,310,90,330);
rect(0,340,90,360);
rect(0,370,90,390);

//building 7
//dark
noStroke();
fill(113,9,13);
rect(355,295,400,400);

noStroke();
fill(203,14,21,255-(mouseY-50));
rect(355,295,400,400);

//windows yellow
fill(255,255,0);
rect(370,310,400,340);
rect(370,350,400,380);
rect(370,390,400,400);
//windows-black
fill(0,0,0,255-(mouseY-50));
rect(370,310,400,340);
rect(370,350,400,380);
rect(370,390,400,400);

//building 8
noStroke();
//dark version
fill(130,130,130);
triangle(140,400,200,200,260,400);

fill(215,215,215,255-(mouseY-50));
triangle(140,400,200,200,260,400);

//dark version
fill(85,85,85);
triangle(200,200,188,240,212,240);

fill(150,150,150,255-(mouseY-50));
triangle(200,200,188,240,212,240);

//windows-yellow
fill(255,255,0);
rect(190,250,210,280);
rect(175,300,195,330);
rect(205,300,225,330);
rect(160,350,180,380);
rect(190,350,210,380);
rect(220,350,240,380);

//windows-black
fill(0,0,0,255-(mouseY-50));
rect(190,250,210,280);
rect(175,300,195,330);
rect(205,300,225,330);
rect(160,350,180,380);
rect(190,350,210,380);
rect(220,350,240,380);

//antenna*/
stroke(0);
strokeWeight(2);
line(200,150,200,200);
noStroke();
fill(255,0,0);
ellipse(195,140,205,150);

}

void mousePressed(){
  //Background
  background(255,255,255);

//Sky Black
noStroke();
fill(0,0,0);
rect(0,0,400,400);

//sky blue
noStroke();
fill(8,5,40,255-((mouseY-150)*2));
rect(0,0,400,400);

//light blue
noStroke();
fill(59,94,196,255-(mouseY*2));
rect(0,0,400,400);

// all stars
stroke(255,255,255,255+(mouseY-400));
//star 1
line(30,185,30,195);
line(25,190,35,190);
line(25,195,35,185);
line(25,185,35,195);
//star 2
line(30,85,30,95);
line(25,90,35,90);
line(25,85,35,95);
line(25,95,35,85);
//star 3
line(30,25,30,35);
line(25,30,35,30);
line(25,25,35,35);
line(25,35,35,25);
//star 4
line(85,70,95,70);
line(90,65,90,75);
line(85,65,95,75);
line(85,75,95,65);
//star 5
line(90,145,90,155);
line(85,150,95,150);
line(85,145,95,155);
line(85,155,95,145);
//star 6
line(150,105,150,115);
line(145,110,155,110);
line(145,105,155,115);
line(145,115,155,105);
//star 7
line(150,185,150,195);
line(145,190,155,190);
line(145,185,155,195);
line(145,195,155,185);
//star 8
line(250,105,250,115);
line(245,110,255,110);
line(245,105,255,115);
line(245,115,255,105);
//star 9
line(250,185,250,195);
line(245,190,255,190);
line(245,185,255,195);
line(245,195,255,185);
//star 10
line(310,145,310,155);
line(305,150,315,150);
line(305,145,315,155);
line(305,155,315,145);
//star 11
line(310,65,310,75);
line(305,70,315,70);
line(305,65,315,75);
line(305,75,315,65);
//star 12
line(370,25,370,35);
line(365,30,375,30);
line(365,25,375,35);
line(365,35,375,25);
//star 13
line(370,105,370,115);
line(365,110,375,110);
line(365,105,375,115);
line(365,115,375,105);
//star 14
line(370,185,370,195);
line(365,190,375,190);
line(365,185,375,195);
line(365,195,375,185);
//star 15
line(200,25,200,35);
line(195,30,205,30);
line(195,25,205,35);
line(195,35,205,25);

//lightning bolt
noStroke();
fill(255,255,0);
triangle(mouseX-20,60,mouseX+30,60,mouseX,mouseY);
//Cloud
noStroke();
fill(77,78,80);
ellipse(mouseX-60,50,mouseX-40,70);
ellipse(mouseX-50,50,mouseX-20,80);
ellipse(mouseX-50,40,mouseX-30,60);
ellipse(mouseX-40,30,mouseX-10,60);
ellipse(mouseX-20,30,mouseX,50);
ellipse(mouseX-30,50,mouseX,80);
ellipse(mouseX-10,30,mouseX+30,70);
ellipse(mouseX-10,60,mouseX+10,80);
ellipse(mouseX+20,30,mouseX+40,50);
ellipse(mouseX+10,50,mouseX+40,80);
ellipse(mouseX+20,40,mouseX+60,80);
ellipse(mouseX+40,40,mouseX+60,60);

//building b6
//dark
noStroke();
fill(144,41,0);
rect(280,220,370,400);

noStroke();
fill(240,70,2,255-(mouseY-50));
rect(280,220,370,400);

//windows yellow
noStroke();
fill(255,255,0);
//column 1
rect(290,230,300,240);
rect(290,250,300,260);
rect(290,270,300,280);
rect(290,290,300,300);
rect(290,310,300,320);
rect(290,330,300,340);
rect(290,350,300,360);
rect(290,370,300,380);
rect(290,390,300,400);
//column 2
rect(310,230,320,240);
rect(310,250,320,260);
rect(310,270,320,280);
rect(310,290,320,300);
rect(310,310,320,320);
rect(310,330,320,340);
rect(310,350,320,360);
rect(310,370,320,380);
rect(310,390,320,400);
//column 3
rect(330,230,340,240);
rect(330,250,340,260);
rect(330,270,340,280);
rect(330,290,340,300);
rect(330,310,340,320);
rect(330,330,340,340);
rect(330,350,340,360);
rect(330,370,340,380);
rect(330,390,340,400);
//column 4
rect(350,230,360,240);
rect(350,250,360,260);
rect(350,270,360,280);
rect(350,290,360,300);
rect(350,310,360,320);
rect(350,330,360,340);
rect(350,350,360,360);
rect(350,370,360,380);
rect(350,390,360,400);

//windows black
noStroke();
fill(0,0,0,255-(mouseY-50));
//column 1
rect(290,230,300,240);
rect(290,250,300,260);
rect(290,270,300,280);
rect(290,290,300,300);
rect(290,310,300,320);
rect(290,330,300,340);
rect(290,350,300,360);
rect(290,370,300,380);
rect(290,390,300,400);
//column 2
rect(310,230,320,240);
rect(310,250,320,260);
rect(310,270,320,280);
rect(310,290,320,300);
rect(310,310,320,320);
rect(310,330,320,340);
rect(310,350,320,360);
rect(310,370,320,380);
rect(310,390,320,400);
//column 3
rect(330,230,340,240);
rect(330,250,340,260);
rect(330,270,340,280);
rect(330,290,340,300);
rect(330,310,340,320);
rect(330,330,340,340);
rect(330,350,340,360);
rect(330,370,340,380);
rect(330,390,340,400);
//column 4
rect(350,230,360,240);
rect(350,250,360,260);
rect(350,270,360,280);
rect(350,290,360,300);
rect(350,310,360,320);
rect(350,330,360,340);
rect(350,350,360,360);
rect(350,370,360,380);
rect(350,390,360,400);

//building 5
//dark
noStroke();
fill(41,12,0);
rect(250,330,290,400);

noStroke();
fill(166,33,0,255-(mouseY-50));
rect(250,330,290,400);

//windows yellow
noStroke();
fill(255,255,0);
rect(260,340,275,355);
rect(260,365,275,380);
rect(260,390,275,400);

//windows black
noStroke();
fill(0,0,0,255-(mouseY-50));
rect(260,340,275,355);
rect(260,365,275,380);
rect(260,390,275,400);

//building 4
//dark
noStroke();
fill(103,84,20);
rect(160,260,260,400);

noStroke();
fill(222,180,40,255-(mouseY-50));
rect(160,260,260,400);

//windows yellow
fill(255,255,0);
rect(230,270,250,290);
rect(230,300,250,320);
rect(230,330,250,350);
rect(230,360,250,380);
rect(170,270,190,290);

//windows black
fill(0,0,0,255-(mouseY-50));
rect(230,270,250,290);
rect(230,300,250,320);
rect(230,330,250,350);
rect(230,360,250,380);
rect(170,270,190,290);

//building 2
//dark
noStroke();
fill(113,9,13);
rect(60,240,145,400);

noStroke();
fill(203,14,21,255-(mouseY-50));
rect(60,240,145,400);

//windows yellow
fill(255,255,0);
//column 1
rect(70,250,85,265);

//column 2
rect(95,250,110,265);
rect(95,275,110,290);
rect(95,300,110,315);
rect(95,325,110,340);
rect(95,350,110,365);
rect(95,375,110,390);
//column 3
rect(120,250,135,265);
rect(120,275,135,290);

//windows black
fill(0,0,0,255-(mouseY-50));
//column 1
rect(70,250,85,265);

//column 2
rect(95,250,110,265);
rect(95,275,110,290);
rect(95,300,110,315);
rect(95,325,110,340);
rect(95,350,110,365);
rect(95,375,110,390);
//column 3
rect(120,250,135,265);
rect(120,275,135,290);

//building 3
//dark
noStroke();
fill(41,12,0);
rect(110,300,180,400);

noStroke();
fill(116,33,0,255-(mouseY-50));
rect(110,300,180,400);

//windows yellow
fill(255,255,0);
rect(125,315,140,340);
rect(125,355,140,380);
rect(125,395,140,400);
rect(155,315,170,340);
//windows balck
fill(0,0,0,255-(mouseY-50));
rect(125,315,140,340);
rect(125,355,140,380);
rect(125,395,140,400);
rect(155,315,170,340);

//building 1
//dark
noStroke();
fill(144,41,0);
rect(0,270,90,400);

noStroke();
fill(240,70,2,255-(mouseY-50));
rect(0,270,90,400);

//windows yelow
fill(255,255,0);
rect(0,280,90,300);
rect(0,310,90,330);
rect(0,340,90,360);
rect(0,370,90,390);

//windows black
fill(0,0,0,255-(mouseY-50));
rect(0,280,90,300);
rect(0,310,90,330);
rect(0,340,90,360);
rect(0,370,90,390);

//building 7
//dark
noStroke();
fill(113,9,13);
rect(355,295,400,400);

noStroke();
fill(203,14,21,255-(mouseY-50));
rect(355,295,400,400);

//windows yellow
fill(255,255,0);
rect(370,310,400,340);
rect(370,350,400,380);
rect(370,390,400,400);
//windows-black
fill(0,0,0,255-(mouseY-50));
rect(370,310,400,340);
rect(370,350,400,380);
rect(370,390,400,400);

//building 8
noStroke();
//dark version
fill(130,130,130);
triangle(140,400,200,200,260,400);

fill(215,215,215,255-(mouseY-50));
triangle(140,400,200,200,260,400);

//dark version
fill(85,85,85);
triangle(200,200,188,240,212,240);

fill(150,150,150,255-(mouseY-50));
triangle(200,200,188,240,212,240);

//windows-yellow
fill(255,255,0);
rect(190,250,210,280);
rect(175,300,195,330);
rect(205,300,225,330);
rect(160,350,180,380);
rect(190,350,210,380);
rect(220,350,240,380);

//windows-black
fill(0,0,0,255-(mouseY-50));
rect(190,250,210,280);
rect(175,300,195,330);
rect(205,300,225,330);
rect(160,350,180,380);
rect(190,350,210,380);
rect(220,350,240,380);

//antenna*/
stroke(0);
strokeWeight(2);
line(200,150,200,200);
fill(0,0,0);

}