sketch

```
//Ryu Kondrup
//rkondrup@andrew.cmu.edu
//Section D
//project-03
var cloudShiftX = 200;
var cloudShiftY = 100;
var cloudShift0X = -150;
var cloudShift0Y = 70;
var adjustShift = 100;
//greyWhite
var greyWhiteR = 245;
var greyWhiteG = 241;
var greyWhiteB = 230;
//windows colors
var windowsR = 160;
var windowsG = 160;
var windowsB = 150;
//lights colors
var lightsR = 255;
var lightsG = 197;
var lightsB = 107;
//grey sky colors
var greySkyR = 226;
var greySkyG = 226;
var greySkyB = 214;
//sky colors
var skyR = 182;
var skyG = 222;
var skyB = 228;
//water color
var waterR = 162;
var waterG = 222;
var waterB = 208;
//grey water
var greyWaterR = 160;
var greyWaterG = 160;
var greyWaterB = 150;
function setup() {
createCanvas(640, 480);
}
function draw() {
//colors!!!!!!!!!
background(greySkyR, greySkyG, greySkyB);
noStroke();
//to change background color
if ((mouseX >= 640) & (mouseX <= 640)){
mouseX = 640;
}
if ((mouseX > 0) & (mouseX < 640)){
greySkyR = mouseX*((182-226)/640) + 226;
greySkyG = mouseX*((222-226)/640) + 226;
greySkyB = mouseX*((228-214)/640) + 214;
}
//to change water color
if ((mouseX >= 640) & (mouseX <= 640)){
mouseX = 640;
}
/* if ((mouseX >= 640) & (mouseX <= 640)){
mouseX = 640;
}
if ((mouseX > 0) & (mouseX , 640)){
}
*/
//to turn on the lights
if ((mouseIsPressed) && (windowsR = 160)) {
windowsR = lightsR;
windowsG = lightsG;
windowsB = lightsB;
}
else if ((mouseIsPressed) & (windowsR = 225)) {
windowsR = 160;
windowsG = 160;
windowsB = 150;
//NEEDS SOME WORK
}
//CLOUD
//cloud1
fill(greyWhiteR, greyWhiteG, greyWhiteB);
ellipse(mouseX + 0, 125, 20);
ellipse(mouseX + 20, 120, 35);
ellipse(mouseX + 40, 120, 55);
ellipse(mouseX + 65, 125, 40);
ellipse(mouseX + 90, 120, 45);
ellipse(mouseX + 115, 125, 20);
ellipse(mouseX + 125, 120, 30);
ellipse(mouseX + 145, 125, 20);
//cloud2
ellipse(mouseX + 0 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);
ellipse(mouseX + 20 + cloudShiftX + adjustShift, 100 + cloudShiftY, 35);
ellipse(mouseX + 40 + cloudShiftX + adjustShift, 100 + cloudShiftY, 55);
ellipse(mouseX + 65 + cloudShiftX + adjustShift, 105 + cloudShiftY, 40);
ellipse(mouseX + 90 + cloudShiftX + adjustShift, 100 + cloudShiftY, 45);
ellipse(mouseX + 115 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);
ellipse(mouseX + 125 + cloudShiftX + adjustShift, 100 + cloudShiftY, 30);
ellipse(mouseX + 145 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);
//cloud0
ellipse(mouseX + 0 + cloudShift0X, 105 + cloudShift0Y, 20);
ellipse(mouseX + 20 + cloudShift0X, 100 + cloudShift0Y, 35);
ellipse(mouseX + 40 + cloudShift0X, 100 + cloudShift0Y, 55);
ellipse(mouseX + 65 + cloudShift0X, 105 + cloudShift0Y, 40);
ellipse(mouseX + 90 + cloudShift0X, 100 + cloudShift0Y, 45);
ellipse(mouseX + 115 + cloudShift0X, 105 + cloudShift0Y, 20);
ellipse(mouseX + 125 + cloudShift0X, 100 + cloudShift0Y, 30);
ellipse(mouseX + 145 + cloudShift0X, 105 + cloudShift0Y, 20);
//cloud-1
ellipse(mouseX + 0 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 20 + 3*cloudShift0X, 100 + .5*cloudShiftY, 35);
ellipse(mouseX + 40 + 3*cloudShift0X, 100 + .5*cloudShiftY, 55);
ellipse(mouseX + 65 + 3*cloudShift0X, 105 + .5*cloudShiftY, 40);
ellipse(mouseX + 90 + 3*cloudShift0X, 100 + .5*cloudShiftY, 45);
ellipse(mouseX + 115 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 125 + 3*cloudShift0X, 100 + .5*cloudShiftY, 30);
ellipse(mouseX + 145 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);
//cloud3
ellipse(mouseX + 0 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 20 + 5*cloudShift0X, 100 + .5*cloudShiftY, 35);
ellipse(mouseX + 40 + 5*cloudShift0X, 100 + .5*cloudShiftY, 55);
ellipse(mouseX + 65 + 5*cloudShift0X, 105 + .5*cloudShiftY, 40);
ellipse(mouseX + 90 + 5*cloudShift0X, 100 + .5*cloudShiftY, 45);
ellipse(mouseX + 115 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 125 + 5*cloudShift0X, 100 + .5*cloudShiftY, 30);
ellipse(mouseX + 145 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);
/*
greyWhite = color(245, 241, 230);
greySky = color(200, 200, 185);
greyWater = color(160, 160, 150);
//windows = color(160, 160, 150);
windows = color(window1R, window1G, window1B);
sky = color(124, 35, 60);
//lights = color(225, 193, 96);
lights = color(lightsR, window2G, window2B);
water = color(81, 18, 35);
*/
fill(greyWhiteR, greyWhiteG, greyWhiteB);
//BASE PIECES
//base plate
rect(40, 322, 562, 10);
//2nd base plate
rect(104, 310, 433, 15);
//2nd base plate right triangle
triangle(537, 310, 537, 325, 572, 325);
//3rd base plate
rect(109, 299, 320, 15);
//3rd base plate right triangle
triangle(429, 299, 429, 310, 469, 310);
//4th base plate
rect(115, 283, 75, 18);
//4th base plate triangle
triangle(190, 283, 190, 301, 223, 301);
//opera house FILL HOLES
//left rectangle
rect(169, 234, 120, 80);
//middle rectangle
rect(290, 255, 100, 60);
//right rectangle
rect(390, 276, 130, 40);
//CURVES
//curve 1
bezier(104, 220, 123, 223, 173, 227, 200, 234);
triangle(95, 219, 200, 234, 190, 283);
//curve 1 small
triangle(95, 219, 121, 237, 121, 258);
//curve 2
triangle(147, 190, 255, 228, 223, 299);
bezier(147, 190, 185, 201, 227, 217, 255, 228);
//litle triangle addition
triangle(147, 190, 162, 229, 185, 232);
//curve 3 the big one
//subcurve 3 big
triangle(335, 255, 229, 146, 287, 299);
bezier(229, 146, 277, 178, 315, 217, 335, 255);
//subcurve 3 small
triangle(237, 222, 229, 146, 287, 299);
//curve 4
triangle(335, 255, 460, 240, 407, 299);
bezier(335, 255, 375, 243, 425, 239, 460, 240);
//curve 5
triangle(395, 253, 472, 276, 429, 299);
bezier(395, 253, 424, 258, 451, 267, 472, 276);
//curve 6
triangle(472, 276, 550, 269, 512, 310);
bezier(472, 276, 498, 270, 525, 268, 550, 269);
//WINDOWS
fill(windowsR, windowsG, windowsB);
//window 1
triangle(121, 237, 190, 283, 121, 283);
//window 2
bezier(190, 283, 192, 270, 208, 270, 223, 299);
//window 3
bezier(223, 299, 246, 279, 269, 281, 287, 299);
//window 4
bezier(287, 299, 307, 281, 335, 281, 347, 299);
//winodw 5
bezier(347, 299, 362, 279, 384, 282, 407, 299);
//window 6
triangle(408, 271, 408, 299, 429, 299);
//window 7
bezier(429, 299, 447, 291, 461, 291, 469, 310);
//window 8
bezier(469, 310, 480, 294, 496, 294, 512, 310);
//winodw 9 (end)
triangle(512, 310, 537, 310, 537, 283);
fill(greyWaterR, greyWaterG, greyWaterB);
//WATER BELOW
rect(0, 332, 640, 480);
if ((mouseX > 0) & (mouseX < 640)){
greyWaterR = mouseX*((142-160)/640) + 160;
greyWaterG = mouseX*((222-160)/640) + 160;
greyWaterB = mouseX*((208-150)/640) + 150;
}
var offsetX1 = 100
var offsetY1 = 15
//waterlines
fill(greyWhiteR, greyWhiteG, greyWhiteB);
//row1
rect(640-mouseX, 345, 220, 3);
rect(640-mouseX + 280, 345, 160, 3);
rect(640-mouseX + 500, 345, 240, 3);
rect(640-mouseX - 300, 345, 200, 3);
rect(640-mouseX - 600, 345, 220, 3);
//row2
rect(640-mouseX + offsetX1, 345 + offsetY1, 220, 3);
rect(640-mouseX + 280 + offsetX1, 345 + offsetY1, 160, 3);
rect(640-mouseX + 500 + offsetX1, 345 + offsetY1, 240, 3);
rect(640-mouseX - 300 + offsetX1, 345 + offsetY1, 200, 3);
rect(640-mouseX - 600 + offsetX1, 345 + offsetY1, 220, 3);
//row3
rect(640-mouseX + 2*offsetX1, 345 + 2.5*offsetY1, 220, 3);
rect(640-mouseX + 280 + 2*offsetX1, 345 + 2.5*offsetY1, 160, 3);
rect(640-mouseX + 500 + 2*offsetX1, 345 + 2.5*offsetY1, 240, 3);
rect(640-mouseX - 300 + 2*offsetX1, 345 + 2.5*offsetY1, 200, 3);
rect(640-mouseX - 600 + 2*offsetX1, 345 + 2.5*offsetY1, 220, 3);
//row4
rect(640-mouseX + 3*offsetX1, 345 + 5*offsetY1, 220, 3);
rect(640-mouseX + 280 + 3*offsetX1, 345 + 5*offsetY1, 160, 3);
rect(640-mouseX + 500 + 3*offsetX1, 345 + 5*offsetY1, 240, 3);
rect(640-mouseX - 300 + 3*offsetX1, 345 + 5*offsetY1, 200, 3);
rect(640-mouseX - 600 + 3*offsetX1, 345 + 5*offsetY1, 220, 3);
/*var windows1R = 160;
var window1G = 160;
var window1B = 150;
var lightsR = 225;
var window2G = 193;
var window2B = 96; */
//colors!!!!!!!!!
/* greyWhite = color(245, 241, 230);
greySky = color(200, 200, 185);
greyWater = color(160, 160, 150);
windows = color(160, 160, 150);
sky = color(124, 35, 60);
lights = color(225, 193, 96);
water = color(81, 18, 35);
*/
}
/* //windows colors
var windowsR = 160;
var windowsG = 160;
var windowsB = 150;
//lights colors
var lightsR = 255;
var lightsG = 197;
var lightsB = 107;
function mouseIsPressed (){
if ((windowsR = 160)){
windowsR = 255;
windowsG = 197;
windowsB = 107;
}
else if (true) {
windowsR = 160;
windowsG = 160;
windowsB = 150;
}
}*/
```

I was feeling very ambitious at the start of this project, but after two days of coding simple shapes without yet having added any interactivity, i realized i needed to simplify the design if i was to finish before the deadline. I wanted to originally make the drawing change from soft day-colored gradients to vivid night-colored gradients but time was running short and i settled on a grey-to-saturated fill instead, which i am relatively happy with. Unfortunately, WordPress was not kind to my bezier curves, which appear to have disappeared from my design upon upload, nor was it kind to my aspect ratio which i so meticulously planned out in a 640 x 480 arrangement but which was unceremoniously snipped by the WordPress formatting gods. In the future i will try to orient my canvases vertically to avoid cropping.