This week’s assignment was draw a simple shape and create an interaction that causes the shape to demonstrate an emotion. I chose to make a shy ellipse.
Initially, I just wanted to make a gray ellipse with two blushing circles on its “cheeks” — I wanted these circles to be gradient, so they’d fade somewhat naturally towards the outer edge, and I also wanted the whole transparency to decrease as the mouse hovers over the gray ellipse. That way, it’s blushing as you come close to it.
After a long search, I found an example of the radial gradient I was looking for — made by owenmcateer. You have to select an outer and inner color, and the lerpColor function creates a very smooth-looking effect to transition between them. There’s a Math function there to calculate the number of these steps, but I’m not going to pretend I fully understand it because I was pretty bad at high school geometry.
So I took this function, and added it to my code. I tried setting the outer color to just be transparent, and it took way too long for it to click that it would not work. The color at the very very edge might be transparent, using some alpha setting, but then the second-to-last step would be that original color except with like .999 opacity — because the lerpColor function, as far as I can tell, cannot calculate both the number of steps between the colors as well as their opacity. So to get around that, I made the outer color match the color of the ellipse. The result is a transparent appearance, which is all I wanted anyway.
At this point, I had the gradient circles, but needed to make it so that the transparency would change as the mouse hovered close to the gray ellipse. Since I couldn’t play with the transparency of the circles themselves, I had to create a “cover up” ellipse that would disappear as the mouse hovers closer to it. Looking through the p5js references and help, I found the distance function and the setAlpha function. The distance calculates between four points — in this case, the two coordinates at the center of the gray ellipse, and the two coordinates of the cursor location — which then becomes the number that sets the alpha. That way, the closer you get to the ellipse, the lower the opacity of the cover up. In my code, I ended up dividing the distance function by 1.2, just to create more of a buffer (so the blushing starts a little bit before you actually hover over the ellipse).
This was my first screen recording when I got this to work — I was super excited about it.
I could’ve stopped there, but I decided to keep trying to add more emotion to the ellipse. So I changed the color of the base ellipse, and also made the stroke a darker pink. I had to then make a second cover up ellipse in order to mimic a stroke, otherwise it wouldn’t change colors.
Lastly, since my dad said he couldn’t tell what emotion the ellipse was feeling (he thought the pink circles were eyes, I guess), I decided to draw a face. I wanted the face to only show up when the mouse hovered (in order to stay true to the “simple shape” part of the assignment — the shape stays simple until you interact with it). I created more functions for the eyes and smile, in order to be able to use the setAlpha and dist functions once again. For the smile, I used a bezier curve that took maybe a whole hour to get just right. No screen recording this time, because this was the end result you see in the code (click here to see it again).
To say goodbye, here are two screenshots of the ellipse in different resolutions, since I used proportionate coordinates to the window height and width for everything. The first one is how I intended it to look, since it was in the code preview window, but I think it’s pretty cute either way.