/////San Francisco Scene/////
/*
Sept 22nd 2016
Intro to Media Computation
Instructor: Nicolas Hesler
Created by: William Lu
Mouse movement up and down controls the time of day, while left and right scrolls
through the scene horizontally. Clicking displays the title.
*/
void setup()
{
//Setting the canvas size
size (400,400);
noStroke();
smooth();
//No default cursor. Instead, I implemented a custom one (drawn last).
noCursor();
}
void draw()
{
//reseting the frame rate; when you click, the frameRate is set to 1 (see bottom) so this line resets it to normal
frameRate(60);
//Colour of dusk. This is the default background colour
background (253,173,163);
// Colour of day, opacity fades out based on mouseY. The background dusk colour seeps through when mouseY is about halfway down
rectMode(CORNERS);
fill(172,231,242,350-mouseY*2);
rect (0,0,400,400);
//Colour of night, turns night after dusk, when mouse reaches to the bottom
fill(119,114,173,(mouseY)/1.5);
rect (0,0,400,400);
///////////////////
///////SKY/////////
///////////////////
//Stars, multiple parallaxes, varying amounts of opacity jitter, also varying sizes.
//parallexes are controlled by different values multiplied to mouseX
//opacity jitter is achieved by using sin and frameCount when calculating opacity
//mouseY is divided by 2 and -30 so that the stars fade out when mouseY is past the middle
//frameCount is multiplied by a small number so that the resulting opacity changes slowly
fill(255,255,190,mouseY/2-30-70*sin(frameCount*0.03));
rectMode(CORNERS);
rect(100-mouseX*0.01,100,103-mouseX*0.01,103);
rect(140-mouseX*0.015,70,145-mouseX*0.015,75);
rect(20-mouseX*0.01,30,22-mouseX*0.01,32);
fill(255,255,190,mouseY/2-30-100*sin(frameCount*0.01));
rect(350-mouseX*0.015,115,353-mouseX*0.015,118);
rect(260-mouseX*0.02,25,263-mouseX*0.02,28);
rect(215-mouseX*0.025,90,220-mouseX*0.025,95);
fill(255,255,190,mouseY/2-30-70*cos(frameCount*0.03));
rect(365-mouseX*0.01,55,370-mouseX*0.01,60);
rect(300-mouseX*0.02,70,305-mouseX*0.02,75);
rect(90-mouseX*0.01,5,95-mouseX*0.01,10);
fill(255,255,190,mouseY/2-30-100*cos(frameCount*0.01));
rect(45-mouseX*0.015,70,50-mouseX*0.015,75);
rect(0-mouseX*0.045,90,5-mouseX*0.045, 95);
rect(405-mouseX*0.045,5,410-mouseX*0.045,10);
// Moon, position moves up and down based on mouse Y. Fades out as it reaches the bottom
fill (255,240,240,mouseY-200);
ellipse (160+mouseX/35,400-mouseY*0.90, 30,30);
//Sun, position moves up and down based on mouse Y. Colour changes to red, and becomes less opaque when it reaches the bottom.
fill (255,255-mouseY*0.5,190-mouseY*0.5,370-mouseY);
ellipse (400-160-mouseX/35,41+mouseY*0.8, 30,30);
//Cloud 1. Clouds fade out during night time
fill(230,130-mouseY/2);
beginShape();
vertex(150-mouseX*0.09,120);
vertex(150-mouseX*0.09,110);
vertex(160-mouseX*0.09,110);
vertex(160-mouseX*0.09,100);
vertex(170-mouseX*0.09,100);
vertex(170-mouseX*0.09,90);
vertex(250-mouseX*0.09,90);
vertex(250-mouseX*0.09,100);
vertex(280-mouseX*0.09,100);
vertex(280-mouseX*0.09,110);
vertex(300-mouseX*0.09,110);
vertex(300-mouseX*0.09,120);
endShape();
//Cloud 2
beginShape();
vertex(-10-mouseX*0.13,60);
vertex(-10-mouseX*0.13,50);
vertex(0-mouseX*0.13,50);
vertex(0-mouseX*0.13,40);
vertex(50-mouseX*0.13,40);
vertex(50-mouseX*0.13,30);
vertex(60-mouseX*0.13,30);
vertex(60-mouseX*0.13,40);
vertex(80-mouseX*0.13,40);
vertex(80-mouseX*0.13,50);
vertex(100-mouseX*0.13,50);
vertex(100-mouseX*0.13,60);
endShape();
//Moving cloud1
fill(230,130-mouseY/2);
beginShape();
vertex(-100-mouseX*0.09+frameCount*0.05,100);
vertex(-100-mouseX*0.09+frameCount*0.05,90);
vertex(-90-mouseX*0.09+frameCount*0.05,90);
vertex(-90-mouseX*0.09+frameCount*0.05,80);
vertex(-80-mouseX*0.09+frameCount*0.05,80);
vertex(-80-mouseX*0.09+frameCount*0.05,70);
vertex(-30-mouseX*0.09+frameCount*0.05,70);
vertex(-30-mouseX*0.09+frameCount*0.05,80);
vertex(0-mouseX*0.09+frameCount*0.05,80);
vertex(0-mouseX*0.09+frameCount*0.05,100);
endShape();
//Moving cloud 2
fill(230,130-mouseY/2);
beginShape();
vertex(300-mouseX*0.09+frameCount*0.05,60);
vertex(300-mouseX*0.09+frameCount*0.05,50);
vertex(310-mouseX*0.09+frameCount*0.05,50);
vertex(310-mouseX*0.09+frameCount*0.05,40);
vertex(320-mouseX*0.09+frameCount*0.05,40);
vertex(320-mouseX*0.09+frameCount*0.05,30);
vertex(350-mouseX*0.09+frameCount*0.05,30);
vertex(350-mouseX*0.09+frameCount*0.05,40);
vertex(380-mouseX*0.09+frameCount*0.05,40);
vertex(380-mouseX*0.09+frameCount*0.05,50);
vertex(400-mouseX*0.09+frameCount*0.05,50);
vertex(400-mouseX*0.09+frameCount*0.05,60);
endShape();
///////////////////
//////LAKES////////
///////////////////
//Three lake fills for each time of day, same theory as the sky colour.
//Dusk Lake
fill(219,105,153);
rect(0,400,400,225);
//Day Lake
fill(108,220,237,350-mouseY*2);
rect(0,400,400,225);
//Night Lake
fill(108,97,137,(mouseY)/1.5);
rect(0,400,400,225);
////////////////////////
////////BRIDGE//////////
////////////////////////
//Bridge tower supports, Right side
//******HOW THE FILL IS CALCULATED*******//
//The colour of every shape changes linearly during the night, but every R, G, and B value changes at different
//rates. I manually calculated these rates of change using the following formula:
// fill= (nightFill-dayFill)/400*mouseY+dayFill
//This formula is applied to every R, G and B value.
//See my process work for calculations.
//The decimal values that you see throughout my code is just the calculated, simplified version of the formula.
//Processing would glitch out if I tried to implement the formula without simplifying it first.
rectMode(CORNERS);
fill (-0.1775*mouseY+218,-0.11*mouseY+119,-0.1475*mouseY+127);
rect(240-mouseX/16,400,250-mouseX/16,250);
rect(270-mouseX/16,400,280-mouseX/16,250);
// Left side
rect(20-mouseX/16,400,30-mouseX/16,250);
rect(50-mouseX/16,400,60-mouseX/16,250);
//Vertical suspension lines
// Object this far back have mouseX divided by 16, so it moves very slightly
stroke(-0.1375*mouseY+152,-0.0725*mouseY+104,-0.1175*mouseY+116);
strokeWeight(2);
//Central section
line (70-mouseX/16, 166, 70-mouseX/16, 240);
line (90-mouseX/16, 195, 90-mouseX/16, 240);
line (110-mouseX/16, 214, 110-mouseX/16, 240);
line (130-mouseX/16, 225, 130-mouseX/16, 240);
line (151-mouseX/16, 230, 151-mouseX/16, 240);
line (170-mouseX/16, 225, 170-mouseX/16, 240);
line (190-mouseX/16, 214, 190-mouseX/16, 240);
line (210-mouseX/16, 195, 210-mouseX/16, 240);
line (230-mouseX/16, 166, 230-mouseX/16, 240);
//left section
line (10-mouseX/16, 166, 10-mouseX/16, 240);
//right secion
line (290-mouseX/16, 166, 290-mouseX/16, 240);
line (310-mouseX/16, 195, 310-mouseX/16, 240);
line (330-mouseX/16, 214, 330-mouseX/16, 240);
line (350-mouseX/16, 225, 350-mouseX/16, 240);
line (370-mouseX/16, 230, 370-mouseX/16, 240);
line (390-mouseX/16, 225, 390-mouseX/16, 240);
line (410-mouseX/16, 214, 410-mouseX/16, 240);
line (430-mouseX/16, 195, 430-mouseX/16, 240);
//right arc suspension cables
noFill();
stroke (-0.165*mouseY+188,-0.0875*mouseY+110,-0.135*mouseY+122);
strokeWeight(3);
arc(385-mouseX/16,35,255,395, radians(30), radians(150) );
arc(355-mouseX/16,35,255,395, radians(30), radians(150) );
noStroke();
// Right Tower, vertical blocks
fill (-0.1775*mouseY+218,-0.11*mouseY+119,-0.1475*mouseY+127);
rect(240-mouseX/16,250,250-mouseX/16,130);
rect(270-mouseX/16,250,280-mouseX/16,130);
// Right Tower, horizontal blocks, 7 thick
rect (240-mouseX/16,145,280-mouseX/16, 138);
rect (240-mouseX/16,170,280-mouseX/16, 163);
rect (240-mouseX/16,195,280-mouseX/16, 188);
rect (240-mouseX/16,220,280-mouseX/16, 213);
//central arc suspension cables
noFill();
stroke (-0.165*mouseY+188,-0.0875*mouseY+110,-0.135*mouseY+122);
arc(135-mouseX/16,35,255,395, radians(30), radians(150) );
arc(165-mouseX/16,35,255,395, radians(30), radians(150) );
noStroke();
// Left Tower , vertical blocks
fill (-0.1775*mouseY+218,-0.11*mouseY+119,-0.1475*mouseY+127);
rect(20-mouseX/16,250,30-mouseX/16,130);
rect(50-mouseX/16,250,60-mouseX/16,130);
// Left Tower , horizontal blocks, 7 thick
rect (20-mouseX/16,145,60-mouseX/16, 138);
rect (20-mouseX/16,170,60-mouseX/16, 163);
rect (20-mouseX/16,195,60-mouseX/16, 188);
rect (20-mouseX/16,220,60-mouseX/16, 213);
//left arc suspension cables
noFill();
stroke (-0.165*mouseY+188,-0.0875*mouseY+110,-0.135*mouseY+122);
arc(-85-mouseX/16,35,255,395, radians(30), radians(150) );
arc(-55-mouseX/16,35,255,395, radians(30), radians(150) );
noStroke();
//Bridge road
fill (-0.155*mouseY+188,-0.08*mouseY+110,-0.1275*mouseY+122);
rect (0,240, 400, 250);
//Bridge Lights. They pulsate using sin(frameCount) to calculate size
fill (255,222,189,(mouseY)/1.3-50-200*sin(frameCount*0.03)/2);
ellipse ( 40-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 80-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 120-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 160-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 200-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 240-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 280-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 320-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 360-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 400-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
ellipse ( 440-mouseX/16, 230, 3-sin(frameCount*0.03)/2,3-sin(frameCount*0.03)/2);
////////////////////////////
///Mountainous Background///
////////////////////////////
//as objects get closer, the mouseX value is divided by less and less
fill (-0.1525*mouseY+144,-0.225*mouseY+172,-0.2375*mouseY+168);
beginShape();
vertex(0-mouseX/14,435);
vertex(450-mouseX/14,430);
vertex(450-mouseX/14,235);
vertex(400-mouseX/14,230);
vertex(400-mouseX/14,245);
vertex(380-mouseX/14,245);
vertex(380-mouseX/14,255);
vertex(350-mouseX/14,255);
vertex(350-mouseX/14,265);
vertex(300-mouseX/14,265);
vertex(300-mouseX/14,260);
vertex(280-mouseX/14,260);
vertex(280-mouseX/14,265);
vertex(260-mouseX/14,265);
vertex(260-mouseX/14,275);
vertex(200-mouseX/14,275);
vertex(200-mouseX/14,285);
vertex(180-mouseX/14,285);
vertex(180-mouseX/14,295);
vertex(110-mouseX/14,295);
vertex(110-mouseX/14,285);
vertex(90-mouseX/14,285);
vertex(90-mouseX/14,275);
vertex(70-mouseX/14,275);
vertex(70-mouseX/14,265);
vertex(60-mouseX/14,265);
vertex(60-mouseX/14,255);
vertex(50-mouseX/14,255);
vertex(50-mouseX/14,235);
vertex(40-mouseX/14,235);
vertex(40-mouseX/14,225);
vertex(30-mouseX/14,225);
vertex(30-mouseX/14,205);
vertex(20-mouseX/14,205);
vertex(20-mouseX/14,185);
vertex(10-mouseX/14,185);
vertex(10-mouseX/14,165);
vertex(0-mouseX/14,165);
endShape();
/////////////////////
//////Far City///////
/////////////////////
//Highway supports
fill(-0.2125*mouseY+198,-0.295*mouseY+220,-0.305*mouseY+230);
rect( 60-mouseX/14, 400, 65-mouseX/14, 266);
rect( 85-mouseX/14, 400, 90-mouseX/14, 275);
rect( 205-mouseX/14, 400, 210-mouseX/14, 298);
rect( 230-mouseX/14, 400, 235-mouseX/14, 302);
rect( 255-mouseX/14, 400, 260-mouseX/14, 306);
rect( 295-mouseX/14, 400, 300-mouseX/14, 306);
rect( 320-mouseX/14, 400, 325-mouseX/14, 302);
rect( 345-mouseX/14, 400, 350-mouseX/14, 298);
rect( 370-mouseX/14, 400, 375-mouseX/14, 290);
// Rotated rectangle for highway from top left to center
fill(-0.2125*mouseY+198,-0.295*mouseY+220,-0.305*mouseY+230);
quad (40-mouseX/14,260,265-mouseX/14,300,265-mouseX/14,312,40-mouseX/14,272);
quad (160-mouseX/14,325,380-mouseX/14,285,380-mouseX/14,297,160-mouseX/14,337);
// Car lights, slowly move up the highway 1 (runs from right to left) [slope =0.177]
// They move using framecount, multiplied by the slope
// Cars are queued up off screen so that it appears to be a continuous stream of cars.
// However, if you leave the program running for long enough, it will run out of cars.
fill (250,100,100,(mouseY)/1.5);
ellipse (500-mouseX/14-frameCount*0.05,345.41-frameCount*0.00885, 2.5,2.5);
ellipse (450-mouseX/14-frameCount*0.05,336.56-frameCount*0.00885, 2.5,2.5);
ellipse (420-mouseX/14-frameCount*0.05,331.25-frameCount*0.00885, 2.5,2.5);
ellipse (395-mouseX/14-frameCount*0.05,326.83-frameCount*0.00885, 2.5,2.5);
ellipse (375-mouseX/14-frameCount*0.05,323.29-frameCount*0.00885, 2.5,2.5);
ellipse (320-mouseX/14-frameCount*0.05,313.56-frameCount*0.00885, 2.5,2.5);
ellipse (280-mouseX/14-frameCount*0.05,306.48-frameCount*0.00885, 2.5,2.5);
ellipse (250-mouseX/14-frameCount*0.05,301.17-frameCount*0.00885, 2.5,2.5);
ellipse (230-mouseX/14-frameCount*0.05,297.63-frameCount*0.00885, 2.5,2.5);
ellipse (190-mouseX/14-frameCount*0.05,290.55-frameCount*0.00885, 2.5,2.5);
ellipse (130-mouseX/14-frameCount*0.05,279.93-frameCount*0.00885, 2.5,2.5);
ellipse (100-mouseX/14-frameCount*0.05,274.62-frameCount*0.00885, 2.5,2.5);
ellipse (70-mouseX/14-frameCount*0.05,269.31-frameCount*0.00885, 2.5,2.5);
// Rotated rectangle for highway from bottom left to top right
fill(-0.2125*mouseY+198,-0.295*mouseY+220,-0.305*mouseY+230);
quad (160-mouseX/14,325,380-mouseX/14,285,380-mouseX/14,297,160-mouseX/14,337);
//Highway cars, going other way, slope is just negative instead.
fill (250,100,100,(mouseY)/1.5);
ellipse (40-mouseX/14+frameCount*0.05,350.58-frameCount*0.00885, 2.5,2.5);
ellipse (80-mouseX/14+frameCount*0.05,343.5-frameCount*0.00885, 2.5,2.5);
ellipse (140-mouseX/14+frameCount*0.05,332.88-frameCount*0.00885, 2.5,2.5);
ellipse (180-mouseX/14+frameCount*0.05,325.8-frameCount*0.00885, 2.5,2.5);
ellipse (213-mouseX/14+frameCount*0.05,320-frameCount*0.00885, 2.5,2.5);
ellipse (240-mouseX/14+frameCount*0.05,315.221-frameCount*0.00885, 2.5,2.5);
ellipse (280-mouseX/14+frameCount*0.05,308.141-frameCount*0.00885, 2.5,2.5);
ellipse (300-mouseX/14+frameCount*0.05,304.6-frameCount*0.00885, 2.5,2.5);
ellipse (335-mouseX/14+frameCount*0.05,298.4-frameCount*0.00885, 2.5,2.5);
ellipse (370-mouseX/14+frameCount*0.05,292.2-frameCount*0.00885, 2.5,2.5);
//Far City Layer 1, buildings at the back
fill(-0.2125*mouseY+198,-0.295*mouseY+220,-0.305*mouseY+230);
rect(0-mouseX/12,400,45-mouseX/12,230);
rect(0-mouseX/12,400,50-mouseX/12,300);
triangle(45-mouseX/12,230,0-mouseX/12,270,22.5-mouseX/12,150);
rect (0-mouseX/12,400,160-mouseX/12,295);
rect (90-mouseX/12,400,170-mouseX/12,285);
rect (85-mouseX/12,400,165-mouseX/12,290);
rect (100-mouseX/12,400,180-mouseX/12,265);
rect (110-mouseX/12,400,160-mouseX/12,195);
rect (115-mouseX/12,400,155-mouseX/12,180);
rect (155-mouseX/12,400,195-mouseX/12,275);
rect (155-mouseX/12,400,200-mouseX/12,305);
rect (200-mouseX/12,400,300-mouseX/12,340);
rect (240-mouseX/12,400,300-mouseX/12,325);
rect (260-mouseX/12,400,295-mouseX/12,315);
rect (265-mouseX/12,400,290-mouseX/12,275);
rect (340-mouseX/12,400,450-mouseX/12,315);
rect (345-mouseX/12,400,450-mouseX/12,310);
rect (380-mouseX/12,400,450-mouseX/12,260);
triangle(380-mouseX/12,260,450-mouseX/12,260,435-mouseX/12,180);
rect (375-mouseX/12,260,450-mouseX/12,270);
rect (375-mouseX/12,280,450-mouseX/12,290);
// Far city lights, faint lights
fill (160,160,160,(mouseY)/1.3-120-200*sin(frameCount*0.03)/1.5);
rectMode(CENTER);
rect(146-mouseX/12, 205, 8,3);
rect(150-mouseX/12, 265, 5,3);
rect(126-mouseX/12, 225, 4,3);
rect(140-mouseX/12, 284, 35,3);
rect(146-mouseX/12, 205, 5,3);
rect(175-mouseX/12, 295, 15,3);
rect(174-mouseX/12, 316, 6,3);
rect(149-mouseX/12, 305, 6,3);
rect(253-mouseX/12, 339, 4,4);
rect(214-mouseX/12, 352, 4,4);
rect(281-mouseX/12, 285, 8,3);
rect(276-mouseX/12, 325, 4,4);
rect(274-mouseX/12, 312, 10,3);
rect(37-mouseX/12, 238, 5,3);
rect(35-mouseX/12, 268, 5,3);
rectMode(CORNERS);
//////////////////////////
///BACKGROUND BUILDINGS///
//////////////////////////
//Background Road (for the streetcar). Slope: (340-365)/(325-180)= -0.172
fill (-0.17*mouseY+148,-0.17*mouseY+135,-0.19*mouseY+145);
quad(180-mouseX/8,365,325-mouseX/8,340,325-mouseX/8,400,190-mouseX/8,400);
//Streetcar Line
stroke (125-0.17*mouseY);
strokeWeight(1);
line(180-mouseX/8,345,325-mouseX/8,320);
line(185-mouseX/8+mouseX*0.5,361-0.172*mouseX*0.5,185-mouseX/8+mouseX*0.5,345.56-0.172*mouseX*0.5);
//Streetcar
//Not a shape, but instead a thick line.
stroke(-0.1675*mouseY+166,-0.1325*mouseY+85,-0.085*mouseY+72);
strokeCap(SQUARE);
strokeWeight(10);
line(180-mouseX/8+mouseX*0.5,361-0.172*mouseX*0.5,200-mouseX/8+mouseX*0.5,357.56-0.172*mouseX*0.5);
strokeWeight(4);
stroke(-0.1825*mouseY+216,-0.14*mouseY+177,-0.075*mouseY+128);
line(178-mouseX/8+mouseX*0.5,355-0.172*mouseX*0.5,200-mouseX/8+mouseX*0.5,351.56-0.172*mouseX*0.5);
noStroke();
strokeCap(ROUND);
//streetcar backlight
fill (250,100,100,(mouseY)/1.5);
ellipse(180-mouseX/8+mouseX*0.5,361-0.172*mouseX*0.5,2,2);
//Very subtle fog effect at night
fill (212,151,102,(mouseY)/1.3-295);
ellipse (width/2, 400, 500+100*sin(frameCount*0.005),500+100*sin(frameCount*0.005));
//Background buildings
//Triangle building
fill(-0.08*mouseY+200,-0.12*mouseY+205,-0.0925*mouseY+205);
triangle(-25-mouseX/6,325,50-mouseX/6,325,12.5-mouseX/6,55);
//White highlight
fill (-0.09*mouseY+235,-0.1375*mouseY+235,-0.1075*mouseY+235);
triangle(7.5-mouseX/6,245,20-mouseX/6,245,12.5-mouseX/6,55);
//Roofed building
//Lit fill
fill(-0.18*mouseY+230,-0.25*mouseY+238,-0.265*mouseY+225);
rect(95-mouseX/6,400,145-mouseX/6,260);
//Shadow fill
fill(-0.2*mouseY+220,-0.23*mouseY+214,-0.1875*mouseY+180);
rect(145-mouseX/6,400,175-mouseX/6,260);
//Lit roof fill
fill(-0.0225*mouseY+99,-0.0875*mouseY+109,-0.1*mouseY+124);
quad(85-mouseX/6,260,185-mouseX/6,260,160-mouseX/6,230,110-mouseX/6,230);
//Shadow roof fill
fill(-0.0225*mouseY+82,-0.0825*mouseY+92,-0.1025*mouseY+103);
quad(150-mouseX/6,260,185-mouseX/6,260,160-mouseX/6,230,140-mouseX/6,230);
//Windows
//Transparent during the day
rectMode(CENTER);
fill (215,188,170,(mouseY)/1.3-50);
rect(105-mouseX/6, 270, 6,10);
rect(120-mouseX/6, 270, 6,10);
rect(120-mouseX/6, 290, 6,10);
rect(135-mouseX/6, 290, 6,10);
rect(105-mouseX/6, 310, 6,10);
rect(135-mouseX/6, 310, 6,10);
rect(157-mouseX/6, 270, 3,10);
rect(170-mouseX/6, 270, 3,10);
rect(157-mouseX/6, 310, 3,10);
rect(157-mouseX/6, 330, 3,10);
rect(170-mouseX/6, 330, 3,10);
rectMode(CORNERS);
//Right skyscraper, lit areas
fill(-0.1175*mouseY+201,-0.1875*mouseY+205,-0.17*mouseY+190);
rect(355-mouseX/8,450,500-mouseX/8,325);
rect(375-mouseX/8,450,450-mouseX/8,315);
rect(385-mouseX/8,450,500-mouseX/8,290);
rect(395-mouseX/8,450,440-mouseX/8,120);
rect(400-mouseX/8,450,435-mouseX/8,90);
rect(405-mouseX/8,450,430-mouseX/8,60);
rect(414-mouseX/8,450,421-mouseX/8,10);
// Shaded areas on tower
fill(-0.0775*mouseY+170,-0.15*mouseY+176,-0.14*mouseY+166);
rect(422-mouseX/8,325,440-mouseX/8,125);
rect(435-mouseX/8,120,422-mouseX/8,95);
rect(430-mouseX/8,90,422-mouseX/8,65);
// Windows
// Has 2 colours, so there are lines of stroke designation between the code
stroke (215,188,136,(mouseY)/1.3-50);
strokeCap(SQUARE);
strokeWeight(1.5);
stroke (250,246,243,(mouseY)/1.3-50);
line(402-mouseX/8,100,418-mouseX/8,100);
line(405-mouseX/8,120,412-mouseX/8,120);
line(408-mouseX/8,80,412-mouseX/8,80);
stroke (215,188,136,(mouseY)/1.3-50);
line(398-mouseX/8,130,418-mouseX/8,130);
line(398-mouseX/8,140,412-mouseX/8,140);
line(410-mouseX/8,150,418-mouseX/8,150);
line(398-mouseX/8,170,418-mouseX/8,170);
line(412-mouseX/8,180,415-mouseX/8,180);
stroke (250,246,243,(mouseY)/1.3-50);
line(403-mouseX/8,190,413-mouseX/8,190);
line(410-mouseX/8,200,418-mouseX/8,200);
stroke (215,188,136,(mouseY)/1.3-50);
line(398-mouseX/8,220,410-mouseX/8,220);
line(398-mouseX/8,230,418-mouseX/8,230);
line(400-mouseX/8,250,418-mouseX/8,250);
line(398-mouseX/8,260,412-mouseX/8,260);
line(400-mouseX/8,270,410-mouseX/8,270);
stroke (250,246,243,(mouseY)/1.3-50);
line(398-mouseX/8,290,418-mouseX/8,290);
stroke (215,188,136,(mouseY)/1.3-50);
line(398-mouseX/8,300,410-mouseX/8,300);
line(388-mouseX/8,310,420-mouseX/8,310);
line(378-mouseX/8,320,418-mouseX/8,320);
stroke (250,246,243,(mouseY)/1.3-50);
line(378-mouseX/8,330,415-mouseX/8,330);
stroke (215,188,136,(mouseY)/1.3-50);
line(388-mouseX/8,350,410-mouseX/8,350);
noStroke();
//Black block building
fill(-0.055*mouseY+94,-0.08*mouseY+94,-0.0675*mouseY+94);
rect(305-mouseX/6,450,385-mouseX/6,170);
rect(318-mouseX/6,450,372-mouseX/6,160);
//Windows
stroke (215,188,136,(mouseY)/1.3-50);
strokeCap(SQUARE);
strokeWeight(1.5);
line (325-mouseX/6,240, 335-mouseX/6, 240);
line (315-mouseX/6,230, 335-mouseX/6, 230);
stroke (250,246,243,(mouseY)/1.3-50);
line (315-mouseX/6,210, 320-mouseX/6, 210);
stroke (215,188,136,(mouseY)/1.3-50);
line (320-mouseX/6,180, 335-mouseX/6, 180);
stroke (250,246,243,(mouseY)/1.3-50);
line (315-mouseX/6,280, 340-mouseX/6, 280);
stroke (215,188,136,(mouseY)/1.3-50);
line (350-mouseX/6,280, 360-mouseX/6, 280);
line (360-mouseX/6,300, 380-mouseX/6, 300);
line (340-mouseX/6,300, 355-mouseX/6, 300);
stroke (250,246,243,(mouseY)/1.3-50);
line (360-mouseX/6,310, 370-mouseX/6, 310);
stroke (215,188,136,(mouseY)/1.3-50);
line (330-mouseX/6,330, 345-mouseX/6, 330);
line (320-mouseX/6,340, 350-mouseX/6, 340);
line (340-mouseX/6,350, 365-mouseX/6, 350);
line (320-mouseX/6,310, 340-mouseX/6, 310);
strokeCap(ROUND);
noStroke();
//Lighter highlight
fill(-0.07*mouseY+112,-0.0925*mouseY+108,-0.0675*mouseY+109);
rect(340-mouseX/6,260,385-mouseX/6,170);
//brown block buildings
fill(-0.155*mouseY+161,-0.0875*mouseY+105,-0.04*mouseY+97);
rect (0-mouseX/4,400,80-mouseX/4,320);
rect (80-mouseX/4,335,235-mouseX/4,330);
rect (360-mouseX/4, 345, 450-mouseX/4, 350);
rect (200-mouseX/4,365,360-mouseX/4,370);
//darker coloured
fill(-0.21*mouseY+144,-0.1475*mouseY+97,-0.1175*mouseY+90);
rect (80-mouseX/4,400,185-mouseX/4,315);
rect (80-mouseX/4,400,235-mouseX/4,335);
rect (360-mouseX/4, 400, 450-mouseX/4, 350);
rect (200-mouseX/4,400,360-mouseX/4,370);
//Trees
//Trunk
stroke (-0.225*mouseY+179,-0.2325*mouseY+167,-0.2325*mouseY+161);
//Main trunk
strokeWeight(5);
line (185-mouseX/4,360, 185-mouseX/4, 400);
line (135-mouseX/4,355, 135-mouseX/4, 400);
line (85-mouseX/4,355, 85-mouseX/4, 400);
line (235-mouseX/4,350, 235-mouseX/4, 400);
line (285-mouseX/4,355, 285-mouseX/4, 400);
line (335-mouseX/4,360, 335-mouseX/4, 400);
line (385-mouseX/4,350, 385-mouseX/4, 400);
line (435-mouseX/4,360, 435-mouseX/4, 400);
//Smaller branches
strokeWeight(2);
line (175-mouseX/4,360, 185-mouseX/4, 385);
line (195-mouseX/4,360, 185-mouseX/4, 385);
line (125-mouseX/4,355, 135-mouseX/4, 380);
line (145-mouseX/4,355, 135-mouseX/4, 380);
line (75-mouseX/4,360, 85-mouseX/4, 385);
line (95-mouseX/4,360, 85-mouseX/4, 385);
line (225-mouseX/4,350, 235-mouseX/4, 375);
line (245-mouseX/4,350, 235-mouseX/4, 375);
line (275-mouseX/4,355, 285-mouseX/4, 380);
line (295-mouseX/4,355, 285-mouseX/4, 380);
line (325-mouseX/4,360, 335-mouseX/4, 385);
line (345-mouseX/4,360, 335-mouseX/4, 385);
line (375-mouseX/4,350, 385-mouseX/4, 375);
line (395-mouseX/4,350, 385-mouseX/4, 375);
line (425-mouseX/4,360, 435-mouseX/4, 385);
line (445-mouseX/4,360, 435-mouseX/4, 385);
noStroke();
//Leaves
rectMode(CENTER);
fill (-0.13*mouseY+113,-0.235*mouseY+152,-0.13*mouseY+89);
rect (185-mouseX/4, 360, 25,25);
rect (185-mouseX/4, 360, 35,15);
rect (135-mouseX/4, 355, 25,25);
rect (135-mouseX/4, 355, 35,15);
rect (85-mouseX/4, 360, 25,25);
rect (85-mouseX/4, 360, 35,15);
rect (235-mouseX/4,350, 25,25);
rect (235-mouseX/4,350, 35,15);
rect (285-mouseX/4,355, 25,25);
rect (285-mouseX/4,355, 35,15);
rect (335-mouseX/4,360, 25,25);
rect (335-mouseX/4,360, 35,15);
rect (385-mouseX/4,350, 25,25);
rect (385-mouseX/4,350, 35,15);
rect (435-mouseX/4,360, 25,25);
rect (435-mouseX/4,360, 35,15);
rectMode(CORNERS);
//////////////////////
////Midground city////
//////////////////////
//Lady building left
fill (-0.08*mouseY+168,-0.1325*mouseY+191,-0.1475*mouseY+195);
rect (0-mouseX/2,400, 80-mouseX/2, 270);
//Windows
//Light grey
fill (0.0775*mouseY+215,0.0475*mouseY+201,189);
rect (0-mouseX/2, 400, 40-mouseX/2, 270);
rect (55-mouseX/2, 275, 75-mouseX/2, 305);
//Dark grey
fill(0.1625*mouseY+181,0.13*mouseY+168,0.07*mouseY+159);
rect (30-mouseX/2,400, 40-mouseX/2, 270);
rect (55-mouseX/2, 320, 75-mouseX/2, 355);
//Roof
fill(-0.0575*mouseY+94,-0.0225*mouseY+63,52);
quad(-5-mouseX/2,265, 85-mouseX/2, 265, 65-mouseX/2, 235, 15-mouseX/2, 235);
//White outlines
stroke (-0.095*mouseY+245,-0.14*mouseY+225,-0.0725*mouseY+196);
strokeWeight(3);
noFill();
//Upper right window
rect (55-mouseX/2, 275, 75-mouseX/2, 305);
line (60-mouseX/2, 275, 60-mouseX/2, 305);
line (65-mouseX/2, 275, 65-mouseX/2, 305);
line (70-mouseX/2, 275, 70-mouseX/2, 305);
//mini rectangle accent
fill(163,141,141);
rect (55-mouseX/2, 300, 75-mouseX/2, 305);
noFill();
//Lower right window
rect (55-mouseX/2, 320, 75-mouseX/2, 355);
rect (55-mouseX/2, 335, 75-mouseX/2, 344);
line (60-mouseX/2, 335, 60-mouseX/2, 355);
line (70-mouseX/2, 335, 70-mouseX/2, 355);
//Left window frame
line (0-mouseX/2,270,0-mouseX/2,360);
line (10-mouseX/2,270,10-mouseX/2,360);
line (30-mouseX/2,270,30-mouseX/2,360);
line (40-mouseX/2,270,40-mouseX/2,360);
beginShape();
vertex (40-mouseX/2,306);
vertex (30-mouseX/2,311);
vertex (10-mouseX/2,311);
vertex (0-mouseX/2,306);
endShape ();
beginShape();
vertex (40-mouseX/2,314);
vertex (30-mouseX/2,319);
vertex (10-mouseX/2,319);
vertex (0-mouseX/2,314);
endShape ();
//Lower left Window fill
noStroke();
fill(-0.1325*mouseY+198,-0.1325*mouseY+165,-0.0675*mouseY+141);
beginShape();
vertex (42-mouseX/2,360);
vertex (42-mouseX/2,340);
vertex (30-mouseX/2,345);
vertex (10-mouseX/2,345);
vertex (0-mouseX/2,340);
vertex (0-mouseX/2,360);
endShape ();
//Upper Left Window fill
beginShape();
vertex (42-mouseX/2,275);
vertex (30-mouseX/2,280);
vertex (10-mouseX/2,280);
vertex (0-mouseX/2,275);
vertex (0-mouseX/2,270);
vertex (42-mouseX/2,270);
vertex (42-mouseX/2,275);
endShape();
noStroke();
//Blue outlining near roof
fill (-0.06*mouseY+99,-0.13*mouseY+131,-0.1475*mouseY+134);
rect (0-mouseX/2,265, 80-mouseX/2, 270);
//Outlining in the center, from right to left
noFill();
stroke (-0.1325*mouseY+198,-0.1325*mouseY+165,-0.0675*mouseY+141);
strokeWeight (4);
beginShape();
vertex (80-mouseX/2,310);
vertex (40-mouseX/2,310);
vertex (30-mouseX/2,315);
vertex (10-mouseX/2,315);
vertex (0-mouseX/2,310);
vertex (-2-mouseX/2,310);
endShape ();
noStroke();
//Accents
//Dark blue
fill(-0.06*mouseY+99,-0.13*mouseY+131,-0.1475*mouseY+134);
rect(42-mouseX/2,345, 100-mouseX/2, 370);
//Dark grey stairs
fill(-0.0675*mouseY+86,-0.07*mouseY+73,-0.0925*mouseY+65);
rect(42-mouseX/2,345, 54-mouseX/2, 347);
rect(41-mouseX/2,348, 55-mouseX/2, 350);
rect(40-mouseX/2,351, 56-mouseX/2, 353);
rect(39-mouseX/2,354, 57-mouseX/2, 356);
//Lady building right
fill (-0.025*mouseY+163,-0.11*mouseY+188,-0.0575*mouseY+142);
rect (120-mouseX/2,400, 200-mouseX/2,290);
//Windows
//Light grey
fill (0.0775*mouseY+215,0.0475*mouseY+201,189);
rect (120-mouseX/2,400, 160-mouseX/2, 290);
rect (175-mouseX/2, 295, 195-mouseX/2, 325);
//Dark grey
fill(0.1625*mouseY+181,0.13*mouseY+168,0.07*mouseY+159);
rect (150-mouseX/2,400, 160-mouseX/2, 290);
rect (175-mouseX/2, 340, 195-mouseX/2, 375);
//Roof
fill(-0.04*mouseY+94,-0.0125*mouseY+52,0.0175*mouseY+56);
quad(115-mouseX/2,285, 205-mouseX/2, 285, 185-mouseX/2, 255, 135-mouseX/2, 255);
//White outlines
stroke (-0.095*mouseY+245,-0.14*mouseY+225,-0.0725*mouseY+196);
strokeWeight(3);
noFill();
//Upper right window
rect (175-mouseX/2, 295, 195-mouseX/2, 325);
line (180-mouseX/2, 295, 180-mouseX/2, 325);
line (185-mouseX/2, 295, 185-mouseX/2, 325);
line (190-mouseX/2, 295, 190-mouseX/2, 325);
//mini rectangle accent
fill(181,168,159);
rect (175-mouseX/2, 320, 195-mouseX/2, 325);
noFill();
//Lower right window
rect (175-mouseX/2, 340, 195-mouseX/2, 375);
rect (175-mouseX/2, 355, 195-mouseX/2, 364);
line (180-mouseX/2, 355, 180-mouseX/2, 375);
line (190-mouseX/2, 355, 190-mouseX/2, 375);
//Left window frame
line (120-mouseX/2,290,120-mouseX/2,380);
line (130-mouseX/2,290,130-mouseX/2,380);
line (150-mouseX/2,290,150-mouseX/2,380);
line (160-mouseX/2,290,160-mouseX/2,380);
beginShape();
vertex (160-mouseX/2,326);
vertex (150-mouseX/2,331);
vertex (130-mouseX/2,331);
vertex (120-mouseX/2,326);
endShape ();
beginShape();
vertex (160-mouseX/2,334);
vertex (150-mouseX/2,339);
vertex (130-mouseX/2,339);
vertex (120-mouseX/2,334);
endShape ();
//Lower left Window fill
noStroke();
fill(-0.095*mouseY+245,-0.14*mouseY+225,-0.0725*mouseY+196);
beginShape();
vertex (160-mouseX/2,380);
vertex (160-mouseX/2,360);
vertex (150-mouseX/2,365);
vertex (130-mouseX/2,365);
vertex (120-mouseX/2,360);
vertex (120-mouseX/2,380);
endShape ();
//Upper Left Window fill
noStroke();
beginShape();
vertex (160-mouseX/2,295);
vertex (150-mouseX/2,300);
vertex (130-mouseX/2,300);
vertex (120-mouseX/2,295);
vertex (120-mouseX/2,290);
vertex (160-mouseX/2,290);
vertex (160-mouseX/2,295);
endShape();
noStroke();
//Red outlining
fill (-0.1125*mouseY+127,-0.0225*mouseY+29,0.06*mouseY+25);
rect (120-mouseX/2,285, 200-mouseX/2, 290);
//Outlining in the center, from right to left
noFill();
stroke (-0.1125*mouseY+127,-0.0225*mouseY+29,0.06*mouseY+25);
strokeWeight (4);
beginShape();
vertex (200-mouseX/2,330);
vertex (160-mouseX/2,330);
vertex (150-mouseX/2,335);
vertex (130-mouseX/2,335);
vertex (120-mouseX/2,330);
vertex (118-mouseX/2,330);
endShape ();
noStroke();
//Accents
//Dark green
fill(-0.0725*mouseY+103,-0.145*mouseY+127,-0.0975*mouseY+85);
rect(162-mouseX/2,365, 220-mouseX/2, 390);
//Dark grey stairs
fill(-0.0675*mouseY+86,-0.07*mouseY+73,-0.0925*mouseY+65);
rect(162-mouseX/2,365, 174-mouseX/2, 367);
rect(161-mouseX/2,368, 175-mouseX/2, 370);
rect(160-mouseX/2,371, 176-mouseX/2, 373);
rect(159-mouseX/2,374, 177-mouseX/2, 376);
//Streetlamp poles
fill(-0.295*mouseY+170,-0.295*mouseY+168,-0.3125*mouseY+180);
rect (235-mouseX/2, 395, 240-mouseX/2, 280);
rect (100-mouseX/2, 395, 105-mouseX/2, 263.33);
rect (370-mouseX/2, 400, 375-mouseX/2, 296.67);
rect (505-mouseX/2, 395, 510-mouseX/2, 313.34);
//Midground street
fill (-0.2075*mouseY+177,-0.2075*mouseY+166,-0.25*mouseY+184);
triangle(0-mouseX/2,350,345-mouseX/2,400,0-mouseX/2,400);
//Streetlamp light
fill (250,230,150,(mouseY)/2-135);
triangle (242.5-mouseX/2, 280, 262.5-pmouseX/2,400,222.5-pmouseX/2,400);
triangle (107.5-mouseX/2, 263.33, 127.5-pmouseX/2,400,87.5-pmouseX/2,400);
triangle (377.5-mouseX/2, 296.67, 397.5-pmouseX/2,400,357.5-pmouseX/2,400);
triangle (512.5-mouseX/2, 313.34, 532.5-pmouseX/2,400,492.5-pmouseX/2,400);
//Streetlamp head
fill(-0.295*mouseY+170,-0.295*mouseY+168,-0.3125*mouseY+180);
rect (235-mouseX/2, 280, 250-mouseX/2, 290);
rect (100-mouseX/2, 263.33, 115-mouseX/2, 273.33);
rect (370-mouseX/2, 296.67, 385-mouseX/2, 306.67);
rect (505-mouseX/2, 313.34, 520-mouseX/2, 323.34);
//Invisible midground street, to block the streetlight beams
fill (-0.2075*mouseY+177,-0.2075*mouseY+166,-0.25*mouseY+184);
triangle(0-mouseX/2,355,345-mouseX/2,405,0-mouseX/2,405);
//Darker midground street
fill (-0.1975*mouseY+110,-0.18*mouseY+103,-0.21*mouseY+115);
triangle(0-mouseX/2,371,210-mouseX/2,400,0-mouseX/2,400);
////////////////////////
////Foreground Fence////
////////////////////////
noFill();
stroke (-0.0675*mouseY+49,-0.075*mouseY+46,-0.0925*mouseY+51);
//Spokes
strokeWeight(2.5);
line (10-mouseX,400,10-mouseX,355);
line (30-mouseX,400,30-mouseX,355);
line (50-mouseX,400,50-mouseX,355);
line (70-mouseX,400,70-mouseX,355);
line (90-mouseX,400,90-mouseX,355);
line (110-mouseX,400,110-mouseX,355);
line (130-mouseX,400,130-mouseX,355);
line (150-mouseX,400,150-mouseX,355);
line (170-mouseX,400,170-mouseX,355);
line (190-mouseX,400,190-mouseX,355);
line (210-mouseX,400,210-mouseX,355);
//Bolded Spokes
strokeWeight(5);
line (10-mouseX,400,10-mouseX,350);
line (110-mouseX,400,110-mouseX,350);
line (210-mouseX,400,210-mouseX,350);
//Railing
line (0-mouseX,355, 210-mouseX, 355);
noStroke();
fill (-0.0675*mouseY+49,-0.075*mouseY+46,-0.0925*mouseY+51);
ellipse (10.5-mouseX,345, 10,10);
ellipse (110.5-mouseX,345, 10,10);
ellipse (210.5-mouseX,345, 10,10);
///////////////////////
///////Downtown////////
///////////////////////
//Building
fill(0.0675*mouseY+84,-0.0575*mouseY+84,-0.0625*mouseY+91);
rect (550-mouseX/1.5,400, 670-mouseX/1.5, 280);
//Windows
fill(0.34*mouseY+110,0.275*mouseY+110,0.1575*mouseY+124);
rect (560-mouseX/1.5,300, 580-mouseX/1.5, 325);
rect (595-mouseX/1.5,300, 615-mouseX/1.5, 325);
rect (630-mouseX/1.5,335, 650-mouseX/1.5, 360);
//Window dark fill
fill(0.04*mouseY+67,-0.04*mouseY+67,-0.055*mouseY+74);
rect (560-mouseX/1.5,320, 580-mouseX/1.5, 325);
rect (595-mouseX/1.5,320, 615-mouseX/1.5, 325);
rect (630-mouseX/1.5,355, 650-mouseX/1.5, 360);
//Roof rim
fill(-0.065*mouseY+150,-0.1775*mouseY+150,-0.21*mouseY+162);
rect (548-mouseX/1.5,280, 670-mouseX/1.5, 273);
//Street blocks
fill(0.0075*mouseY+172,-0.0875*mouseY+165,-0.09*mouseY+143);
rect (540-mouseX/1.5,400, 600-mouseX/1.5, 375);
rect (640-mouseX/1.5,400, 700-mouseX/1.5, 365);
//Lantern decorations
//Line where they hang from
stroke (79,52,43);
noFill();
strokeWeight(1.5);
arc (610-mouseX/1.5,210,250,250,radians(0), radians (115) );
noStroke();
//Lanterns
fill(0.1825*mouseY+182,-0.2625*mouseY+222,-0.145*mouseY+170);
ellipse (565-pmouseX/1.5,332 , 13,10);
fill(0.265*mouseY+149,0.145*mouseY+59,0.13*mouseY+60);
ellipse (585-pmouseX/1.5,338 , 13,10);
fill(0.07*mouseY+227,-0.2775*mouseY+228,-0.2125*mouseY+197);
ellipse (605-pmouseX/1.5,341 , 13,10);
fill(0.215*mouseY+169,-0.0975*mouseY+156,-0.225*mouseY+202);
ellipse (627-pmouseX/1.5,340 , 13,10);
fill(255,-0.2425*mouseY+214,-0.2325*mouseY+205);
ellipse (649-pmouseX/1.5,336 , 13,10);
//Lower right lanterns
fill(0.265*mouseY+149,0.145*mouseY+59,0.13*mouseY+60);
ellipse (620-pmouseX/1.5,365 , 8,6);
ellipse (630-pmouseX/1.5,365 , 8,6);
ellipse (640-pmouseX/1.5,365 , 8,6);
ellipse (650-pmouseX/1.5,365 , 8,6);
ellipse (660-pmouseX/1.5,365 , 8,6);
//Chinatown Gate
//Supports
fill (-0.1025*mouseY+183,-0.2175*mouseY+192,-0.24*mouseY+196);
//Left Supports
rect (475-mouseX/1.5,400, 480-mouseX/1.5,360);
rect (500-mouseX/1.5,400, 505-mouseX/1.5,360);
//Right Supports
rect (550-mouseX/1.5,400, 555-mouseX/1.5,360);
rect (575-mouseX/1.5,400, 580-mouseX/1.5,360);
//Central Supports
rect (500-mouseX/1.5,400, 505-mouseX/1.5,340);
rect (550-mouseX/1.5,400, 555-mouseX/1.5,340);
//Horizontal Supports
rect (475-mouseX/1.5,365, 505-mouseX/1.5, 368);
rect (550-mouseX/1.5,365, 580-mouseX/1.5, 368);
//Wooden detail
fill (-0.0325*mouseY+79,-0.03*mouseY+49,0.02*mouseY+45);
rect (474-mouseX/1.5,360, 506-mouseX/1.5, 363);
rect (549-mouseX/1.5,360, 581-mouseX/1.5, 363);
rect (495-mouseX/1.5,340, 560-mouseX/1.5, 343);
//Sign
rect (520-mouseX/1.5,345, 534-mouseX/1.5, 350);
fill(-0.06*mouseY+99,-0.13*mouseY+131,-0.1475*mouseY+134);
rect (522-mouseX/1.5,346, 532-mouseX/1.5, 349);
//Highlight
//Central Gate
fill (0.1125*mouseY+112,-0.185*mouseY+196,-0.2275*mouseY+179);
quad (500-mouseX/1.5,320,555-mouseX/1.5,320, 565-mouseX/1.5, 340, 490-mouseX/1.5,340);
//Left Gate
quad (480-mouseX/1.5,345,500-mouseX/1.5,345, 510-mouseX/1.5, 360, 470-mouseX/1.5,360);
//Right Gate
quad (555-mouseX/1.5,345,575-mouseX/1.5,345, 585-mouseX/1.5, 360, 545-mouseX/1.5,360);
//Downtown Street
fill (-0.1225*mouseY+137,-0.17*mouseY+126,-0.1975*mouseY+144);
rect (460-mouseX/1.5,390,700-mouseX/1.5,400);
triangle (461-mouseX/1.5,390,461-mouseX/1.5,400,430-mouseX/1.5,400);
////MOUSE POSITION AID////
/* I used this to help me figure out where my pointer is, in relation to each layer.
fill (0);
text(" x: "+(mouseX+mouseX/14)+" y: "+mouseY+" X is /14", 10, 15);
text(" day:"+(350-mouseY*2), 10 ,30);
text(" night:"+((mouseY)/1.3-50), 70 ,30);
text(" R:"+(0.1775*mouseY+147),10,45);
*/
///////////////////////
/////Custom cursor/////
///////////////////////
//Changes colour based on time of day
fill(-155+mouseY*1.5,-155+mouseY*1.5,-155+mouseY*1.5);
stroke(-155+mouseY*1.5,-155+mouseY*1.5,-155+mouseY*1.5);
strokeWeight(1.5);
triangle (mouseX-3,mouseY-5,mouseX+3,mouseY+1,mouseX-2,mouseY+4);
noStroke();
}
//Mouse click function, shows the title
void mousePressed (){
//I'm sorry.. I cheated and used variables to load a font! Sorry! It's a very minor element though.
PFont font;
PFont font2;
font = loadFont ("MicrosoftYaHeiLight-48.vlw");
font2 = loadFont ("MicrosoftPhagsPa-48.vlw");
//Lower framerate so we see the title for longer
frameRate(0.7);
fill(255, 180);
rectMode(CENTER);
rect (width/2, height/2, width*0.7, height*0.35, 5);
fill (0);
textFont (font, 38);
text ("san francisco", 90, height/2-10);
textFont (font2, 16);
text ("by william lu", 155, height/2+20);
text ("for ann", 170, height/2+40);
textSize (10);
rectMode(CORNERS);
}
