JESSIE ZHAI

Digital artist

A documentation page of rambling and experimenting.

@jessiehaseyes
jessiejiranzhai@gmail.com
01 SELF-PORTRAIT
ICM WEEK1






For week 1’s creative assignment SELF-PORTRAIT, I chose to focus on the most important parts of my body as a visual artist, my eyes. In this sketch, I created a pair of glasses, when you align them with the eyes, the image in the back becomes clear.



PROCESS

I started off with the “aim” example from P5.JS’s library since I was extremely intrigued by how the “eyeballs” follow the cursor by calculating the angle between the eyes and mouse.

I made a few adjustments on the shape of the eyes and eyeballs, making them oval shapes so they appear more 3D-like. I also changed the color of the eyeballs, and modified the rotation range of the eyeballs.




Once I made the eyes, I immediately thought of making a pair of glasses that would follow my cursor and can be “put on” the eyes. As the wondering eyes reminded me much of myself when I can’t find my glasses.


Now that I have the glasses and the eyes, I felt that there’s a lack of feedback once the glasses are put on correctly. So I took inspiration from real life, and wanted to create a blurry effect when the glasses are not on.

The closest I got to a blurry effect was by playing around with the alpha channel of imported images.




I uploaded a self portrait illustration I did a while ago, and took reference from the Image Transparency example in the P5.JS library.

Initally, the two images appear to both in full opacity no matter how I change the values until I realize the sketch is set up in HSB color mode which does not have an alpha channel.




After fixing the color mode issue, I realize that the images are sliding left and right base on only the horizontal direction of my mouse, which does not exactly align with the logic of the glasses.



After a few tries, I was able to write a function that allow the image to be moved by both the horizontal and vertical position of the mouse. Although it is not perfect, I’m happy with how this sketch has evolved.

SOLVED PROBLEMS

  • Loading images - use img.resize to resize the image to be the same size as the canvas to avoid the image being too big or too small
  • HSB color mode - The HSB color mode does not include an alpha channel, which took me a while to realize why my image transparency was not working


THINGS TO IMPROVE

  • At the moment, the image becomes clear when the cursor is on the diagonal line across the canvas. It would be ideal to have the image align only when the cursor bring the glasses on top of the eyes.
  • Perhaps an alternative image for the background will serve a better purpose and match the cartoonish style of the eyes.


INDEX  NEXT
JESSIEZHAI