//Clear Skies, by Ashborn Binapal 2018
//PROG 14998 Interactive Drawing Assignment
void setup() {
noCursor(); //removes mouse Cursor
size(600,400); //sets image to Landscape
rectMode(CORNERS); //set rectangles to CORNERS mode
ellipseMode(CORNERS); //set ellipses to CORNERS mode
noStroke(); //removed outline on shapes/objects
}
void draw() {
noStroke();
//Sky
//Background (Early Morning)
background(70,72,129); //set as a transition colour between the phases
//Night time light
fill(1,2,52,250); //set colour to night like blue
rect(0,0,600,400);
//Day time light
fill(243,236,208,(-80+mouseX)); //set colour to Very light yellow
rect(0,0,600,400); //main sky colour
fill(254,225,151,(-285+mouseX)); //set colour to light yellow
rect(0,250,600,300); //secondary sky colour
fill(230,177,93,(-250+mouseX)); //set colour to moderate orange
rect(0,300,600,400); //darkest sky colour
//Animated
//Stars (They're 2pix by 2pix squares which expand to seem like they're flashing
fill(255,255,255,255-(mouseX*1.25)); //set colour to white with fading opacity
rect(200,150,202+sin(frameCount*.4),152+sin(frameCount*.4));
rect(250,165,252+sin(frameCount*.4),167+sin(frameCount*.4));
rect(225,90,227+sin(frameCount*.4),92+sin(frameCount*.4));
rect(134,232,136+sin(frameCount*.4),234+sin(frameCount*.4));
rect(276,258,278+sin(frameCount*.4),260+sin(frameCount*.4));
rect(145,119,147+sin(frameCount*.4),121+sin(frameCount*.4));
rect(291,308,293+sin(frameCount*.4),310+sin(frameCount*.4));
rect(343,57,345+sin(frameCount*.4),59+sin(frameCount*.4));
rect(420,236,422+sin(frameCount*.4),238+sin(frameCount*.4)); //420 hehe its lit
rect(500,185,502+sin(frameCount*.4),187+sin(frameCount*.4));
rect(39,30,41+sin(frameCount*.4),32+sin(frameCount*.4));
rect(50,273,52+sin(frameCount*.4),275+sin(frameCount*.4));
rect(75,200,77+sin(frameCount*.4),202+sin(frameCount*.4));
rect(350,180,352+sin(frameCount*.4),182+sin(frameCount*.4));
rect(555,46,557+sin(frameCount*.4),48+sin(frameCount*.4));
rect(485,140,487+sin(frameCount*.4),142+sin(frameCount*.4));
rect(455,85,457+sin(frameCount*.4),87+sin(frameCount*.4));
rect(55,85,57+sin(frameCount*.4),87+sin(frameCount*.4));
/* sin(frameCount) functions allow for the illusion that the stars are flashing
by constantly making their second X and Y values slightly increase and decrease*/
//Solar Objects
//Moon
fill(219,219,219,105-(mouseX/6)); //set colour to translucent grey
ellipse(mouseX/1.25+445+sin(frameCount*.4),80,mouseX/1.25+500+sin(frameCount*.4),135);
fill(180,180,180,240-(mouseX/2)); //set colour to grey
ellipse(mouseX/1.25+450,85,mouseX/1.25+495,130);
//Sun
fill(236,242,83,225); //set colour to bright yellow
ellipse(mouseX/1.2-185,65,mouseX/1.2-120,130);
//Static
//Lighthouse
//Lighthouse Lower Body
fill(237-(mouseX/5),239-(mouseX/5),247-(mouseX/5)); //set colour to white (gets darker to contrast with background with higher mouseX value)
quad(465,260,490,260,485,190,470,190);
//Lighthouse Middle Glass
fill(119-(mouseX/10.5),153-(mouseX/10.5),155-(mouseX/10.5)); //set colour to light blue (gets darker with higher mouseX value)
rect(485,190,470,175);
//Lighthouse Upper Roof
fill(121+(mouseX/12),27+(mouseX/28),28+(mouseX/28)); //set colour to red (gets brighter with higher mouseX value)
triangle(465,175,490,175,477.5,168);
//Lighthouse Stripe
quad(468,200,487,200,488,210,467,210);
//Ledge
fill(50+(mouseX/14),28+(mouseX/14),12); //set colour to slightly darker brown (gets lighter with higher mouseX value)
triangle(524,260,386,245,464,400);
fill(56+(mouseX/14),32+(mouseX/14),12); //set colour to brown (gets lighter with higher mouseX value)
rect(600,400,450,260);
//Stones
//Stone 1 (Right side)
fill(140+(mouseX/12),140+(mouseX/12),142+(mouseX/12)); //set colour to grey (gets lighter with higher mouseX value)
ellipse(536,300,555,400);
ellipse(527,320,555,400);
ellipse(555,312,564,400);
//Stone 2 (Left side)
ellipse(374,320,385,400);
ellipse(367,335,385,400);
ellipse(385,308,402,400);
//Water
fill(0+(mouseX/8),19+(mouseX/7),117+(mouseX/7)); //set colour to blue
rect(0,325+(mouseY/20+sin(frameCount*.1)),600,400); //allows water to slightly move without mouseY movement
//Clouds
fill(222-(mouseX/10),222-(mouseX/10),222-(mouseX/10),245+(mouseX/7)); //set colour to very light grey (gets darker to contrast with background as mouseX value gets higher)
//Small cloud
ellipse(50+(mouseX/7),60,95+(mouseX/7),70);
//Larger cloud #1 (The one closer to the center of the canvas at mouseX=0)
ellipse(250+(mouseX/12),120,340+(mouseX/12),140);
ellipse(245+(mouseX/12),135,330+(mouseX/12),155);
ellipse(255+(mouseX/12),128,355+(mouseX/12),155);
//Larger cloud #2 (The one closes to the left of the canvas at mouseX=0)
ellipse(150+(mouseX/18),160,205+(mouseX/16),180);
ellipse(140+(mouseX/18),175,195+(mouseX/16),195);
ellipse(165+(mouseX/18),168,215+(mouseX/16),195);
//Larger could #3 (The one closes to the right of the canvas at mouseX=0)
ellipse(550+(mouseX/25),160,635+(mouseX/25),180);
ellipse(525+(mouseX/25),175,610+(mouseX/25),195);
ellipse(550+(mouseX/25),175,635+(mouseX/25),195);
//Larger cloud #4 (Moves onto screen slowly as mouseX value increases)
ellipse(-125+(mouseX/6),260,-35+(mouseX/6),280);
ellipse(-100+(mouseX/6),275,-10+(mouseX/6),295);
ellipse(-125+(mouseX/6),275,-35+(mouseX/6),295);
//UI
//mouse location
fill(188,188,188,55); //set colour to very translucent grey
rect(20,20,580,30);
ellipse(18+(mouseX/1.1),15,38+(mouseX/1.1),35); //follows mouse's X position while staying on the bar
}
void mouseMoved() {
//Lighthouse Light effect
fill(249,252,171,125-(mouseX/6));
triangle(470,182.5,0,250,0,67.5);
}
//Roof and Stripe colour change
void mousePressed() {
//Lighthouse Upper Roof
fill(113+(mouseX/12),255+(mouseX/28),100+(mouseX/28)); //set colour to green
triangle(465,175,490,175,477.5,168);
//Lighthouse Stripe
quad(468,200,487,200,488,210,467,210);
}
void keyPressed() {
//Key button press message
print(" Looks like we have some clear skies.");
}