This week I worked on a project that required three elements:
1 element controlled by the mouse (eyes blinking)
1 element that changes over time, independent of the mouse (pupils dilating and colorful irises)
1 element that is different every time you run the sketch (background shade)
First, what I’m realizing is I am going to have to switch to a different platform for my blogs. Squarespace doesn’t allow me to embed graphics like these, or even videos I take of them, which is a total bummer. I need to find a platform that lets me take advantage of the fact that I know how to make interactive graphics like this now.
I had some trouble with this, and in the process of making it, I worry that I’m learning how to do specific things but not getting more comfortable or improving my intuition with creative coding in general. For example, I learned how to make a sphere pop up or disappear depending on the mouse location, but I want to be able to apply what I learned to create other, similar things. I don’t think I’m there yet.
I have to remind myself that software engineers aren’t built in a day.
To create the rainbow eyes I used The Rainbow Paintbrush in p5.js by Kelly Lougheed. I modified it until it was just a pulsing color and applied it to the ellipses. Playing around with her code helped me understand which lines applied to what property, which was helpful. For a future project, I would like to have made the eyelid circles animate up and down based on the mouse hover, instead of either just being visible or invisible; this would make it look more like an animated blink rather than flickering.
I couldn’t figure out how to make the pupils stop getting smaller at a certain size, because I think it messes up the eye illusion when it disappears completely, but based on this code:
ellipse(width/3,height/3, x1)
if (x1 < 70) {
x1 = x1 + 1 }
else if (x1 >= 70)
x1 = -x1
I based this off what Dan Shiffman said in his video tutorial, but my friend told me this was kind of a niche move that limited me in what I would be able to do, so I think I would have to rework that whole section to make a minimum.