/* 
 Interactive Drawing - River
 By: JinXuan (Jacky) Xu
 
 - place the mouse in the center-ish to see a perfect reflection 
 of the bridge in the river
 - move the mouse left and right to ripple the reflection
 - move the mouse up to go into night time
 - move the mouse around during the night to move the fireflies 
 - click the mouse to light up the fireflies
 */

//setup size, rectangle mode to corner with no border(stroke)
void setup() {
  size(400, 400);
  rectMode(CORNER);
  noStroke();
}

void draw () {
  //constantly set the frame rate to 60
  frameRate (60);

  //draw sky and dark undertone
  background(30);
  fill (136, 178, 198, mouseY/2+130);
  rect (0, 0, 400, 160);

  //dark red structure, transparency increses when mouse moves up
  fill (121, 55, 56, mouseY/1.5+120);
  rect (320, 10, 20, 10);
  rect (320, 30, 20, 30);

  //red structure, transparency increses when mouse moves up
  fill (172, 73, 75, mouseY/1.5+120);
  rect (290, 0, 110, 10);
  rect (270, 10, 30, 10);
  //2
  rect (250, 20, 20, 10);
  rect (250, 40, 20, 10);
  rect (290, 20, 110, 10);
  //3
  rect (230, 30, 20, 10);
  rect (230, 50, 20, 10);
  rect (270, 30, 30, 10);
  rect (290, 40, 10, 20);
  //4
  rect (210, 40, 20, 10);
  rect (210, 60, 20, 10);
  //5
  rect (190, 50, 20, 10);
  rect (190, 70, 20, 10);
  //6
  rect (170, 60, 20, 10);
  rect (170, 80, 20, 10);
  //7
  rect (150, 70, 20, 10);
  rect (150, 90, 20, 10);
  rect (140, 80, 10, 60);
  //lanturn
  rect (80, 110, 10, 30);
  rect (100, 110, 10, 30);
  rect (70, 100, 50, 10);
  rect (80, 90, 30, 10);
  rect (90, 80, 10, 10);

  //candle
  fill (200, 200, 200);
  rect (90, 120, 10, 20);

  //dark bridge, transparency increses when mouse moves up
  fill (58, 58, 58, mouseY/1.5+120);
  rect (290, 60, 20, 10);
  rect (370, 60, 30, 20);
  rect (330, 70, 30, 10);
  rect (340, 80, 20, 10);
  rect (290, 80, 20, 20);
  rect (280, 90, 10, 10);
  rect (270, 100, 30, 20);
  rect (260, 110, 10, 10);
  rect (230, 90, 10, 10);
  rect (220, 100, 20, 10);
  rect (210, 120, 30, 20);
  rect (190, 110, 10, 10);
  rect (170, 120, 30, 10);
  rect (180, 140, 40, 10);
  rect (100, 140, 50, 10);
  rect (40, 150, 20, 10);
  rect (120, 150, 30, 10);
  rect (220, 150, 20, 10);


  //light bridge, transparency increses when mouse moves up
  fill (80, 80, 80, mouseY/1.5+120);
  rect (310, 60, 60, 10);
  rect (270, 70, 60, 10);
  rect (360, 70, 10, 20);
  rect (370, 80, 30, 10);
  rect (250, 80, 40, 10);
  rect (310, 80, 30, 10);
  rect (240, 90, 40, 10);
  rect (240, 100, 30, 10);
  rect (310, 90, 50, 10);
  rect (300, 100, 20, 10);
  rect (210, 100, 10, 10);
  rect (200, 110, 60, 10);
  rect (200, 120, 10, 10);
  rect (240, 120, 30, 20);
  rect (270, 120, 10, 10);
  rect (150, 130, 60, 10);
  rect (0, 140, 100, 10);
  rect (0, 150, 40, 10);
  rect (60, 150, 60, 10);
  rect (150, 150, 70, 10);
  rect (150, 140, 30, 10);
  rect (220, 140, 30, 10);

  //REFLECTIONS 
  //LINE 1, follows the mouse horizontally 
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (mouseX/8-50, 160, 65, 10);
  rect (mouseX/8+35, 160, 60, 10);
  rect (mouseX/8+125, 160, 70, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (mouseX/8+95, 160, 30, 10);
  rect (mouseX/8+195, 160, 20, 10);
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/8+215, 160, 110, 10);
  rect (mouseX/8+345, 160, 130, 10);
  fill (219, 167, 188, mouseY/1.5+120); //pink peddle
  rect (mouseX/8+15, 160, 20, 10);
  rect (mouseX/8+325, 160, 20, 10);

  //LINE 2, follows the mouse horizontally 
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (mouseX/8-50, 170, 125, 10);
  rect (mouseX/8+125, 170, 30, 10);
  rect (mouseX/8+195, 170, 30, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (mouseX/8+75, 170, 50, 10);
  rect (mouseX/8+155, 170, 40, 10);
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/8+225, 170, 300, 10);

  //LINE 3, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/5-80, 180, 120, 10);
  rect (mouseX/5+70, 180, 30, 10);
  rect (mouseX/5+230, 180, 170, 10);  
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (mouseX/5+40, 180, 10, 10);
  rect (mouseX/5+60, 180, 10, 10);
  rect (mouseX/5+100, 180, 10, 10);
  fill (160, 185, 168, mouseY/1.5+120); //candle
  rect (mouseX/5+50, 180, 10, 10);
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (mouseX/5+110, 180, 60, 10);
  rect (mouseX/5+200, 180, 30, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (mouseX/5+170, 180, 30, 10);

  //LINE 4, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/8, 190, 105, 10);
  rect (-mouseX/8+135, 190, 30, 10);
  rect (-mouseX/8+175, 190, 20, 10);
  rect (-mouseX/8+305, 190, 145, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (-mouseX/8+105, 190, 10, 10);
  rect (-mouseX/8+125, 190, 10, 10);
  rect (-mouseX/8+165, 190, 10, 10);
  fill (160, 185, 168, mouseY/1.5+120); //candle
  rect (-mouseX/8+115, 190, 10, 10);
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (-mouseX/8+225, 190, 10, 10);
  rect (-mouseX/8+265, 190, 40, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (-mouseX/8+195, 190, 30, 10);
  rect (-mouseX/8+235, 190, 30, 10);

  //LINE 5, follows the mouse horizontally  
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/4-100, 200, 130, 10);
  rect (mouseX/4+40, 200, 10, 10);
  rect (mouseX/4+60, 200, 30, 10);
  rect (mouseX/4+100, 200, 40, 10);
  rect (mouseX/4+250, 200, 150, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (mouseX/4+30, 200, 10, 10);
  rect (mouseX/4+50, 200, 10, 10);
  rect (mouseX/4+90, 200, 10, 10);
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (mouseX/4+150, 200, 60, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (mouseX/4+140, 200, 10, 10);
  rect (mouseX/4+210, 200, 40, 10);

  //LINE 6, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/8, 210, 95, 10);
  rect (-mouseX/8+145, 210, 20, 10);
  rect (-mouseX/8+175, 210, 60, 10);
  rect (-mouseX/8+345, 210, 105, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (-mouseX/8+95, 210, 50, 10);
  rect (-mouseX/8+165, 210, 10, 10);
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (-mouseX/8+235, 210, 10, 10);
  rect (-mouseX/8+265, 210, 30, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (-mouseX/8+245, 210, 20, 10);
  rect (-mouseX/8+295, 210, 30, 10);
  fill (219, 167, 188, mouseY/1.5+120); //pink peddle
  rect (-mouseX/8+325, 210, 20, 10);

  //LINE 7, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/5, 220, 120, 10);
  rect (-mouseX/5+150, 220, 30, 10);
  rect (-mouseX/5+210, 220, 60, 10);
  rect (-mouseX/5+400, 220, 100, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (-mouseX/5+120, 220, 30, 10);
  rect (-mouseX/5+180, 220, 30, 10);
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (-mouseX/5+280, 220, 40, 10);
  rect (-mouseX/5+350, 220, 50, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (-mouseX/5+270, 220, 10, 10);
  rect (-mouseX/5+320, 220, 30, 10);

  //LINE 8, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/8, 230, 115, 10);
  rect (-mouseX/8+125, 230, 40, 10);
  rect (-mouseX/8+175, 230, 20, 10);
  rect (-mouseX/8+215, 230, 60, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (-mouseX/8+115, 230, 10, 10);
  rect (-mouseX/8+165, 230, 10, 10);
  rect (-mouseX/8+195, 230, 20, 10);
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (-mouseX/8+275, 230, 40, 10);
  rect (-mouseX/8+335, 230, 30, 10);
  rect (-mouseX/8+385, 230, 65, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (-mouseX/8+315, 230, 20, 10);
  rect (-mouseX/8+365, 230, 20, 10);

  //LINE 9, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/4, 240, 200, 10);
  rect (-mouseX/4+220, 240, 20, 10);
  rect (-mouseX/4+260, 240, 60, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (-mouseX/4+200, 240, 20, 10);
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (-mouseX/4+320, 240, 60, 10);
  rect (-mouseX/4+410, 240, 10, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (-mouseX/4+380, 240, 30, 10);
  rect (-mouseX/4+420, 240, 80, 10);
  fill (219, 167, 188, mouseY/1.5+120); //pink peddle
  rect (-mouseX/4+240, 240, 20, 10);

  //LINE 10, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/5-80, 250, 210, 10);
  rect (mouseX/5+150, 250, 20, 10);
  rect (mouseX/5+190, 250, 60, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (mouseX/5+130, 250, 20, 10);
  rect (mouseX/5+170, 250, 20, 10);
  fill (93, 113, 96, mouseY/1.5+120); //light bridge
  rect (mouseX/5+270, 250, 60, 10);
  fill (78, 97, 81, mouseY/1.5+120); //dark bridge
  rect (mouseX/5+250, 250, 20, 10);
  rect (mouseX/5+330, 250, 70, 10);

  //LINE 11, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/5, 260, 90, 10);
  rect (-mouseX/5+110, 260, 120, 10);
  rect (-mouseX/5+250, 260, 20, 10);
  rect (-mouseX/5+290, 260, 40, 10);
  rect (-mouseX/5+340, 260, 20, 10);
  rect (-mouseX/5+380, 260, 100, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (-mouseX/5+230, 260, 20, 10);
  rect (-mouseX/5+270, 260, 20, 10);
  rect (-mouseX/5+330, 260, 10, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (-mouseX/5+360, 260, 20, 10);
  fill (219, 167, 188, mouseY/1.5+120); //pink peddle
  rect (-mouseX/5+90, 260, 20, 10);

  //LINE 12, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/5-80, 270, 250, 10);
  rect (mouseX/5+190, 270, 20, 10);
  rect (mouseX/5+230, 270, 20, 10);
  rect (mouseX/5+260, 270, 20, 10);
  rect (mouseX/5+300, 270, 100, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (mouseX/5+170, 270, 20, 10);
  rect (mouseX/5+210, 270, 20, 10);
  rect (mouseX/5+250, 270, 10, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (mouseX/5+280, 270, 20, 10);

  //LINE 13, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/5-80, 280, 270, 10);
  rect (mouseX/5+210, 280, 20, 10);
  rect (mouseX/5+260, 280, 20, 10);
  rect (mouseX/5+300, 280, 100, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (mouseX/5+190, 280, 20, 10);
  rect (mouseX/5+230, 280, 30, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (mouseX/5+280, 280, 20, 10);

  //LINE 14, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/8-50, 290, 275, 10);
  rect (mouseX/8+245, 290, 20, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (mouseX/8+225, 290, 20, 10);
  rect (mouseX/8+265, 290, 135, 10);

  //LINE 15, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/4-100, 300, 150, 10);
  rect (mouseX/4+70, 300, 150, 10);
  rect (mouseX/4+250, 300, 20, 10);
  rect (mouseX/4+290, 300, 110, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (mouseX/4+220, 300, 30, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (mouseX/4+270, 300, 20, 10);
  fill (219, 167, 188, mouseY/1.5+120); //pink peddle
  rect (mouseX/4+50, 300, 20, 10);

  //LINE 16, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/5, 310, 330, 10);
  fill (148, 107, 90, mouseY/1.5+120); //light red
  rect (-mouseX/5+330, 310, 150, 10);

  //LINE 17, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/5, 320, 360, 10);
  rect (-mouseX/5+380, 320, 100, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (-mouseX/5+360, 320, 20, 10);

  //LINE 18, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/2, 330, 420, 10);
  rect (-mouseX/2+440, 330, 160, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (-mouseX/2+420, 330, 20, 10);

  //LINE 19, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/4-100, 340, 370, 10);
  rect (mouseX/4+290, 340, 110, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (mouseX/4+270, 340, 20, 10);

  //LINE 20, follows the mouse horizontally  (NEGATIVE)
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (-mouseX/2, 350, 100, 10);
  rect (-mouseX/2+120, 350, 210, 10);
  rect (-mouseX/2+350, 350, 70, 10);
  rect (-mouseX/2+460, 350, 140, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (-mouseX/2+420, 350, 20, 10);
  fill (219, 167, 188, mouseY/1.5+120); //pink peddle
  rect (-mouseX/2+100, 350, 20, 10);
  rect (-mouseX/2+330, 350, 20, 10);
  rect (-mouseX/2+440, 350, 20, 10);

  //LINE 21, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/2-200, 360, 420, 10);
  rect (mouseX/2+240, 360, 160, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (mouseX/2+220, 360, 20, 10);

  //LINE 22, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/4-100, 370, 370, 10);
  rect (mouseX/4+290, 370, 110, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (mouseX/4+270, 370, 20, 10);

  //LINE 23, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/5-80, 380, 140, 10);
  rect (mouseX/5+80, 380, 200, 10);
  rect (mouseX/5+300, 380, 100, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (mouseX/5+280, 380, 20, 10);
  fill (219, 167, 188, mouseY/1.5+120); //pink peddle
  rect (mouseX/5+60, 380, 20, 10);

  //LINE 24, follows the mouse horizontally 
  fill (112, 161, 117, mouseY/1.5+120); //sky
  rect (mouseX/2-200, 390, 420, 10);
  rect (mouseX/2+240, 390, 160, 10);
  fill (118, 96, 79, mouseY/1.5+120); //dark red
  rect (mouseX/2+220, 390, 20, 10);

  //LIGHT around the lantern, sin() used to create vibrate effect
  fill (237, 227, 164, -mouseY/5+10); // yellow
  ellipse(95, 115, sin(mouseY/13.0)*5+215, sin(mouseY/13.0)*5+215);
  fill (239, 150, 111, -mouseY/5+17); // orange
  ellipse(95, 115, sin(mouseY/13.0)*5+145, sin(mouseY/13.0)*5+145);
  fill (243, 132, 120, -mouseY/5+28); // red
  ellipse(95, 115, sin(mouseY/13.0)*5+60, sin(mouseY/13.0)*5+60);

  //FIREFLIES, sin() used to create vibrate effect
  fill (237, 227, 164, -mouseY*2+220); // yellow 
  rect (sin(mouseX/20.0)*2+100, sin(mouseY/20.0)*2+100, 10, 10);
  rect (sin(mouseX/20.0)*5+120, -sin(mouseY/20.0)*5+128, 10, 10);
  rect (-sin(mouseX/20.0)*5+65, -sin(mouseY/20.0)*3+70, 10, 10);
  rect (-sin(mouseX/20.0)*3.5+130, sin(mouseY/20.0)*4+40, 10, 10);
  rect (sin(mouseX/20.0)*2+25, sin(mouseY/20.0)*1.8+180, 10, 10);
  rect (sin(mouseX/20.0)*1.8+190, -sin(mouseY/20.0)*1.5+210, 10, 10);
}

void mousePressed () {
  //set frame rate to 10 when mouse click
  frameRate (10);
  //follows the FIREFLIES 
  fill (239, 150, 111, -mouseY+65);
  ellipse (sin(mouseX/20.0)*2+105, sin(mouseY/20.0)*2+105, 35, 35);
  ellipse (sin(mouseX/20.0)*5+125, -sin(mouseY/20.0)*5+133, 35, 35);
  ellipse (-sin(mouseX/20.0)*5+70, -sin(mouseY/20.0)*3+75, 35, 35);
  ellipse (-sin(mouseX/20.0)*3.5+135, sin(mouseY/20.0)*4+45, 35, 35);
  ellipse (sin(mouseX/20.0)*2+30, sin(mouseY/20.0)*1.8+185, 35, 35);
  ellipse (sin(mouseX/20.0)*1.8+195, -sin(mouseY/20.0)*1.5+215, 35, 35);
}