Class Note

Self Portrait Modification Process

I got the idea for this modification from Question 5 in the worksheet:

“Challenge: Move a circle towards the mouse. (This is different from drawing a circle at the mouse.) Hint: Use mouseX + mouseY.”

This made me think about my Minion sketch. I wanted to make the eye follow the mouse.

My goal:

1. make both the white part of the eye and the pupil move together
2. keep the original blinking interaction when the mouse is pressed

Main challenge

1. how to set limits for the eye movement (it cannot move outside of the goggle frame)
2. the blinking line to appear in the correct position after the eye moved

First Version

let eyeX = 250;
let eyeY = 200;

if (mouseX > eyeX && eyeX < 275) {
  eyeX++;
}

if (mouseX < eyeX && eyeX > 225) {
  eyeX--;
}

if (mouseY > eyeY && eyeY < 225) {
  eyeY++;
}

if (mouseY < eyeY && eyeY > 175) {
  eyeY--;
}

if (mouseIsPressed) {
  stroke(0);
  strokeWeight(6);
  line(225, 200, 275, 200);
} else {
  fill(100, 60, 30);
  ellipse(eyeX, eyeY, 50, 50);

  fill(0);
  ellipse(eyeX, eyeY, 20, 20);
}

In this version, the eye successfully followed the mouse and stayed within the goggle area. However, when I tested the blinking interaction, I noticed that the blinking line was still fixed in the center.

The problem was that the position of the line was still using fixed numbers:

line(225, 200, 275, 200);

Even though the eye position was changing through eyeX and eyeY, the blinking line was not connected to those variables.

Final Version