Concept
I had my initial inspiration from the algorithmic art of Vera Molnár, but since someone already did art based on that and I wanted something more lively, so I thought of making tracing eyes across the canvas. I originally aimed at giving it a spooky feeling but wasn’t really able to fixate an idea on how to make it spooky. So I just ended up using random colors and having the eyes pop up randomly acreoss the canvas.
The tracing effect was the part that I really wanted to implement the most as an idea. I wanted all the eyes, no matter where they are on the screen, to be looking at the position of the mouse. Since I was using class to draw the eyes, it meant that there needed to be a universal fucntion for all the eyes, and I am pretty proud of the results.
Code that I am proud of
let dx = mouseX - this.eyex;
let dy = mouseY - this.eyey;
//calculates the angle of point(dx,dy) relative to positiveX, which is same as (mouseX,mouseY) to horizontal
let alpha = atan2(dy, dx);
//calculate distance between mouse and eye center
let distance = dist(mouseX, mouseY, this.eyex, this.eyey);
//if mouse is inside the iris, pupil & iris movements follow the mouse, if mouse is outside, they follow the angle at the max distance of 12.5, so they dont run from the eye
let movedist = min(distance, 25 / 2);
let movedist2 = min(distance, 3);
//cos determines horizontal direction movement and sin defines verticle direction movement
let pupilx = this.eyex + cos(alpha) * movedist;
let pupily = this.eyey + sin(alpha) * movedist;
let irisx = this.eyex + cos(alpha) * movedist2;
let irisy = this.eyey + sin(alpha) * movedist2;
The code used in creating the movement was not too difficult, it was the math that took me a lot of time. Arc-tangent-2 was used to calculate the angle for the tracing, because angle of point (dx,dy) relative to positiveX is the same as (mouseX,mouseY) to positive x.
The line I liked most in this chunk is where I united the situations of the mouse being inside and outside the iris in one line. taking the minimum of the two numbers allowed the pupil to follow the mouse smoothly as it transfers across iris.
Embeded sketch (click to see eyes)
Reflection
I actually have reflected quite alot during the production already. Because I randomnized the size and stroke weight, it was a bit difficult to make the arcs meet at the ends, and some of the thinner lines dont really look good with big eyeballs. Also, I did no fill for the arc so it wouldn’t create a fan shape, but that also leaded the bottom eye to be able to be seen through the top eye. I may need to reasearch into how to fill odd shapes to fit that.
Some further development I want to make to this is maybe attach it to some creature instead of having a lot of eyes floating and stacking on top of each other. I am thinking about maybe putting it on some worm because for some reason I think of the game I am playing called Hollowknight: Silksong when I look at the eyes move.