Overview:
For this assignment, we were asked to draw a self portrait using the basic functions built into p5.JS. I started by drawing a rough sketch of what I wanted my self portrait to look like. For the self portrait, I tried to highlight the main features of my face. I think my spectacles are one of the very important feature of my face so I decided to add these to the portrait. Furthermore, while coding and looking at the examples that were provided to us, I decided to add some interactive features to the portrait. Overall, the assignment was really fun and helped me in understanding some of the key concepts of p5.JS.
Concept & Process:
The concept for my self portrait was fairly simple. I wanted to make sure that I add all the key features of my face and give it a animated look. I tried adding curly hair but it turned out to be really difficult and the results that I got after that weren’t really satisfying so I just went ahead with normal hair. I just used arc over my head to make it look like hair. As I mentioned earlier, spectacles were really important to me so I spent fair amount of time fixing them around the eyes. I used arc function and line to make it look more realistic. Moving on, for the nose and the lips, I used arc to make both of these. For the ears, I just rotated the arc and added those arcs on the both sides of my face. Furthermore, I added a neck and shirt using the rect function. I added the arms on the both sides by increasing the stroke weight and drawing lines next to the shirt. This turned out to be really realistic and allowed me to get the look that I wanted from this self-portrait.
Interactivity:
Inspired by the examples, I decided to add some interactive features to the portrait. For the background, whenever the mouse is moved around the canvas, ellipses are drawn of different colors. This required to run a for loop within the draw function and generate random values between 0 and 255 for r,g and b to later use them in the fill function. Furthermore, similar to the of “Koala portrait” example, I decided to make the eyes move in the same direction where the pointer goes on the canvas. This was fairly simple and all that required was to multiply the coordinates of the pointer on the canvas with a very small constant and add it to the coordinates of the ellipse that I had drawn for the pupils. This allowed me keep the pupil within the eyes and add this simple interactivity. Lastly, when the mouse key is pressed, the color of the shades is changed to random colors to create a cool effect. Again, I generated three random values for the r g and b using a for loop and the random function of p5.js to use these values in the fill function.
Future Improvements:
In future, I want to learn change this portrait from an animated one to a more realistic one. I hope to learn how to make curly hair and add it to this portrait. Furthermore, I’d like to add better and more artistic animations for the background. I would love to design better nose and ears using the points or any other function that allows me give them a more realistic touch. I hope to learn these skills and implement them on this portrait.Here’s how the final portrait look like: