///////////////////////////////////////////////////////////////////////////////*
/* Interative Drawing - Sleepy Hamtaro
By Anita (YinTing) He
Inspired by the hamtaro stuffy that I brought to res.
Interactions include:
- A sprite that follows behind the mouse
- Sprite's glow gets bigger when it gets closer to Hamtaro
- Opening & closing Hamtaro's eyes
- Eyes follow the mouse/sprite
- Hamtaro's head, ears, and paws moves with mouse
- Hamtaro blushes & turns bluish from the light
when she notices the sprite (move mouse up)
- Background/sky lights up more when the sprite (mouse) moves up
- Click for dialogue from the sprite
*/////////////////////////////////////////////////////////////////////////////
void setup() {
//Sets size of canvas/screen
size(400, 400);
//For anti-aliasing
smooth();
//Sprite's dialogue that displays innitially
println("'Hey!'");
}
///////////////////////////////////////////////////////////////////////////////
void draw() {
/////////////////////////////// BACKGROUND //////////////////////////////////
//Setting a dark blackish blue as background
background(0, 5, 34);
//Sets default frame rate to cancel out changes in FR later
frameRate(60);
//Sets ellipseMode to draw from the center out (default)
ellipseMode (CENTER);
//Sets rectMode to draw from top left corner to top right corner
rectMode (CORNERS);
noStroke();
/*Background gradient
Gets brighter as the mouse moves higher*/
fill(0-mouseY/50, 6-mouseY/50, 48-mouseY/50, 150);
rect(0, 90, 400, 120);
fill(0-mouseY/50, 8-mouseY/50, 66-mouseY/50, 150);
rect(0, 120, 400, 140);
fill(10-mouseY/50, 10-mouseY/50, 75-mouseY/50, 150);
rect(0, 140, 400, 160);
fill(12-mouseY/40, 21-mouseY/40, 81-mouseY/40, 150);
rect(0, 160, 400, 190);
fill(25-mouseY/30, 38-mouseY/30, 109-mouseY/30, 130);
rect(0, 190, 400, 210);
fill(47-mouseY/25, 56-mouseY/25, 134-mouseY/25, 140);
rect(0, 210, 400, 230);
fill(59-mouseY/20, 68-mouseY/20, 146-mouseY/20, 150);
rect(0, 230, 400, 250);
fill(70-mouseY/15, 79-mouseY/15, 157-mouseY/15, 160);
rect(0, 250, 400, 270);
fill(83-mouseY/15, 92-mouseY/15, 169-mouseY/15, 170);
rect(0, 270, 400, 290);
fill(95-mouseY/15, 104-mouseY/15, 161+20-mouseY/15, 180);
rect(0, 290, 400, 320);
fill(107-mouseY/25, 116-mouseY/25, 173+20-mouseY/25, 190);
rect(0, 320, 400, 350);
//STARS
/**1. Flashing stars
Uses a few variations so the stars don't flicker uniformly **/
fill(129, 129, 210);
ellipse(40, 30, sin(frameCount/19)*3, 10);
ellipse(40, 30, 10, sin(frameCount/19.1)*3);
ellipse(2, 110, (sin(100+frameCount*0.05)*3), (sin(frameCount*0.05)*11));
ellipse(2, 110, (sin(75+frameCount*0.05)*11), (sin(frameCount*0.05)*3));
ellipse(160, 90, (cos(110+frameCount*0.05)*2), (cos(frameCount*0.05)*9));
ellipse(160, 90, (cos(85+frameCount*0.05)*9), (cos(frameCount*0.05)*2));
ellipse(230, 22, (sin(100+frameCount*0.05)*3), (sin(frameCount*0.05)*11));
ellipse(230, 22, (sin(75+frameCount*0.05)*11), (sin(frameCount*0.05)*3));
/**2. Stagnant stars
Uses small ellipses of different size**/
fill(160, 135, 255);
ellipse(80, 70, 3, 3);
ellipse(100, 20, 2, 2);
ellipse(140, 50, 3, 2);
ellipse(130, 140, 3, 3);
ellipse(280, 43, 2, 3);
ellipse(370, 25, 3, 3);
ellipse(360, 110, 2, 4);
//GRASS
fill(0, 5, 34);
triangle(-1, 350, 20, 320, 20, 360);
triangle(0, 350, 5, 325, 7, 350);
triangle(10, 350, 22, 330, 23, 350);
triangle(21, 350, 24, 340, 25.5, 350);
triangle(23.5, 350, 25.5, 328, 26, 350);
triangle(25, 350, 32, 328, 37, 350);
triangle(33, 350, 38, 322, 39.5, 350);
triangle(38, 350, 42.5, 324, 45, 350);
triangle(43, 350, 45, 333, 52, 350);
triangle(48, 350, 53, 324, 60, 350);
triangle(53, 350, 60, 335, 60, 350);
rect(59, 344, 65, 358);
triangle(60, 350, 66, 340, 68, 350);
triangle(65, 350, 70, 330, 76, 350);
triangle(70, 350, 78, 324, 82, 350);
triangle(78, 350, 84, 331, 86, 350);
triangle(80, 350, 96, 328, 94, 350);
rect(90, 345, 105, 355);
triangle(101, 350, 96, 333, 110, 350);
triangle(105, 350, 109, 341, 111, 350);
triangle(110, 350, 117, 333, 119, 350);
triangle(118, 350, 120, 339, 122, 350);
triangle(121, 350, 128, 327, 131, 350);
triangle(125, 350, 131, 338, 135, 350);
triangle(135, 350, 138, 338, 140, 350);
triangle(138, 350, 145, 322, 148, 350);
triangle(147, 350, 159, 330, 157, 350);
quad(155, 344, 181, 339, 180, 350, 140, 350);
triangle(150, 350, 160, 338, 165, 350);
triangle(164, 350, 169, 333, 170, 350);
triangle(175, 350, 178, 329, 182, 350);
triangle(173, 350, 170, 330, 180, 350);
triangle(178, 350, 190, 320, 200, 350);
rect(190, 340, 380, 350);
triangle(360, 350, 378, 335, 382, 350);
triangle(375, 350, 385, 331, 391, 350);
triangle(380, 350, 400, 328, 410, 350);
//Exclaimation mark (hides behind the body)
fill(255);
//Moves with mouse on Y-axis
triangle(182, 95+mouseY/3.5, 192, 90+mouseY/3.5, 192, 110+mouseY/3.7);
ellipse(194, 118+mouseY/4, 4.5, 4.5);
////////////////////////////////////// HAMTARO BODY /////////////////////////////////////////
/*Strokes & fills turn blue-ish when the sprite moves higher creating
an illusion of the sprite lighting up Hamtaro*/
//Sets ellipseMode to draw from top left corner to top right corner
ellipseMode(CORNERS);
//Beige area
fill(180+mouseY/20, 159, 155-mouseY/20);
quad(200, 360, 205, 350, 220, 350, 208, 360);
quad(310, 360, 330, 360, 328, 368, 318, 367);
ellipse(310, 325, 373, 353);
triangle(350, 340, 355, 200, 374, 338);
triangle(315, 200, 355, 200, 355, 290);
triangle(330, 340, 373, 343, 328, 363);
//White area
fill(220+mouseY/20, 213, 210-mouseY/20);
ellipse(190, 210, 300, 270);
//2.1
ellipse(187, 242, 320, 330);
//2.2 (Had to add on shape from initial plan)
ellipse(190, 230, 313, 325);
ellipse(181, 270, 240, 355);
ellipse(210, 299, 323, 354);
ellipse(275, 220, 360, 363);
//Paws
fill(180+mouseY/20, 159, 155-mouseY/20);
//Makes Paws move in relation to mouse position on the Y-axis
ellipse(237, 245+mouseY/100, 253, 257+mouseY/150);
triangle(237, 250+mouseY/100, 253, 255+mouseY/100, 240, 258);
ellipse(250, 245+mouseY/100, 262, 255+mouseY/150);
triangle(245, 250+mouseY/100, 261, 245+mouseY/100, 261, 262);
//Line for arms
noFill();
stroke(180+mouseY/20, 159, 155-mouseY/20);
//Makes the lines bolder & more apparent
strokeWeight(1.5);
//Resets the mode since arc seems to works better in CORNER mode
ellipseMode(CORNER);
arc(205, 233, 40, 35, -PI/2, 3*PI/4);
arc(260, 235, 50, 38, PI/3, 3*PI/2);
line(214, 265, 195, 252);
line(292, 272, 323, 260);
//////////////////////////////////////// HAMTARO HEAD /////////////////////////////////////////////
/*Moves slightly with the mouse on the Y-axis
Color turns blue-ish as well*/
//Resetting stroke from drawing the arms
noStroke();
//Setting the mode to CORNERS since it's easier to work with
rectMode (CORNERS);
ellipseMode(CORNERS);
//Beige area
fill(180+mouseY/20, 159, 155-mouseY/20);
triangle (215, 120+mouseY/100, 230, 90+mouseY/50, 260, 110+mouseY/100);
ellipse (238, 93+mouseY/200, 310, 130+mouseY/200);
quad(293, 100+mouseY/100, 308-mouseY/50, 90+mouseY/70, 320+mouseY/70, 85+mouseY/100, 330, 113);
ellipse(197, 113+mouseY/200, 270, 220+mouseY/200);
ellipse(190, 145, 235, 195);
ellipse(240, 96, 345, 200);
ellipse(340, 142+mouseY/200, 363, 195+mouseY/200);
triangle(325, 100+mouseY/180, 320, 150+mouseY/180, 360, 150);
//White area
fill(220+mouseY/20, 213, 210-mouseY/20);
ellipse(181, 165+mouseY/180, 210, 205+mouseY/180);
arc (179, 163+mouseY/160, 229, 221+mouseY/70, -PI/12, 4*PI/2.9);
rect(215, 177+mouseY/70, 275, 233+mouseY/80, 100);
ellipse(255, 175+mouseY/180, 338, 230+mouseY/180);
ellipse(285, 165+mouseY/160, 365, 230+mouseY/100);
/*Blush
Set so it looks like she blushes more as her eyes open*/
fill(255, 169, 177, 255-mouseY/2.5);
ellipse(182, 175, 205, 195);
ellipse(304, 174, 337, 198);
//Mouth
//Getting rid of fill & adding stroke to make the mouth lines
noFill();
stroke(192, 159, 143);
ellipseMode(CORNER);
//Moves with mouse on the Y-axis - turns into a line shape when mouse is low to show she's sleeping
line(233, 190+mouseY/30, 243, 198+mouseY/60);
line(233, 198+mouseY/60, 243, 189+mouseY/30);
//Eyes
noStroke();
//Sets mode back to CORNERS so it's easier to work with
ellipseMode(CORNERS);
fill(0, 5, 34);
arc(205, 150, 230, 178, 5*PI/7, 5*PI/3);
ellipse(280, 148, 310, 177);
//Eye balls follow the mouse/sprite
fill(240);
ellipse(209+mouseX/80, 155+mouseY/33, 215+mouseX/100, 158+mouseY/35);
ellipse(285+mouseX/30, 154+mouseY/33, 293+mouseX/30, 157+mouseY/33);
/*EYELIDS
Beige colored circles above the eyes that moves with mouse
Using arc so that a slit of the circle is left uncovered - creating the illusion of eyelids */
//stroke(255); //Temporary - To know where the lids are
fill(180+mouseY/20, 159, 155-mouseY/20);
arc(195, 122.5+mouseY/17, 230, 147+mouseY/17, -PI/2, 2*PI/3);
arc(269.5, 120+mouseY/17, 315, 145+mouseY/15, -7.5*PI/14, 5*PI/7);
////////////////////////////////////////////////// SPRITE ///////////////////////////////////////////////////////
//Sets frame rate lower than default (60) so the glow is smoother and not as rapid
frameRate(40);
ellipseMode(CENTER);
fill(253, 254, 255);
//Using pmouse to make it trail behind/follow the mouse
ellipse(pmouseX, pmouseY, 20, 20);
/*Glow
Using cos & sin so they flicker alternately
Glow gets stronger as it gets closer to Hamtaro (to the right)*/
fill(182, 236, 252, 100);
ellipse(pmouseX, pmouseY, cos(frameCount/10)*2.5+(mouseX/30+30), cos(frameCount/10)*2.5+(30+mouseX/30));
fill(250, 254, 255, 30);
ellipse(pmouseX, pmouseY, sin(frameCount/8)*3+(mouseX/10+50), sin(frameCount/8)*3+(mouseX/10+50));
}
////////////////////////////////////////////////// TEXT //////////////////////////////////////////////////////////
//Displays more dialogue from sprite when mouse is pressed
void mousePressed()
{
println("'Wake up!' ");
}
