/////////////////////////////////////////////////
//     Interactive Drawing - Drew Godden       //
// Telescope 3D illusion surveying a cityscape //
/////////////////////////////////////////////////


//Set the screen size (400x400) in setup
void setup()
{
  size(400, 400);
}


//Create the keyPressed() console statement
void mousePressed()
{
  println("This is a pretty cool sight, if you're like, not into cool stuff.");
}


//Create the keyPressed() console statement
void keyPressed()
{
  println("Who needs friends when you have a telescope?");
}


//Draw static and interactive components in draw
void draw()
{
  //---Set strokeWeight to a thin line
  strokeWeight(0.7);

  //---Create an orange gradient for the background of the image using rect and altering fill saturation
  noStroke();
  colorMode(HSB, 359, 100, 100);
  fill(8, 47, 100);
  rect(0, 0, 400, 50);
  fill(8, 43, 100);
  rect(0, 50, 400, 50);
  fill(8, 39, 100);
  rect(0, 100, 400, 50);
  fill(8, 35, 100);
  rect(0, 150, 400, 50);
  fill(8, 31, 100);
  rect(0, 200, 400, 50);
  fill(8, 27, 100);
  rect(0, 250, 400, 50);
  fill(8, 23, 100);
  rect(0, 300, 400, 50);
  fill(8, 19, 100);
  rect(0, 350, 400, 50);
  fill(8, 15, 100);
  rect(0, 400, 400, 50);
  

  //---Create Layer 6 assets (Layer 6 clouds)---//

  //Clouds follow horizontal mouse movement at full speed. Clouds appear off-screen so that they are always present regardless of mouseX position
  stroke(0, 0, 40);
  fill(359, 100);
  rect(-380 + mouseX, 55, 30, 10, 10);
  rect(-240 + mouseX, 65, 60, 30, 10);
  rect(-120 + mouseX, 60, 90, 30, 10);
  rect(-90 + mouseX, 65, 60, 30, 10);
  rect(30 + mouseX, 65, 60, 30, 10);
  rect(80 + mouseX, 60, 60, 10, 10);
  rect(220 + mouseX, 75, 70, 20, 10);
  rect(380 + mouseX, 65, 60, 20, 10);


  //---Create Layer 5 assets (Left-most skyscraper, third from left skyscraper)---//

  //Create the left-most skyscraper. Saturation has been lowered to create the illusion of depth.
  stroke(0, 0, 20);
  fill(217, 40, 90);
  rect(-1, 200, 21, 200);
  fill(217, 40, 100);
  rect(10, 200, 41, 200, 10, 0, 0, 0);

  //Create the left-most skyscraper windows. Saturation has been lowered to create the illusion of depth.
  fill(100, 33, 100);
  rect(15, 210, 10, 20, 10);
  rect(15, 240, 10, 20, 10);
  rect(15, 270, 10, 20, 10);
  rect(15, 300, 10, 20, 10);
  rect(15, 330, 10, 20, 10);
  rect(15, 360, 10, 20, 10);
  rect(15, 390, 10, 20, 10);
  rect(33, 210, 10, 20, 10);
  rect(33, 240, 10, 20, 10);
  rect(33, 270, 10, 20, 10);
  rect(33, 300, 10, 20, 10);
  rect(33, 330, 10, 20, 10);
  rect(33, 360, 10, 20, 10);
  rect(33, 390, 10, 20, 10);

  //Create the third from left skyscraper (tallest skyscraper). Saturation has been lowered to create the illusion of depth.
  stroke(0, 0, 20);
  fill(217, 40, 90);
  rect(120, 40, 50, 360, 10, 0, 0, 0);
  fill(217, 40, 100);
  rect(160, 40, 40, 360, 10, 10, 0, 0);

  //Create the third from left skyscraper (tallest skyscraper) windows. Saturation has been lowered to create the illusion of depth.
  fill(100, 33, 100);
  rect(173, 60, 25, 20, 10);
  rect(173, 90, 25, 20, 10);
  rect(173, 120, 25, 20, 10);
  rect(173, 150, 25, 20, 10);
  rect(173, 180, 25, 20, 10);
  rect(173, 210, 25, 20, 10);
  rect(173, 240, 25, 20, 10);
  rect(173, 270, 25, 20, 10);
  rect(173, 300, 25, 20, 10);
  rect(173, 330, 25, 20, 10);
  rect(173, 360, 25, 20, 10);
  rect(173, 390, 25, 20, 10);
  rect(173, 410, 25, 20, 10);


  //---Create Layer 4 assets (Layer 4 clouds)---//

  //Clouds follow horizontal mouse movement at full speed. Clouds appear off-screen so that they are always present regardless of mouseX position
  stroke(0, 0, 20);
  fill(359, 150);
  rect(-330 + mouseX, 40, 80, 30, 10);
  rect(-150 + mouseX, 50, 70, 40, 10);


  //---Create Layer 3 assets (second from left skyscraper, fourth from left skyscraper, right-most skyscraper)---//

  //Create the second from left skyscraper (curved top skyscraper)
  stroke(0, 0, 10);
  colorMode(HSB, 359, 100, 100);
  fill(217, 47, 90);
  stroke(0);
  rect(40, 60, 20, 340, 10, 0, 0, 0);
  fill(217, 47, 100);
  noStroke();
  rect(60, 140, 80, 400);
  stroke(0);
  arc(60, 140, 160, 160, HALF_PI+PI, TWO_PI);
  line(140, 140, 140, 400);
  line(60, 65, 60, 400);
  arc(65, 65, 10, 10, PI, HALF_PI+PI);

  //Create the second from left skyscraper (curved top skyscraper) windows
  stroke(0, 0, 10);
  fill(100, 43, 100);
  rect(73, 70, 7, 90, 10);
  rect(90, 80, 7, 80, 10);
  rect(107, 95, 7, 65, 10);
  rect(124, 125, 7, 35, 10);
  rect(73, 175, 7, 90, 10);
  rect(90, 175, 7, 90, 10);
  rect(107, 175, 7, 90, 10);
  rect(124, 175, 7, 90, 10);
  rect(73, 280, 7, 90, 10);
  rect(90, 280, 7, 90, 10);
  rect(107, 280, 7, 90, 10);
  rect(124, 280, 7, 90, 10);
  rect(73, 385, 7, 90, 10);
  rect(90, 385, 7, 90, 10);
  rect(107, 385, 7, 90, 10);
  rect(124, 385, 7, 90, 10);

  //Create the fourth from left skyscraper (shortest skyscraper)
  stroke(0, 0, 10);
  fill(217, 47, 90);
  rect(190, 180, 30, 220, 10, 0, 0, 0);
  fill(217, 47, 100);
  rect(210, 180, 50, 220, 10, 10, 0, 0);

  //Create the fourth from left skyscraper (shortest skyscraper) windows
  stroke(0, 0, 10);
  fill(100, 43, 100);
  rect(220, 190, 10, 30, 10);
  rect(220, 230, 10, 30, 10);
  rect(220, 270, 10, 30, 10);
  rect(220, 310, 10, 30, 10);
  rect(220, 350, 10, 30, 10);
  rect(220, 390, 10, 30, 10);
  rect(220, 430, 10, 30, 10);
  rect(243, 190, 10, 30, 10);
  rect(243, 230, 10, 30, 10);
  rect(243, 270, 10, 30, 10);
  rect(243, 310, 10, 30, 10);
  rect(243, 350, 10, 30, 10);
  rect(243, 390, 10, 30, 10);
  rect(243, 430, 10, 30, 10);

  //Create the right-most skyscraper
  stroke(0, 0, 10);
  fill(217, 47, 90);
  rect(320, 100, 30, 300, 10, 0, 0, 0);
  fill(217, 47, 100);
  rect(340, 100, 60, 300, 10, 10, 0, 0);

  //Create the right-most skyscraper windows
  fill(100, 43, 100);
  rect(360, 110, 35, 10, 10);
  rect(360, 130, 35, 10, 10);
  rect(360, 150, 35, 10, 10);
  rect(360, 170, 35, 10, 10);
  rect(360, 190, 35, 10, 10);
  rect(360, 210, 35, 10, 10);
  rect(360, 230, 35, 10, 10);
  rect(360, 250, 35, 10, 10);
  rect(360, 270, 35, 10, 10);
  rect(360, 290, 35, 10, 10);
  rect(360, 310, 35, 10, 10);
  rect(360, 330, 35, 10, 10);
  rect(360, 350, 35, 10, 10);
  rect(360, 370, 35, 10, 10);
  rect(360, 390, 35, 10, 10);
  rect(360, 410, 35, 10, 10);


  //---Create Layer 2 assets (Layer 2 clouds)---//

  //Clouds follow horizontal mouse movement at full speed. Clouds appear off-screen so that they are always present regardless of mouseX position
  stroke(0, 0, 20);
  fill(359, 150);
  rect(-430 + mouseX, 25, 40, 20, 10);
  rect(-350 + mouseX, 40, 70, 40, 10);
  rect(-200 + mouseX, 30, 100, 40, 10);
  rect(-50 + mouseX, 40, 70, 40, 10);
  rect(0 + mouseX, 30, 70, 20, 10);
  rect(140 + mouseX, 50, 80, 30, 10);
  rect(180 + mouseX, 20, 90, 40, 10);
  rect(300 + mouseX, 40, 70, 30, 10);


  //---Create Layer 1 assets (Railing)---//

  //Create the railing
  stroke(0);
  fill(217, 60, 70);
  rect(-1, 350, 401, 7);
  fill(217, 60, 60);
  rect(-3, 357, 5, 43);
  rect(97, 357, 5, 43);
  rect(197, 357, 5, 43);
  rect(297, 357, 5, 43);
  rect(397, 357, 5, 43);


  //---Create 3D illusion telescope (This is a combination of multiple, absolute top layers)---//

  //The telescope's 3D illusion effect is created with five green ellipses with the same offset. The smallest
  //ellipse follows the mouse position at 1/8 speed (mouseX/8, mouseY/8) while the second-smallest
  //ellipse follows the mouse position at 1/16 speed (mouseX/16, mouseY/16). The larger ellipses oppose
  //the mouse position at the same speeds, while the middle ellipse remains stationary, creating
  //a 3D illusion. The sixth, smallest, colour changing ellipse changes hue depending on the value
  //of mouseX, mimicking a change in the view of a telescope's lense. The colour changing ellipse follows
  //the mouse position at 1/7 speed so that it stays within the boundary of the smallest green ellipse
  //while maintaining the 3D illusion.

  //Furthest end of telescope (biggest circle) (opposes mouse position at 1/8 speed)
  colorMode(HSB, 359, 100, 100);
  stroke(0);
  fill(100, 35, 100);
  ellipse(300 - (mouseX/8), 300 - (mouseY/8), 150, 150);

  //Second-furthest end of telescope (second biggest circle) (opposes mouse position at 1/16 speed)
  fill(100, 42, 100);
  ellipse(300 - (mouseX/16), 300 - (mouseY/16), 125, 125);

  //Static tripod
  stroke(217, 60, 60);
  strokeWeight(3);
  line(300, 300, 250, 400);
  line(300, 300, 350, 400);

  //Static middle portion of telescope (mid-sized circle)
  //Reset stroke colour
  stroke(0);
  //Reset strokeWeight
  strokeWeight(0.7);
  fill(100, 49, 100);
  ellipse(300, 300, 100, 100);

  //Second-closest end of telescope (second biggest circle) (follows mouse position at 1/16 speed)
  fill(100, 56, 100);
  ellipse(300 + mouseX/16, 300 + mouseY/16, 75, 75);

  //Closest end of telescope (smallest circle) (follows mouse position at 1/8 speed)
  fill(100, 63, 100);
  ellipse(300 + mouseX/8, 300 + mouseY/8, 50, 50);

  //Lense (small, colour-changing circle) (follows mouse position at 1/7 speed)
  //Change colorMode's limit to 400 so that it matches the maximum value of mouseX
  colorMode(HSB, 400);
  //Change the colour of the lense depending on the value of mouseX to mimic a change in the view of a telescope's lense
  fill(mouseX, 350, 350);
  ellipse(300 + mouseX/7, 300 + mouseY/7, 25, 25);
}