Week 1 – Self-portrait

My concept:

I added eye movement inspired by the Mona Lisa, where the eyes follow the viewer’s gaze. I chose pink as the background color since it is my favorite. I also added a touch of glitter and shimmer to the background because I grew up loving Barbie dolls, movies, and TV shows. Finally, I included my house cats, who love my family unconditionally.

“The most personal is the most creative.” — Martin Scorsese

A highlight of some code I am particularly proud of

The code I am most proud of is the eye movement:

let leftEyeX = constrain(map(mouseX, 0, width, -75, -55), -75, -55);
let leftEyeY = constrain(map(mouseY, 0, height, -8, 8), -8, 8);
let rightEyeX = constrain(map(mouseX, 0, width, 55, 75), 55, 75);
let rightEyeY = constrain(map(mouseY, 0, height, -8, 8), -8, 8);

circle(leftEyeX, leftEyeY, 38);
circle(rightEyeX, rightEyeY, 38);

How it was made:

I used basic shapes for the portrait of me, including circles, ellipses, rectangles, and arcs. I made the eye movement and the cats’ tail movements follow the mouse using mouseX and mouseY, with constraints to keep the irises within the eye area. For the background glitter, I used a loop to create a sparkling effect by randomly placing tiny circles with different alpha values. In addition, I used functions to keep everything organized and easy to edit.

Embedded sketch:

 

Reflection and ideas for future work implementations:

I really enjoyed the process. I learned a lot from this project, such as utilizing the for loop for adding glitter and shimmer. In the future I would like to add learn how to utilize the JavaScript Computer Vision and Detection libraries, such as ML5.js and face-api.js, to make more interactive to the audience. I would also want to make more detailed and add a bit more shadows.