Instructions: Move the mouse around the screen to wake up the face.
function setup() {
createCanvas(300,300);
}
function draw() {
background(32,50,126);
ellipseMode(CENTER);
noStroke();
fill(255,203,70);
//face(sun)
ellipse(mouseX,mouseY,325,325);
//mouse gets close to center(sunrise)
if(dist(mouseX,mouseY,150,150)<15)
{
if(mouseIsPressed){
//eyes bug out
fill(255);
ellipse(90,125,70,70);
ellipse(210,125,70,70);
fill(0);
ellipse(random(85,95),random(120,130),60,60);
ellipse(random(205,215),random(120,130),60,60);
}else{
//normal eyes
fill(255);
ellipse(90,125,40,40);
ellipse(210,125,40,40);
fill(0);
ellipse(90,125,30,30);
ellipse(210,125,30,30);
text("Click!",140,290);
}
}else{
//eyes open as as mouse moves closer to center(wakes up)
fill(255);
ellipse(90,125,40,35/(dist(mouseX,mouseY,150,150)-14)+5);
ellipse(210,125,40,35/(dist(mouseX,mouseY,150,150)-14)+5);
fill(0);
ellipse(90,125,30,25/(dist(mouseX,mouseY,150,150)-14)+5);
ellipse(210,125,30,25/(dist(mouseX,mouseY,150,150)-14)+5);
//sleep
text("ZZZ",143,290);
}
//mouth moves as mouse moves closer to center(talking)
fill(0);
ellipse(150,200,150/(abs(150-mouseX)+1),90/(abs(150-mouseY)+1));
//outline of face to suggest people to fill it with circle
noFill();
strokeWeight(15);
stroke(0);
ellipse(150,150,325,325);
}
I suppose my project is more of an emotional self-portrait than an accurate depiction of my appearance, focused more on metaphor than realism. As you move the mouse closer to the center of the screen, not only does the face form, but everything brightens and daytime comes, waking up the face for the learning that is to be had. By wiggling the mouse a little bit, you can make the mouth move, showing that talking is possible, but it will take controlled effort. And when the mouse is in the center of the screen, clicking causes the face to get super excited, showing how it feels to be here. Overall, the project was fun to work on, and I found it fulfilling to explore different avenues to complete it.