Prompt:

• Prepare a 5-minute technical presentation of one of your sketches.
• NEW: In class I mentioned you should use both objects and arrays in your sketch. On second thought, it is OK to just do one of these (use objects or use arrays).
• MOST IMPORTANT: Please only use code techniques that we have covered in class. Show what you have learned and only use code that you understand. Make something creative within the palette of your understanding. Be prepared to explain the most complex parts of your code.
• Focus on what's happening in your sketch computationally. Clarify the vocabulary you will use. Write out what you're going to say and prepare any diagrams that will help you explain what's going on.
  • Give yourself time to properly demo 1 aspect of your sketch.
  • Explain 1 thing you learned in making your sketch. Talk about what programming concept(s) you are using (e.g. objects and arrays, nested for loops, toggle logic, portable functions)
  • Write down what you're going to say ahead of time. Prepare diagrams to help get your point across!

Single Eye Movement:

v1 (The eyes move according to Mouse):

(multiple eyes ver.: https://editor.p5js.org/Ayanoriri/sketches/9nSx8kLAB)

https://editor.p5js.org/Ayanoriri/sketches/6L6QFdozX

The first version of this animation is built around an eye that tracks the mouse. The goal was to create an iris (the blue part) and a pupil (the black center) that follow the mouse smoothly while staying inside the eye’s sclera (the white part). I added a stretching effect: when the iris gets close to the edge of the eye, it compresses slightly to imitate the perspective of an actual turning eye.

The animation revolves around the drawEye() function, which handles the drawing and movement logic. Each part plays a role in delivering the final design by ensuring the iris and pupil align with the mouse, stay inside the boundary, and behave as if they are wrapping around a curved surface.

To determine where the eye looks, I calculate the angle between the center of the eye and the mouse pointer using the atan2() function. This angle tells the direction the iris and pupil need to move to stay aligned with the mouse.

I then set three variables to control how far the iris and pupil are allowed to move:

• maxDist: This sets the maximum distance the pupil can move from the eye’s center. It’s calculated by subtracting half the pupil size from the eye’s radius, preventing the pupil from overlapping the edge of the sclera.
• distanceFromCenter: This measures how far the mouse is from the center of the eye using dist().
• moveDist: Finally, I use min() to ensure that if the mouse is too far away, the iris and pupil stop at the boundary, giving the eye controlled and natural motion.

The hardest part in the process was determining the stretch. Since I wanted the eyes to be almost round when the mouse is inside the boundary of the eye but have a slight angle when approaching the edge and outside the boundary, I defined edgeThreshold, which is the point where the stretching begins as the iris gets close to the edge. Then I use map() to smoothly scale the iris between 1 (normal size) and 0.5 (flattened). As the iris nears the edge, it shrinks in width, mimicking the way a spherical object would curve. I also use constrain() to make sure the stretch factor stays within the range of 0.5 to 1, preventing the iris from flattening too much.

Finally, I position and draw the iris and pupil using translate and rotate.

The biggest challenge was balancing the movement so it felt responsive but controlled. Without constraints, the pupil could drift beyond the eye’s boundary, breaking the illusion. Another tricky part was implementing the stretching—getting the right range for the map() function took some trial and error to make sure the effect felt smooth and natural without looking exaggerated.