Your browser does not support the canvas tag.
previous        Show / Hide Source    
Process
    Download        next
/****************************
 CyberPunk City
 by Devan Boone
 move X-axis to scroll
 move y-axis to change colour
 ****************************/
void setup() {
  //Define Size
  size(400, 400);
}

void draw() {
  //define Sky colour
  background(10, 10, 15);

  //draw Main Layer defined by mouseX
  //reset rectMode
  rectMode(CORNER);
  //define protruding lights
  //remove stroke
  noStroke();
  //define Shape Colour(green)
  fill(150, 255, 0, map(mouseY, 0, 400, 0, 255));
  //draw triangles Building 2
  triangle(mouseX-320, 250, mouseX-300, 260, mouseX-300, 270);
  triangle(mouseX-200, 250, mouseX-220, 260, mouseX-220, 270);
  triangle(mouseX-320, 270, mouseX-300, 280, mouseX-300, 290);
  triangle(mouseX-200, 270, mouseX-220, 280, mouseX-220, 290);
  //define Shape Colour(pink)
  fill(255, 0, 200, abs(map(mouseY, 0, 400, 0, 255)-255));
  //draw triangles building 2
  triangle(mouseX-320, 250, mouseX-300, 260, mouseX-300, 270);
  triangle(mouseX-200, 250, mouseX-220, 260, mouseX-220, 270);
  triangle(mouseX-320, 270, mouseX-300, 280, mouseX-300, 290);
  triangle(mouseX-200, 270, mouseX-220, 280, mouseX-220, 290);
  //remove fill
  noFill();
  //define stroke wieght
  strokeWeight(3);
  //choose the green colour and tie to mouseY 
  stroke(150, 255, 0, map(mouseY, 0, 400, 0, 255));
  //draw light rods
  //building 3
  line(mouseX-150, 200, mouseX-155, 195);
  line(mouseX-145, 195, mouseX-151, 189);
  line(mouseX-140, 190, mouseX-147, 184);
  line(mouseX-135, 185, mouseX-143, 179);
  line(mouseX-130, 180, mouseX-139, 174);
  //building 4
  line(mouseX-105, 110, mouseX-105, 130);
  line(mouseX-110, 105, mouseX-110, 125);
  line(mouseX-145, 30, mouseX-165, 30);
  line(mouseX-150, 25, mouseX-170, 25);
  //building 6
  line(mouseX+132, 135, mouseX+125, 120);
  line(mouseX+137, 130, mouseX+129, 110);
  line(mouseX+141, 125, mouseX+133, 100);
  line(mouseX+178, 135, mouseX+185, 120);
  line(mouseX+174, 130, mouseX+181, 110);
  line(mouseX+170, 125, mouseX+177, 100);
  line(mouseX+155, 80, mouseX+155, 70);
  //building 7
  line(mouseX+218, 90, mouseX+210, 75);
  line(mouseX+228, 80, mouseX+223, 70);
  line(mouseX+234, 78, mouseX+228, 67);
  line(mouseX+245, 70, mouseX+240, 59);
  //building 8
  line(mouseX+370, 210, mouseX+380, 200);
  line(mouseX+370, 220, mouseX+380, 210);
  line(mouseX+370, 230, mouseX+380, 220);
  line(mouseX+370, 240, mouseX+380, 230);
  line(mouseX+370, 250, mouseX+380, 240);
  line(mouseX+370, 260, mouseX+380, 250);
  line(mouseX+370, 270, mouseX+380, 260);
  line(mouseX+370, 280, mouseX+380, 270);
  //draw hologram
  triangle(mouseX-170, 130, mouseX-140, 100, mouseX-165, 80);
  triangle(mouseX-190, 60, mouseX-130, 140, mouseX-160, 120);
  triangle(mouseX-180, 100, mouseX-165, 60, mouseX-195, 70);
  triangle(mouseX-190, 150, mouseX-140, 70, mouseX-185, 60);
  //choose the pink colour and tie to mouseY
  stroke(255, 0, 200, abs(map(mouseY, 0, 400, 0, 255)-255));
  //draw lights
  //building 3
  line(mouseX-150, 200, mouseX-155, 195);
  line(mouseX-145, 195, mouseX-151, 189);
  line(mouseX-140, 190, mouseX-147, 184);
  line(mouseX-135, 185, mouseX-143, 179);
  line(mouseX-130, 180, mouseX-139, 174);
  //building 4
  line(mouseX-105, 110, mouseX-105, 130);
  line(mouseX-110, 105, mouseX-110, 125);
  line(mouseX-145, 30, mouseX-165, 30);
  line(mouseX-150, 25, mouseX-170, 25);
  //building 6
  line(mouseX+132, 135, mouseX+125, 120);
  line(mouseX+137, 130, mouseX+129, 110);
  line(mouseX+141, 125, mouseX+133, 100);
  line(mouseX+178, 135, mouseX+185, 120);
  line(mouseX+174, 130, mouseX+181, 110);
  line(mouseX+170, 125, mouseX+177, 100);
  line(mouseX+155, 80, mouseX+155, 70);
  //building 7
  line(mouseX+218, 90, mouseX+210, 75);
  line(mouseX+228, 80, mouseX+223, 70);
  line(mouseX+234, 78, mouseX+228, 67);
  line(mouseX+245, 70, mouseX+240, 59);
  //building 8
  line(mouseX+370, 210, mouseX+380, 200);
  line(mouseX+370, 220, mouseX+380, 210);
  line(mouseX+370, 230, mouseX+380, 220);
  line(mouseX+370, 240, mouseX+380, 230);
  line(mouseX+370, 250, mouseX+380, 240);
  line(mouseX+370, 260, mouseX+380, 250);
  line(mouseX+370, 270, mouseX+380, 260);
  line(mouseX+370, 280, mouseX+380, 270);
  //draw hologram
  triangle(mouseX-140, 70, mouseX-120, 150, mouseX-210, 50);
  triangle(mouseX-140, 110, mouseX-170, 50, mouseX-170, 90);
  triangle(mouseX-135, 150, mouseX-145, 95, mouseX-120, 120);
  triangle(mouseX-200, 130, mouseX-140, 90, mouseX-160, 50);

  //draw buildings
  //define fill and remove stroke
  noStroke();
  fill(30);
  //define Shapes
  //building 1
  rect(mouseX-400, 200, 30, 200);
  rect(mouseX-370, 190, 50, 10);
  quad(mouseX-400, 200, mouseX-400, 110, mouseX-340, 150, mouseX-370, 200);
  triangle(mouseX-360, 170, mouseX-340, 150, mouseX-320, 190);
  //building 2
  quad(mouseX-340, 400, mouseX-300, 310, mouseX-220, 310, mouseX-180, 400);
  rect(mouseX-300, 170, 80, 140);
  quad(mouseX-300, 170, mouseX-280, 110, mouseX-240, 110, mouseX-220, 170);
  quad(mouseX-280, 110, mouseX-240, 110, mouseX-250, 60, mouseX-270, 60);
  triangle(mouseX-270, 60, mouseX-250, 60, mouseX-260, 20);
  rect(mouseX-300, 100, 10, 70);
  rect(mouseX-230, 100, 10, 70);
  triangle(mouseX-300, 100, mouseX-290, 100, mouseX-290, 70);
  triangle(mouseX-230, 100, mouseX-230, 70, mouseX-220, 100);
  //building 3
  rect(mouseX-150, 200, 40, 200);
  rect(mouseX-130, 170, 20, 30);
  triangle(mouseX-150, 200, mouseX-130, 200, mouseX-130, 170);
  triangle(mouseX-110, 200, mouseX-90, 200, mouseX-110, 240);
  triangle(mouseX-150, 300, mouseX-150, 340, mouseX-170, 300);
  rect(mouseX-170, 260, 10, 40);
  rect(mouseX-100, 180, 10, 20);
  quad(mouseX-170, 260, mouseX-160, 260, mouseX-150, 250, mouseX-150, 230);
  //building 4
  rect(mouseX-60, 20, 40, 380);
  rect(mouseX-100, 20, 80, 60);
  rect(mouseX-80, 90, 60, 70);
  rect(mouseX-80, 170, 60, 70);
  rect(mouseX-80, 250, 60, 70);
  rect(mouseX-80, 330, 60, 70);
  triangle(mouseX-160, 20, mouseX-100, 20, mouseX-100, 130);
  //building 5
  rect(mouseX, 250, 100, 150);
  rect(mouseX, 100, 30, 150);
  rect(mouseX+70, 100, 30, 150);
  triangle(mouseX, 100, mouseX+30, 100, mouseX+30, 50);
  triangle(mouseX+100, 100, mouseX+70, 100, mouseX+70, 50);
  quad(mouseX+30, 230, mouseX+30, 210, mouseX+70, 200, mouseX+70, 220);
  quad(mouseX+30, 170, mouseX+30, 150, mouseX+70, 160, mouseX+70, 180);
  quad(mouseX+30, 130, mouseX+30, 110, mouseX+70, 100, mouseX+70, 120);
  //building 6
  rect(mouseX+130, 130, 50, 270);
  quad(mouseX+130, 130, mouseX+180, 130, mouseX+170, 100, mouseX+140, 100);
  triangle(mouseX+160, 100, mouseX+150, 100, mouseX+155, 80);
  //building 7
  rect(mouseX+210, 150, 100, 250);
  quad(mouseX+210, 150, mouseX+310, 150, mouseX+290, 80, mouseX+220, 120);
  triangle(mouseX+250, 110, mouseX+250, 70, mouseX+210, 90);
  //building 7/8 bridge
  rect(mouseX+310, 260, 30, 20);
  //building 8
  rect(mouseX+340, 170, 30, 230);
  quad(mouseX+340, 170, mouseX+370, 170, mouseX+370, 130, mouseX+350, 140);
  quad(mouseX+370, 130, mouseX+350, 140, mouseX+330, 130, mouseX+370, 120);
  triangle(mouseX+370, 130, mouseX+370, 190, mouseX+390, 180);
  triangle(mouseX+350, 150, mouseX+340, 190, mouseX+320, 170);
  rect(mouseX+370, 300, 20, 10);


  //draw windows and banners
  //define colour
  fill(50);
  //define Shapes
  //building 1
  triangle(mouseX-390, 200, mouseX-360, 150, mouseX-390, 130);
  rect(mouseX-360, 200, 30, 80);
  //building 2
  rect(mouseX-290, 200, 20, 20);
  rect(mouseX-250, 200, 20, 20);
  rect(mouseX-290, 270, 60, 30);
  quad(mouseX-290, 230, mouseX-270, 230, mouseX-260, 260, mouseX-280, 260);
  quad(mouseX-250, 230, mouseX-230, 230, mouseX-240, 260, mouseX-260, 260);
  //building 3
  rect(mouseX-140, 200, 20, 190);
  //building 4
  rect(mouseX-120, 30, 90, 30);
  rect(mouseX-70, 110, 30, 10);
  rect(mouseX-70, 130, 30, 10);
  rect(mouseX-70, 190, 30, 10);
  rect(mouseX-70, 210, 30, 10);
  rect(mouseX-70, 270, 30, 10);
  rect(mouseX-70, 290, 30, 10);
  rect(mouseX-70, 350, 30, 10);
  rect(mouseX-70, 370, 30, 10);
  //building 5
  rect(mouseX+10, 260, 20, 30);
  rect(mouseX+10, 310, 20, 30);
  rect(mouseX+10, 360, 20, 30);
  rect(mouseX+40, 260, 20, 130);
  rect(mouseX+70, 260, 20, 30);
  rect(mouseX+70, 310, 20, 30);
  rect(mouseX+70, 360, 20, 30);
  //building 6
  rect(mouseX+140, 160, 10, 30);
  rect(mouseX+160, 160, 10, 30);
  rect(mouseX+140, 210, 10, 30);
  rect(mouseX+160, 210, 10, 30);
  rect(mouseX+140, 260, 30, 80);
  //building 7
  rect(mouseX+220, 160, 30, 230);
  rect(mouseX+270, 160, 30, 230);
  quad(mouseX+220, 145, mouseX+230, 120, mouseX+250, 110, mouseX+250, 145);
  quad(mouseX+260, 145, mouseX+260, 105, mouseX+285, 90, mouseX+300, 145);
  //inbetween 7/8
  quad(mouseX+315, 275, mouseX+320, 265, mouseX+330, 265, mouseX+335, 275);
  //building 8
  rect(mouseX+350, 150, 10, 20);
  rect(mouseX+350, 180, 10, 20);
  rect(mouseX+350, 210, 10, 20);
  rect(mouseX+350, 240, 10, 20);
  rect(mouseX+350, 270, 10, 20);
  rect(mouseX+350, 300, 10, 20);
  rect(mouseX+350, 330, 10, 20);
  rect(mouseX+350, 360, 10, 20);
  rect(mouseX+380, 310, 10, 50);


  //draw banner and building lights
  //choose green colour and tie to mouseY
  fill(150, 255, 0, map(mouseY, 0, 400, 0, 255));
  //define shapes
  //building 1(banner)
  rect(mouseX-350, 210, 5, 10);
  rect(mouseX-355, 220, 5, 10);
  rect(mouseX-350, 230, 5, 10);
  rect(mouseX-355, 240, 5, 10);
  rect(mouseX-350, 250, 5, 10);
  rect(mouseX-355, 260, 5, 10);
  rect(mouseX-340, 210, 5, 10);
  rect(mouseX-345, 220, 5, 10);
  rect(mouseX-340, 230, 5, 10);
  rect(mouseX-345, 240, 5, 10);
  rect(mouseX-340, 250, 5, 10);
  rect(mouseX-345, 260, 5, 10);
  //building 2
  rect(mouseX-290, 270, 60, 10);
  rect(mouseX-290, 290, 60, 10);
  triangle(mouseX-260,100,mouseX-250,120,mouseX-270,120);
  triangle(mouseX-260,120,mouseX-250,140,mouseX-270,140);
  triangle(mouseX-250,140,mouseX-260,160,mouseX-240,160);
  triangle(mouseX-270,140,mouseX-260,160,mouseX-280,160);
  //building 3
  rect(mouseX-140, 200, 20, 10);
  rect(mouseX-140, 220, 20, 10);
  rect(mouseX-140, 240, 20, 10);
  rect(mouseX-140, 260, 20, 10);
  rect(mouseX-140, 280, 20, 10);
  rect(mouseX-140, 300, 20, 10);
  rect(mouseX-140, 320, 20, 10);
  rect(mouseX-140, 340, 20, 10);
  rect(mouseX-140, 360, 20, 10);
  rect(mouseX-140, 380, 20, 10);
  //building 4
  rect(mouseX-120,30,10,30);
  rect(mouseX-100,30,10,30);
  rect(mouseX-80,30,10,30);
  rect(mouseX-60,30,10,30);
  rect(mouseX-40,30,10,30);
  rect(mouseX-70, 110, 30, 10);  
  rect(mouseX-70, 190, 30, 10);  
  rect(mouseX-70, 270, 30, 10);  
  rect(mouseX-70, 350, 30, 10);
  //building 5
  rect(mouseX+45,265,5,10);
  rect(mouseX+50,275,5,10);
  rect(mouseX+45,285,5,10);
  rect(mouseX+50,295,5,10);
  rect(mouseX+45,305,5,10);
  rect(mouseX+50,315,5,10);
  rect(mouseX+45,325,5,10);
  rect(mouseX+50,335,5,10);
  rect(mouseX+45,345,5,10);
  rect(mouseX+50,355,5,10);
  rect(mouseX+45,365,5,10);
  rect(mouseX+50,375,5,10);
  //building 6
  rect(mouseX+140,260,30,10);
  rect(mouseX+140,280,30,10);
  rect(mouseX+140,300,30,10);
  rect(mouseX+140,320,30,10);
  //building 7
  rect(mouseX+220,190,30,10);
  rect(mouseX+270,230,30,10);
  rect(mouseX+220,270,30,10);
  rect(mouseX+270,310,30,10);
  rect(mouseX+220,350,30,10);
  rect(mouseX+270,190,30,10);
  rect(mouseX+220,230,30,10);
  rect(mouseX+270,270,30,10);
  rect(mouseX+220,310,30,10);
  rect(mouseX+270,350,30,10);
  //building 8
    rect(mouseX+382.5,320,5,5);
    rect(mouseX+382.5,330,5,5);
    rect(mouseX+382.5,340,5,5);
  
  //choose pink colour and tie to mouseY
  fill(255, 0, 200, abs(map(mouseY, 0, 400, 0, 255)-255));
  //define shapes
  //building 1(banner)
  rect(mouseX-355, 210, 5, 10);
  rect(mouseX-350, 220, 5, 10);
  rect(mouseX-355, 230, 5, 10);
  rect(mouseX-350, 240, 5, 10);
  rect(mouseX-355, 250, 5, 10);
  rect(mouseX-350, 260, 5, 10);
  rect(mouseX-345, 210, 5, 10);
  rect(mouseX-340, 220, 5, 10);
  rect(mouseX-345, 230, 5, 10);
  rect(mouseX-340, 240, 5, 10);
  rect(mouseX-345, 250, 5, 10);
  rect(mouseX-340, 260, 5, 10);
  //building 2
   rect(mouseX-290, 280, 60, 10);
   triangle(mouseX-260,180,mouseX-250,160,mouseX-270,160);
  triangle(mouseX-260,160,mouseX-250,140,mouseX-270,140);
  triangle(mouseX-250,140,mouseX-260,120,mouseX-240,120);
  triangle(mouseX-270,140,mouseX-260,120,mouseX-280,120);
   //building 3
   rect(mouseX-140, 210, 20, 10);
  rect(mouseX-140, 230, 20, 10);
  rect(mouseX-140, 250, 20, 10);
  rect(mouseX-140, 270, 20, 10);
  rect(mouseX-140, 290, 20, 10);
  rect(mouseX-140, 310, 20, 10);
  rect(mouseX-140, 330, 20, 10);
  rect(mouseX-140, 350, 20, 10);
  rect(mouseX-140, 370, 20, 10);
  //building 4
  rect(mouseX-110,30,10,30);
  rect(mouseX-90,30,10,30);
  rect(mouseX-70,30,10,30);
  rect(mouseX-50,30,10,30);
  rect(mouseX-70, 130, 30, 10);
  rect(mouseX-70, 210, 30, 10);
  rect(mouseX-70, 290, 30, 10);
  rect(mouseX-70, 370, 30, 10);
  //building 5
  rect(mouseX+50,265,5,10);
  rect(mouseX+45,275,5,10);
  rect(mouseX+50,285,5,10);
  rect(mouseX+45,295,5,10);
  rect(mouseX+50,305,5,10);
  rect(mouseX+45,315,5,10);
  rect(mouseX+50,325,5,10);
  rect(mouseX+45,335,5,10);
  rect(mouseX+50,345,5,10);
  rect(mouseX+45,355,5,10);
  rect(mouseX+50,365,5,10);
  rect(mouseX+45,375,5,10);
  //building 6
  rect(mouseX+140,270,30,10);
  rect(mouseX+140,290,30,10);
  rect(mouseX+140,310,30,10);
  rect(mouseX+140,330,30,10);
  //building 7
  rect(mouseX+270,190,30,10);
  rect(mouseX+220,230,30,10);
  rect(mouseX+270,270,30,10);
  rect(mouseX+220,310,30,10);
  rect(mouseX+270,350,30,10);
  rect(mouseX+220,190,30,10);
  rect(mouseX+270,230,30,10);
  rect(mouseX+220,270,30,10);
  rect(mouseX+270,310,30,10);
  rect(mouseX+220,350,30,10);
  //building 8
  rect(mouseX+382.5,325,5,5);
    rect(mouseX+382.5,335,5,5);
    rect(mouseX+382.5,345,5,5);
 
  ///////////////////////////////////////////////////
  /////Below is relic from attempted Multi-Layer/////
  ///////I decided to leave it in as a record////////
  ///////////////////////////////////////////////////
  
  
  
  ////add ambient perspective
  ////transparent sky colour
  //fill(15, 15, 30, 150);
  ////draw full screen shape
  //rect(0, 0, 400, 400);



//  //draw midground Layer defined by mouseX/2

//  //define protruding lights
//  //define Shaped Lights
//  //Green colour
//  fill(150, 255, 0, map(mouseY, 0, 400, 0, 255));
//  //building 3
  
//  //Pink Colour
//  fill(255, 0, 200, abs(map(mouseY, 0, 400, 0, 255)-255));
//  //building 3
  
//  //remove fill
//  noFill();
//  //define stroke weight
//  strokeWeight(4);
//  //choose the green colour and tie to mouseY 
//  stroke(150, 255, 0, map(mouseY, 0, 400, 0, 255));
//  //draw lights

//  //choose the pink colour and tie to mouseY
//  stroke(255, 0, 200, abs(map(mouseY, 0, 400, 0, 255)-255));
//  //draw lights

//  //draw buildings
//  //define fill and remove stroke
//  noStroke();
//  fill(30);
//  //define Shapes
//  rectMode(CORNERS);
//  //building 1
//  quad((mouseX/2)-193,300,(mouseX/2)-160,300,(mouseX/2)-140,400,(mouseX/2)-186,400);
//  quad((mouseX/2)-193,300,(mouseX/2)-160,300,(mouseX/2)-146,250,(mouseX/2)-193,250);
//  rect((mouseX/2)-193,170,(mouseX/2)-146,250);
//  rect((mouseX/2)-193,90,(mouseX/2)-180,170);
//  quad((mouseX/2)-193,90,(mouseX/2)-180,60,(mouseX/2)-146,80,(mouseX/2)-146,130);
//  //building 2
//  rect((mouseX/2)-86,100,(mouseX/2)-40,400);
//  //draw windows and banners
//  //define colour
//  fill(50);
//  //define Shapes

//  //draw banner and building lights
//  //choose green colour and tie to mouseY
//  fill(150, 255, 0, map(mouseY, 0, 400, 0, 255));
//  //define shapes

//  //choose pink colour and tie to mouseY
//  fill(255, 0, 200, abs(map(mouseY, 0, 400, 0, 255)-255));
//  //define shapes

//  //add ambient perspective
//  //transparent sky colour
//  fill(15, 15, 30, 150);
//  //draw full screen shape





//  //draw forground layer defined by mousex/4

//  //define protruding lights
//  //remove fill
//  //choose the green colour and tie to mouseY 
//  stroke(150, 255, 0, map(mouseY, 0, 400, 0, 255));
//  //draw lights

//  //choose the pink colour and tie to mouseY
//  stroke(255, 0, 200, abs(map(mouseY, 0, 400, 0, 255)-255));
//  //draw lights

//  //draw buildings
//  //define fill and remove stroke
//  noStroke();
//  fill(30);
//  //define Shapes

//  //draw windows and banners
//  //define colour
//  fill(50);
//  //define Shapes

//  //draw banner and building lights
//  //choose green colour and tie to mouseY
//  fill(150, 255, 0, map(mouseY, 0, 400, 0, 255));
//  //define shapes

//  //choose pink colour and tie to mouseY
//  fill(255, 0, 200, abs(map(mouseY, 0, 400, 0, 255)-255));
//  //define shapes
}