////////////////////////////////////////////////////////////////////////////////////
// Interactive Drawing : Froggy //
// Froggy is hanging out on a lotus leaf //
// A little fly flew by the river //
// Froggy spent day and night to catch the fly //
// By: Wun Richard Hui //
////////////////////////////////////////////////////////////////////////////////////
void setup() {
size (400, 400); // set frame size to 400x400
frameRate(60); // set frame rate to 60 fps
noStroke(); // set shapes to have no outline
noCursor(); // set mouse cursor to invisible
}
void draw() {
////////////////////////////////////////////////////////////////////////////////////
// Background //
// 5 shapes //
////////////////////////////////////////////////////////////////////////////////////
/*mouseX, mouseY functions are used to create day&night effects on sky&water //
//sin(), cos() and frameCount are used to create an inifinite count //
//***Day&Night animation is the hardest part of the whole project */
////////////////////////////////////////////////////////////////////////////////////
// Sky
fill(255-80*(sin(frameCount*0.01)+1), 255-60*(sin(frameCount*0.01)+1), 180+30*(sin(frameCount*0.01)+1));
rect(0, 0, 400, 160);
//Value check device
//println((80*(sin(frameCount*0.01)+1)));
// Sun
fill(255, 255, 320-(210*sin(frameCount*0.01)));
ellipse((cos(frameCount*0.01))*200+180, 150
-100*sin((frameCount)*0.01)
, 60, 60);
// Moon
fill(255, 150-(110*sin(frameCount*0.01)), 10);
ellipse(cos(frameCount*0.01+PI)*200+180, 150
+100*sin((frameCount+QUARTER_PI)*0.01)
, 60, 60);
// Water
fill(155, 255-(35*(sin(frameCount*0.01)+1)), 255); // Change background color into light blue
rect(0, 160, 400, 400);
curve(0+100*(sin(frameCount*0.1)), 400+100*(sin(frameCount*0.01)), -50, 160,
450, 160, 400+100*(sin(frameCount*0.05)), 400+100*(sin(frameCount*0.05)));
// Lotus_leaf
fill(0, 255, 100); // Change color to light green
arc(200, 220, 280-mouseY*0.1-10*cos(frameCount*0.1), 100+mouseY*0.05+2*sin(frameCount*0.1),
0, (PI*1.9));
// further interaction between Froggy&Leaf movements
// arc & pi is used to create the indent on the leaf
/////////////////////////////////////////////////////////////////////////////////////
// Froggy //
// 23 shapes //
/////////////////////////////////////////////////////////////////////////////////////
//**mouseX, mouseY functions are used to animate Froggy into a more lively creature//
/////////////////////////////////////////////////////////////////////////////////////
// Body (A)
fill(55, 220, 75); // change skin color to dark green
ellipse(210- (mouseX*0.03), 200, 150, 100);
// BackLeg_1 (B2)
fill(25, 220, 25); // change skin color to dark green
triangle(175, 250, 125, 230, 175, 175);
// BackLeg_2 (B3)
fill(105, 220, 105); // change skin color to dark green
triangle(225, 175, 225, 250, 275, 235);
// Belly (B1)
//cos() function is used to create movements
fill(240, 220, 200); // change color to light orange
ellipse(200- (mouseX*0.02), 200- (mouseY*0.01), 40, 75+2*(cos(frameCount*0.5)));
// Toe (C1)
fill(255, 225, 200); // change color to light orange
ellipse(130, 230, 18, 15);
// Toe (C2)
fill(255, 225, 200); // change color to light orange
ellipse(270, 235, 18, 15);
// FrontLeg_1 (D1)
fill(75, 220, 75); // change skin color to dark green
triangle(175- (mouseX*0.02), 175- (mouseY*0.02), 175, 275, 120, 260);
// FrontLeg_2 (D2)
fill(105, 220, 105); // change skin color to dark green
triangle(225- (mouseX*0.02), 175- (mouseY*0.02), 230, 275, 275, 260);
// Toe_Front1 (E)
fill(255, 225, 200); // change color to light orange
ellipse(130, 260, 22, 15);
// Toe_Front2 (E)
fill(255, 225, 200); // change color to light orange
ellipse(150, 265, 28, 15);
// Toe_Front3 (E)
fill(255, 225, 200); // change color to light orange
ellipse(170, 270, 30, 15);
// Toe_Front4 (E)
fill(255, 225, 200); // change color to light orange
ellipse(275, 260, 22, 15);
// Toe_Front5 (E)
fill(255, 225, 200); // change color to light orange
ellipse(255, 265, 28, 15);
// Toe_Front6 (E)
fill(255, 225, 200); // change color to light orange
ellipse(235, 270, 30, 15);
// Head (C5)
fill(75, 220, 75); // change skin color to dark green
ellipse(200- (mouseX*0.01), 150- (mouseY*0.01), 130, 85);
// Jaw (E1)
//cos() function is used to animate the throb of Froggy
fill(255, 235, 200); // change color to light orange
ellipse(200- (mouseX*0.01), 180- (mouseY*0.01), 80, 50+10*(cos(frameCount*0.5) ) );
// Eye_1 (E2)
fill(255, 225, 200); // change color to light orange
ellipse(170, 120, 30, 70);
// Eye_2 (E3)
fill(255, 225, 200); // change color to light orange
ellipse(230, 120, 30, 70);
// Eyeball_1 (F1)
fill(0); // change color to black
ellipse(160+ (mouseX *0.05), 100+ (mouseY *0.10), 10, 33);
// Eyeball_2 (F2)
fill(0); // change color to black
ellipse(220+ (mouseX *0.05), 100+ (mouseY *0.10), 10, 33);
// Nose (G)
fill(75, 220, 75); // change skin color to light green
ellipse(200, 150, 75, 50);
/////////////////////////////////////////////////////////////////////////////////////
// Fly //
// 3 shapes //
/////////////////////////////////////////////////////////////////////////////////////
//**mouseX & mouseY are used to adjust the size of Fly to create depth //
//sin() was used in opacity to create illustion of flapping wings //
/////////////////////////////////////////////////////////////////////////////////////
// Wings (H1)
fill(200, 255*(sin(2*frameCount)+1));
ellipse( mouseX -mouseY*0.13, mouseY, mouseY*0.3, mouseY*0.5-mouseY*0.3);
ellipse( mouseX +mouseY*0.13, mouseY, mouseY*0.3, mouseY*0.5-mouseY*0.3);
// Body (I)
fill(0);
ellipse( mouseX, mouseY+(1+mouseY*0.03), mouseY*0.15, mouseY*0.15);
}
/////////////////////////////////////////////////////////////////////////////////////
// Froggy's interaction //
// 2 shapes //
/////////////////////////////////////////////////////////////////////////////////////
void mousePressed() {
// When mouse is pressed, Froggy will shoot its tongue
frameRate(10);
fill(255, 80, 0);
triangle(175, 170, 225, 170, mouseX, mouseY);
ellipse(mouseX, mouseY, mouseY*0.2, mouseY*0.2);
}
void mouseReleased() {
frameRate(60);
}
//////////////////////////////////////////////////////////////////////////////////////
// References //
//////////////////////////////////////////////////////////////////////////////////////
// These artworks are referenced below to show credit on learning new ways to //
//call a function or value to show visual effects, such as, depth and animations //
//////////////////////////////////////////////////////////////////////////////////////
//Moving background (use of sin/cos/tan)
//http://www-acad.sheridanc.on.ca/PROG14998/2015/interactive-drawing/interactive_drawing_27/index.html
//Moving eyes (use of mouseX/mouseY)
//http://www-acad.sheridanc.on.ca/PROG14998/lab-01/lab_01_33/index.html
//Mouse Click (use of frameRate)
//http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-drawing/ivy_zhao_interactive_drawing/index.html
//Mouse Click (use of mouseReleased)
//http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-drawing/calvin_leveille_interactive_drawing/index.html
//No Cursor (use of noCursor)
//http://www-acad.sheridanc.on.ca/PROG14998/2015/interactive-drawing/interactive_drawing_20/index.html
//Dropping rain (discarded idea for rain effects)
//http://www-acad.sheridanc.on.ca/PROG14998/2015/interactive-drawing/interactive_drawing_02/index.html
//Unit collision interaction (discarded idea for fly interaction)
//http://www-acad.sheridanc.on.ca/PROG14998/2015/interactive-drawing/interactive_drawing_56/index.html
