Link to code: https://editor.p5js.org/kh1785/sketches/QKTPYZVyP
When you run the code, the first thing you will see is a white background with black dots. The execution is straightforward: using a for loop to create dozens of neatly spaced dots. Soon you will realize that those dots are moving left and right, depending on the horizontal position of the mouse. First, the movements of the dots may seem arbitrary; however, when a mouse button is pressed, the hidden part is finally revealed. As the background color changes to black, the eye shapes become clear with sclerae keeping their white color. It turns out the dots are actually irises and they are carefully following the mouse's movement. Depending on the vertical position of the mouse, the value of control point x is changing, giving an illusion that the eyes are closing as the mouse is heading down to the bottom. This mapping was not intuitive than it may appear since p5.js is not based on regular Cartesian coordinate system. Moreover, the two curves constructing the eye shape have to move in opposite directions to allow such opening/closing illusion. Until I achieved the exact movement that I aimed for, I relied on trial and error method to figure out the right variables, and mapping for each curve.
There are some extra features of the sketch enabled by external parameters. One is that I use several system variables such as windowWidth and windowHeight to allow the size of the canvas to change as the users resize the window. Additionally, if the users press the up arrow key, fullscreen mode is activated and of course, ESC key allows them to exit from it.
Comments