For this project, I created an animated self portrait using p5.js. The design uses basic shapes like ellipses, arcs, triangles and lines to create the structure of the face.
My 2 favourite things that I spent so much time on is the eyelashes as I had a hard time adjusting the angles and the coordinates which I couldn’t just calculate, I had to just guess where to place them and see how it looks after running (trial and error).
Here’s the code snippet for the eyelashes:
stroke("Black"); strokeWeight(3); line(160,170,150,145); line(240,170,250,145); line(180,170,190,145); line(220,170,210,145); line(170,170,170,142); line(230,170,230,142);
I also like the interactivity of the portrait. By clicking the mouse, the eyes blink, and the face smiles and upon clicking again the face returns back to its original state.
Here is the portrait:
One thing that I’d like to improve is making the portrait more realistic as that’s what I wanted at first but couldn’t do as I had such a hard time figuring out the coordinates and the best shapes to use to create the features (ex: the blush on the cheeks and the hair).