Steps Outline

1. Add a "blink" parameter to the drawHappyFace function
2. Include the mouseIsOver function
3. Bring it all together

Step by Step

1) Add a "blink" parameter to the drawHappyFace function

In LA 5.1 we created a drawHappyFace function. Then, in LA 5.2, we added a parameter calleds to it, that allowed us to set the size of the face drawn by the function. Now, let's create a version of drawHappyFace that receives a different third parameter: blink. blink is a boolean variable (either true or false) that will determine whether the face is drawn blinking or not:

function drawHappyFace(x, y, blink){
  push();
  translate(x,y);
  //Face
  fill(249,205,173);//rosy beige
  ellipse(0, 0, radius, radius);

  //Eye 1
  fill(30);//dark gray
  ellipse(0, 10, 10, 10);

  //Eye 2
  if(blink){
    rect(10, 10, 10, 2); //closed eye
  }
  else{
    ellipse(20, 10, 10, 10); //open eye
  }

2) Include the mouseIsOver function

The behavior we want is this: if the mouse is over the face, it should blink. So we need to determine whether the mouse is over the face. We have already solved this problem in LA 5.3, when we created a function called mouseIsOverEllipse. Because our face is the same shape as an ellipse, we can just re-use that function. Here it is, with a slight name change:

function mouseIsOver(){
  var result;
  var d = dist(mouseX, mouseY, x, y);
  if (d < radius) {
    result = true;
  } else {
    result = false;
  }
  return result;
}        

3) Bring it all together

The last step is to add our simple logic to the draw loop. mouseIsOver tells us whether the mouse is over the face or not. We can send its result as the third parameter of our drawHappyFace function, which determines whether it should blink or not. If mouseIsOver() returns true, blink (inside drawHappyFace) will be set to true as well. If mouseIsOver() returns false, blink will be set to false.

drawHappyFace(x,y,mouseIsOver());

Notice how easy this code is to read and understand. We can get the same behavior without functions. Here is what that looks like:

var x, y;
var radius;

function setup() {
  createCanvas(600, 200);
  ellipseMode(CENTER);
  noStroke();

  x = 300;
  y = 100;
  radius = 100;
  
}

function draw() {
    background(230);
    var d = dist(mouseX, mouseY, x, y);
  
    push();
    translate(x,y);
    //Face
    fill(249,205,173);//rosy beige
    ellipse(0, 0, radius, radius);

    //Eye 1
    fill(30);//dark gray
    ellipse(0, 10, 10, 10);

    //Eye 2
    if (d < radius) {
      rect(10, 10, 10, 2);
    } else {
      ellipse(20, 10, 10, 10);
    }

  //Mouth
    fill(252,157,154);//light pink
    arc(0, 25, 30, 30, 0, radians(180), PIE); 
    pop();
    
}

As you can see, without our functions the code is a lot harder to read and understand. Another advantage of creating functions is that they can be re-used. We had already solved the problem of checking for the mouse position and also of how to draw a smiley face. Because we had created functions for these, we were able to easily re-use them in our code, with some slight modifications (changing the name of mouseIsOver, and adding a blink parameter to drawHappyFace).