![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/09/stop-banner.png)
I chose to do the view from my window in NYC with the sun setting since I love to watch the sun set when I am home.
graanak-03-project
//Graana Khan
// Section B
function setup() {
createCanvas(600, 450);
}
function draw() {
if(mouseX < width/2){
background(207, 236, 246)
} else if(mouseX >= width/2){
background(10, 27, 51)
}
noStroke();
//sun
fill(254, 229, 150);
circle(303, 47 + (0.5 * mouseX), 77);
//moving clouds
fill(255);
rect(75 + (mouseX - 50), 47, 83, 36, 15);
rect(318 + (mouseX - 50), 112, 37, 15, 10);
rect(453 + (mouseX - 50), 57, 55, 32, 15);
rect(490 + (mouseX - 50), 47, 84, 28, 15);
//buildings
if(mouseX < width/2){
fill(197, 198, 200);
} else if(mouseX >= width/2){
fill(0);
}
rect(0, 171, 17, 111);
rect(3, 232, 50, 50);
rect(25, 202, 50, 80);
rect(38, 96, 22, 184);
rect(49, 220, 115, 63);
//building 1 with lights
rect(94, 137, 24, 146);
rect(155, 166, 58, 117);
//empire state building with lights
rect(213, 105, 35, 177);
triangle(213, 107, 231, 75, 248, 107);
push();
strokeWeight(2);
if(mouseX < width/2){
stroke(197, 198, 200)
} else if(mouseX >= width/2){
stroke(0)
}
line(231, 76, 231, 57);
pop();
rect(240, 257, 80, 25);
rect(262, 196, 41, 87);
rect(315, 153, 22, 130);
rect(326, 188, 43, 94);
//united nations building with lights
rect(369, 157, 76, 126);
//chrysler building
rect(389, 121, 26, 40);
triangle(389, 121, 402, 102, 415, 121);
rect(414, 262, 98, 21);
rect(456, 178, 28, 98);
rect(508, 188, 36, 94);
//building 2 with lights
beginShape();
vertex(480, 280);
vertex(480, 280);
vertex(480, 121);
vertex(513, 160);
vertex(513, 280);
vertex(513, 280);
endShape();
rect(538, 222, 44, 61);
rect(565, 121, 40, 162);
rect(240, 215, 75, 67);
rect(444, 217, 22, 63);
//building lights
if(mouseX < width/2){
fill(255, 255, 255, 150)
} else if(mouseX >= width/2){
fill(253, 229, 150, 150)
}
// United Nations lights
rect(373, 161, 69, 4);
rect(373, 169, 69, 4);
rect(373, 177, 69, 4);
rect(373, 185, 69, 4);
rect(373, 193, 69, 4);
rect(373, 201, 69, 4);
rect(373, 209, 69, 4);
rect(373, 217, 69, 4);
rect(373, 225, 69, 4);
rect(373, 233, 69, 4);
rect(373, 241, 69, 4);
rect(373, 249, 69, 4);
rect(373, 257, 69, 4);
//empire state lights
square(229, 85, 3);
square(224, 91, 3);
square(230, 91, 3);
square(235, 91, 3);
square(221, 96, 3);
square(227, 96, 3);
square(233, 96, 3);
square(239, 96, 3);
square(221, 101, 3);
square(227, 101, 3);
square(233, 101, 3);
square(239, 101, 3);
square(215, 107, 3);
square(221, 107, 3);
square(227, 107, 3);
square(233, 107, 3);
square(239, 107, 3);
square(245, 107, 3);
square(215, 112, 3);
square(221, 112, 3);
square(227, 112, 3);
square(233, 112, 3);
square(239, 112, 3);
square(245, 112, 3);
square(215, 118, 3);
square(221, 118, 3);
square(227, 118, 3);
square(233, 118, 3);
square(239, 118, 3);
square(245, 118, 3);
square(215, 123, 3);
square(221, 123, 3);
square(227, 123, 3);
square(233, 123, 3);
square(239, 123, 3);
square(245, 123, 3);
square(215, 128, 3);
square(221, 128, 3);
square(227, 128, 3);
square(233, 128, 3);
square(239, 128, 3);
square(245, 128, 3);
square(215, 133, 3);
square(221, 133, 3);
square(227, 133, 3);
square(233, 133, 3);
square(239, 133, 3);
square(245, 133, 3);
square(215, 138, 3);
square(221, 138, 3);
square(227, 138, 3);
square(233, 138, 3);
square(239, 138, 3);
square(245, 138, 3);
square(215, 143, 3);
square(221, 143, 3);
square(227, 143, 3);
square(233, 143, 3);
square(239, 143, 3);
square(245, 143, 3);
square(215, 148, 3);
square(221, 148, 3);
square(227, 148, 3);
square(233, 148, 3);
square(239, 148, 3);
square(245, 148, 3);
square(215, 153, 3);
square(221, 153, 3);
square(227, 153, 3);
square(233, 153, 3);
square(239, 153, 3);
square(245, 153, 3);
square(215, 158, 3);
square(221, 158, 3);
square(227, 158, 3);
square(233, 158, 3);
square(239, 158, 3);
square(245, 158, 3);
//building 1 lights
square(484, 130, 3);
square(484, 135, 3);
square(484, 140, 3);
square(484, 145, 3);
square(484, 150, 3);
square(484, 155, 3);
square(484, 160, 3);
square(484, 165, 3);
square(484, 170, 3);
square(489, 140, 3);
square(489, 145, 3);
square(489, 150, 3);
square(489, 155, 3);
square(489, 160, 3);
square(489, 165, 3);
square(489, 170, 3);
square(494, 145, 3);
square(494, 150, 3);
square(494, 155, 3);
square(494, 160, 3);
square(494, 165, 3);
square(494, 170, 3);
square(499, 150, 3);
square(499, 155, 3);
square(499, 160, 3);
square(499, 165, 3);
square(499, 170, 3);
square(504, 155, 3);
square(504, 160, 3);
square(504, 165, 3);
square(504, 170, 3);
//building 1 lights
rect(132, 222, 20, 3);
rect(132, 227, 20, 3);
rect(132, 232, 20, 3);
rect(132, 237, 20, 3);
rect(132, 242, 20, 3);
rect(132, 247, 20, 3);
rect(132, 252, 20, 3);
rect(132, 257, 20, 3);
rect(132, 262, 20, 3);
//water
if(mouseX < width/2){
fill(152, 179, 196)
} else if(mouseX >= width/2){
fill(53,57, 79)
}
rect(0, 281, 600, 170);
if(mouseX < width/2){
fill(109, 137, 147, 45)
} else if(mouseX >= width/2){
fill(12, 23, 38, 45)
}
rect(0, 281, 600, 38);
rect(337, 339, 262, 7, 5, 0, 0, 5);
rect(0, 347, 270, 27, 0, 15, 15, 0);
rect(-10, 392, 532, 10, 0, 8, 8, 0);
rect(343, 407, 256, 44, 35, 0, 0, 35);
//moving water lines
push();
stroke(255);
strokeWeight(3);
line(100 - mouseX, 410, 201 - mouseX, 410);
line(278 - mouseX, 314, 422 - mouseX, 314);
line(369 - mouseX, 333, 425 - mouseX, 333);
line(380 - mouseX, 420, 504 - mouseX, 420);
line(532 - mouseX, 340, 579 - mouseX, 340);
// ferry water lines
strokeWeight(1.5);
line(3 + mouseX, 337, 72 + mouseX, 337);
line(42 + mouseX, 352, 85 + mouseX, 352);
line(25 + mouseX, 366, 73 + mouseX, 366);
pop();
//moving ferry
fill(26, 35, 58);
rect(94 + mouseX, 353, 85, 8);
fill(255);
beginShape();
curveVertex(94 + mouseX, 353);
curveVertex(94 + mouseX, 353);
curveVertex(94 + mouseX, 333);
curveVertex(106 + mouseX, 331);
curveVertex(121 + mouseX, 331);
curveVertex(139 + mouseX, 335);
curveVertex(156 + mouseX, 339);
curveVertex(164 + mouseX, 342);
curveVertex(174 + mouseX, 349);
curveVertex(179 + mouseX, 353);
curveVertex(179 + mouseX, 353);
endShape();
triangle(107 + mouseX, 331, 107 + mouseX, 321, 118 + mouseX, 331);
stroke(255);
strokeWeight(2);
line(94 + mouseX, 338, 94 + mouseX, 328);
line(94 + mouseX, 328, 107 + mouseX, 328);
line(101 + mouseX, 333, 101 + mouseX, 328);
noStroke();
fill(132, 156, 208);
circle(102 + mouseX, 342, 10);
fill(0);
beginShape();
curveVertex(110 + mouseX, 345);
curveVertex(110 + mouseX, 345);
curveVertex(110 + mouseX, 338);
curveVertex(122 + mouseX, 338);
curveVertex(145 + mouseX, 341);
curveVertex(157 + mouseX, 345);
curveVertex(157 + mouseX, 345);
endShape();
if(mouseX >= width/2){
//stars
stroke(254, 229, 150);
strokeWeight(1);
push();
translate(28, 72);
rotate(radians(mouseX));
line(-6, 0, 6, 0);
line(0, -6, 0, 6);
pop();
push();
translate(151, 135);
rotate(radians(mouseX));
line(-3, 0, 3, 0);
line(0, -3, 0, 3);
pop();
push();
translate(287, 32);
rotate(radians(mouseX));
line(-6, 0, 6, 0);
line(0, -6, 0, 6);
pop();
push();
translate(427, 14);
rotate(radians(mouseX));
line(-3, 0, 3, 0);
line(0, -3, 0, 3);
pop();
push();
translate(442, 108);
rotate(radians(mouseX));
line(-6, 0, 6, 0);
line(0, -6, 0, 6);
pop();
push();
translate(582, 110);
rotate(radians(mouseX));
line(-3, 0, 3, 0);
line(0, -3, 0, 3);
pop();
noStroke();
//moon
push();
fill(255);
translate(519, 57);
circle(0, 0, 40);
pop();
push();
fill(255, 255, 255, 100);
translate(519, 57);
if(mouseX < 500 || mouseX >= 400){
scale(0.25 * (mouseX/100))
}
circle(0,0, 50);
circle(0,0, 42);
pop();
}
}
