This assignment one of Intro to IM required us to come up with a self portrait using p5.js. The assignment was really fun to do since we had to play with different shapes and get them positioned in a way that looks real and meaningful.
I began by getting a basic sketch and starting with my face it self. The face ears, eyes and nose were not a big challenge since we could have simply used an ellipse. The Arc for the eyebrow and mouth took some time to get them into the position I wanted it to be in.
For the, t-shirt i used a rectangle and two ellipse to make it look realistic. By adding two lines similar to the color of the background i was able to create a gap and separate the arms from the body. I also enjoyed playing with quads to make my replicate the Adidas logo on the t-shirt. I also enjoyed playing around with circles and lines to create the glasses 🤓. I used the alpha value in RBGA to add the transparency to the glasses color.
The hardest part of this assignment for me was the hair itself, after reading documentation about quads I started to try out different sizes and shapes to see which would best suite my own hairstyle.
Something, that I really struggled with was getting the X and Y coordinates correct in order to position my shape. Thus, I came out with a short code that would print the X and Y coordinate on the screen when the mouse is hovered over. I also tried to not hardcode it as much as possible and tried to use height and width throughout the assignment.
For the Background I wanted to get a night-sky view. I started with making the background dark and used the random() feature to place the stars (as points) on the canvas. I used this video as reference to learn about random() https://www.youtube.com/watch?v=POn4cZ0jL-o.
For fading the background I simply used the alpha value for the RGB and set it to 1 so every frame it would slowly fade out. What i found best about the portrait was the shooting star effect that I was able to add with the use of lerp (which I learnt in A.rt Intel). I simply used the line function with lerp for the 4 arguments and using the random generated start and end X-Y coordinates. Lastly I used the increment or step as the smoothness argument for lerp in order to create a fading effect.