void setup(){
size(400,400); //canvas size
frameRate(60); //for animation
}
void draw(){
//BACKGROUND WORK *it will transition from blue to pink
background(19,79,117); //will change colour later
//pink sky
fill(243,152,209,mouseY-65);
rect(0,0,400,400);
//STARS Work
fill(255,255,255,200-mouseY); //stars will dissappear as moon sets
//stars shine at different frame speeds
ellipse(363,46,(cos(20+frameCount/16.65)*10),2);
ellipse(363,46,(cos(20+frameCount/16.65)*2),10);
ellipse(233,105,(sin(20+frameCount/20.04)*2),10);
ellipse(233,105,(sin(20+frameCount/20.04)*10),2);
ellipse(45,67,(sin(20+frameCount/20.65)*2),10);
ellipse(45,67,(sin(20+frameCount/20.65)*10),2);
ellipse(286,63,(sin(20+frameCount/16.65)*2),7);
ellipse(286,63,(sin(20+frameCount/16.65)*7),2);
ellipse(336,110,(cos(20+frameCount/22.33)*10),2);
ellipse(336,110,(cos(20+frameCount/22.33)*2),10);
ellipse(202,63,(cos(20+frameCount/14.33)*6),2);
ellipse(202,63,(cos(20+frameCount/14.33)*2),6);
ellipse(16,116,(sin(20+frameCount/23.65)*2),10);
ellipse(16,116,(sin(20+frameCount/23.65)*10),2);
ellipse(246,14,(sin(20+frameCount/23.65)*2),10);
ellipse(246,14,(sin(20+frameCount/23.65)*10),2);
ellipse(30,23,(cos(20+frameCount/14.33)*8),2);
ellipse(30,23,(cos(20+frameCount/14.33)*2),8);
ellipse(85,97,(sin(20+frameCount/23.65)*2),10);
ellipse(85,97,(sin(20+frameCount/23.65)*10),2);
ellipse(136,53,(cos(20+frameCount/14.33)*8),2);
ellipse(136,53,(cos(20+frameCount/14.33)*2),8);
ellipse(157,120,(sin(20+frameCount/18.65)*2),9);
ellipse(157,120,(sin(20+frameCount/18.65)*9),2);
ellipse(172,34,(cos(20+frameCount/22.33)*8),2);
ellipse(172,34,(cos(20+frameCount/22.33)*2),8);
//SUN & MOON
//*moves up/down according to mouse & results in a timelapse
//MOON Work
noStroke();
fill(245,255,255);
ellipse(95,mouseY+50,50,50);
//SUN Work
fill(255,255,245);
ellipse(95,400-mouseY+60,85,85);
//*OCEAN beach
fill(111,182,212);
quad(0,300,0,400,400,400,400,180);
//pink transition vvvv
fill(239,197,217,mouseY-65);
quad(0,300,0,400,400,400,400,180);
//*OCEAN Water
noStroke();
fill(21,150,205);
quad(0,150,0,350,400,190,400,150);
//pink trans. vvvv
fill(222,144,225,mouseY-65);
quad(0,150,0,350,400,190,400,150);
//*OCEAN Wave
fill(146,206,235);
quad(0,340,0,380,400,195,400,190);
//pink trans. vvvv
fill(245,230,235,mouseY-65);
quad(0,340,0,380,400,195,400,190);
//HAND & FOREARM WORK
//Hand
noStroke();
fill(49,99,162);
quad(60,313,145,340,170,310,121,270);
//FINGERS Work
//Thumb
noStroke();
beginShape();
vertex(183,350);
vertex(175,296);
vertex(160,250);
vertex(152,266);
vertex(155,280);
vertex(140,297);
endShape(CLOSE);
//red trans. (for thumb)
fill(162,49,122,mouseY-65);
beginShape();
vertex(183,350);
vertex(175,296);
vertex(160,250);
vertex(152,266);
vertex(155,280);
vertex(140,297);
endShape(CLOSE);
//red transition (for hand)
noStroke();
fill(162,49,122,mouseY-65);
quad(60,313,145,340,170,310,121,270);
//Index
fill(35,82,143);
beginShape();
vertex(107,283);
vertex(98,260);
vertex(95,233);
vertex(99,223);
vertex(106,234);
vertex(111,260);
vertex(120,269);
vertex(125,275);
endShape(CLOSE);
//red trans.
fill(149,29,106,mouseY-65);
beginShape();
vertex(107,283);
vertex(98,260);
vertex(95,233);
vertex(99,223);
vertex(106,234);
vertex(111,260);
vertex(120,269);
vertex(125,275);
endShape(CLOSE);
//Middle
fill(31,74,130);
beginShape();
vertex(85,296);
vertex(70,280);
vertex(64,230);
vertex(75,237);
vertex(84,272);
vertex(110,282);
endShape(CLOSE);
//red trans
fill(130,28,103,mouseY-65);
beginShape();
vertex(85,296);
vertex(70,280);
vertex(64,230);
vertex(75,237);
vertex(84,272);
vertex(110,282);
endShape(CLOSE);
//Ring
fill(36,82,141);
beginShape();
vertex(95,290);
vertex(71,290);
vertex(83,298);
vertex(64,279);
vertex(60,246);
vertex(51,238);
vertex(50,269);
vertex(65,310);
endShape(CLOSE);
//red trans
fill(140,39,84,mouseY-65);
beginShape();
vertex(95,290);
vertex(71,290);
vertex(83,298);
vertex(64,279);
vertex(60,246);
vertex(51,238);
vertex(50,269);
vertex(65,310);
endShape(CLOSE);
//Pinkie
fill(49,99,162);
noStroke();
//**extra shape to add more structure to hand/pinkie
beginShape();
vertex(144,340);
vertex(59,307);
vertex(63,318);
endShape(CLOSE);
beginShape();
vertex(63,316);
vertex(61,313);
vertex(45,293);
vertex(48,269);
vertex(58,258);
vertex(59,271);
vertex(57,280);
vertex(57,288);
vertex(59,292);
vertex(74,305);
endShape(CLOSE);
//red trans (pinkie/extra piece)
fill(162,49,122,mouseY-65);
noStroke();
//**extra shape to add more structure to hand/pinkie
beginShape();
vertex(144,340);
vertex(59,307);
vertex(63,318);
endShape(CLOSE);
beginShape();
vertex(63,316);
vertex(61,313);
vertex(45,293);
vertex(48,269);
vertex(58,258);
vertex(59,271);
vertex(57,280);
vertex(57,288);
vertex(59,292);
vertex(74,305);
endShape(CLOSE);
//GEM
fill(123,170,239);
ellipse(122,302,36,25);
//red trans
fill(224,202,234,mouseY-65);
ellipse(122,302,36,25);
//FOREARM
noStroke();
fill(49,99,162);
quad(145,339,170,400,250,400,169,309);
//red trans
noStroke();
fill(162,49,122,mouseY-65);
quad(145,339,170,400,250,400,169,309);
}
