The code is tightly linked to each other, no piece of code stands alone. They are all interconnected.
Like the little animation I made. I used the X-axis to define the time and the Y-axis to represent the position of the sun. As the day time starts, the sun starts to rise. It gradually gets bigger. The position of the circle increases and the circle gets progressively bigger. The sky also changes from light to dark colour. This signifies that as one element increases, the other increases. When the sun is right in the middle, that is, at the highest point of the Y-axis. As time increases, the circle begins to get smaller. As one element increases, the other decreases, showing a negative relationship. Therefore, when a person gently moves the mouse around, which makes a small change in mouseX. It causes the shape of the circle and the sky color to change, resulting in a magnification and diminution relationship.
Versed neutral by Taigen2457 -p5.js Web Editor
In a further refinement, pupilLeft X and pupilRight X use the map() function to map the value of mouseX to the range of the eye (the white circle). This allows the pupil to move left and right within the white circle without going outside the eye's range.
A different mapping range is set in the map() function for each eye to ensure that the pupil movement is in the proper place.
self by Taigen2457 -p5.js Web Editor
Some example：
Some small experiments in learning. Circles get bigger as you move the mouse. And the colour changes.
Quick soursop by Taigen2457 -p5.js Web Editor
Map refence
https://p5js.org/examples/calculating-values-map/
In the sun works, I try to determine the position of the mouse X. Asked classmates and ICM help session. learnt to set constrain. constrain is for interval range.But still confused about the range of values (0,1).