/*///Interactive Drawing - Woes in Toronto -  by Liz Zhang//////

**Interaction displays as the sunsets Toronto becomes woeful. Inspired the song by Drake's Know Yourself 
**  This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
**  http://creativecommons.org/licenses/by-sa/3.0/deed.en_US
/*////////////////////////////////////////////////////////////////

void setup()    {
size(400,400);
rectMode(CORNER);
}
 
 void draw(){ 
/// Pink skies turn to dark red
background(-mouseY/2+255,-mouseY/2+95,-mouseY/2+181); ///transistion with the sun setting changes the colour of the sky

//Sun, rises and sets with cursor. Move cursor up sun rises, move cursor down, sun sets

 noStroke();
fill(-mouseY/2+251,-mouseY/2+255,-mouseY/2+49); // the colour of the sun changes as sun sets
ellipse(50,mouseY/1,80,80); //moves the sun along Y axis to show sun setting


///Stars in the sky
fill(255,255,144,mouseY-300);
rect(30,60,40,70);
rect(150,50,160,60);
rect(30,190,40,200);
rect(60,160,70,170);
rect(170,140,160,150);
rect(220,230,230,240);
rect(90,160,90,170);
rect(160,100,170,110);
rect(330,100,340,110);
rect(100,30,110,40);
rect(330,190,340,200);
rect(390,180,400,190);
rect(320,30,330,40);
rect(310,250,320,260);
rect(350,80,360,90);
rect(180,160, 190,170);
rect(200,120,210,110);
rect(140,180,150,190);
rect(20,30,30,40);
rect(390,220, 380,230);
rect(120,80,130,90);

///// buildings start from the left to the right

fill(-mouseY/2+72,-mouseY/2+178,-mouseY/2+159); /// Colours of the building becomes darker as sun sets
stroke(255);
strokeWeight(2);
rectMode(CORNERS);
rect(20,300,60,400);
rect(60,320, 80,400); // 2nd building
rect(80,260,120, 400);
rect(160,220,200,400); // 4th building
rect(140,260,180,400);// 3rd building

//// Following codes make the CN TOWER/////////
{// Light down the center
fill(+mouseY/2+43,+mouseY/2+255,+mouseY/2+3); ///color of tower becomes darker as sun sets
strokeWeight(5);
stroke(255);  
line(260,20,260, 400); 
}
//Radio dome
fill(-mouseY/2+227); ///Color of building becomes darker as sun sets
stroke(255);
ellipseMode(CORNERS);
ellipse(250,60,270,70);

//bottom of CN Tower // Color of building becomes darker as sun sets
fill(-mouseY/2+227);
stroke(255);
triangle(262,250,210,400,300,400);

// Elevator shaft of the CN Tower 
fill(-mouseY/2+227); //Color of building becomes darker as sun sets
stroke(255);
rectMode(CORNERS);
rect(250,140,270,400);

// The part of the CN Tower where everyone sits and eats 
fill(-mouseY/2+227); //Color of building becomes darker as sun sets
stroke(255);
ellipseMode(CORNERS);
ellipse(220,100,300,150);

// Red strip lights up 
fill(+mouseY/2+93,+mouseY/2+0,+mouseY/2+3); //Color becomes darker as sun sets
stroke(+mouseY/2+255,+mouseY/2+255,+mouseY/2+255); //Color becomes darker as sun sets
rectMode(CORNERS);
rect(220,120, 300,130);

//Clouds
//Made rectangles with softer edges. Runs along the top of the Y axis, clouds stay in the sky
rectMode(CENTER);
fill(82, 255,225, brightness(100));//made the clouds transparent so visibility of buildings are not obscured
noStroke();
rect(-80+(mouseX*3), 130+(mouseY/10), 90+(mouseY/10), 60+(mouseY/10), 50);  // clouds change shape, become wider as mouse moves down Y-axis, becomes more narrow as mouse moves up Y- axis. Clouds moves as cursor 
rect(-280+(mouseX*3), 180+(mouseY/10), 100+(mouseY/10), 80+(mouseY/10), 75);
rect(-200+(mouseX*3), 40+(mouseY/10), 80+(mouseY/10), 20+(mouseY/10), 50);

 
///ROGERS CENTRE  
fill(-mouseY/2+222,-mouseY/2+106,-mouseY/2+255);
stroke(255);
strokeWeight(3);
ellipseMode(CORNER);
ellipse(80,320,220,400); 

/// Buildings continue from left to right
fill(-mouseY/2+106,-mouseY/2+255,-mouseY/2+114);
strokeWeight(2);
stroke(255);
rectMode(CORNERS);
rect(310,280,340,400); //// 7th building
rect(290,300,320,400);///6th Building

//8th building
fill(-mouseY/2+106,-mouseY/2+255,-mouseY/2+114); // When sun sets building colour of building becomes darker. I used TRIANGLES 
///instead of LINES because I was the triangles to become smaller as the building goes up for asthetic reasons
stroke(255);
triangle(340,200,340, 240,360,240);
triangle(340,240,340,270,360,240);
triangle(360,240,340,270,360,300);
triangle(340,270,360,300,340,320);
triangle(340,320,360,300,360,360);
triangle(340, 320, 360, 360,340, 400);
triangle(360,360, 340, 400, 360,400);

//9th building
fill(-mouseY/2+106,-mouseY/2+255,-mouseY/2+114);
stroke(255);
rectMode(CORNERS);
rect(360,300,380,400);

// Lens flare from the sun
 fill(111,150, 255, 100);
 stroke(255);
 ellipseMode(CENTER);
 ellipse(-mouseX+60+60, mouseY+160+80, 15, 15);
 ellipse(-mouseX+30+30, mouseY+20+60, 15, 15);
 ellipse(-mouseX+400+400, mouseY+260+80, 15, 15);
 ellipse(-mouseX+310+190, mouseY+320+190, 20, 20);
   
}
/// mouse left click song lyrics come up
///Toronto themed things needs Drake quotes. 
/// MLA Citing: Drake. I was running through the 6 with my woes. "Know Yourself" If You're Reading This it's Too Late. CD. Cash Money Records/OVO Sound. 2015

 void mousePressed(){
  println ("I was running through the 6 with my WOES!"); //clicked dialog 1
 
}