Concept
For this assignment I needed to use P5.JS to create a self portrait. I wanted to be very practical so I did a very basic portrait of me. All the facial features had their own functions and I tried to mimic the NYU Sexton Square palm trees and front view and also added the blistering sun of Abu Dhabi. I focused a lot on the eyes, trying out all the different shapes that we were introduced to in class and also searched for P5.js reference websites to find out the different mapping for each shape and understanding how I can apply it onto a self portrait. My self portrait represents me in my favourite place and a place that also crushes me. I love NYUAD; it always brings me so much comfort. The campus is very open and being outside and seeing all the people walking around it brings me a lot of peace and happiness and I wanted to represent that in the picture. To show a bit of my personality as well I added the colour of one of my favourite musicals Beetlejuice which is green and purple but I made it more interactive with the mouse.
Highlight of some code I am proud of:
I spent a long time trying to make the reflection in the eyes interactive with the mouse. It took a while for me to figure it out, but when I was reading the reference for P5.js that the professor showed us how to access in class, I learned about mapping. It is basically used to scale down the mouse movements, so for every 500 it will only do three increments. In this, I created a mapping so it could only move on the top left side of my eye with the movement of the mouse. This is where I found it: MAPPING.
// reflection fill(255); let offsetX = map(mouseX, 0, width, -3, 3, true); let offsetY = map(mouseY, 0, height, -3, 3, true); ellipse(210 - 4 + offsetX, 215 - 4 + offsetY, 4, 4); ellipse(290 - 4 + offsetX, 215 - 4 + offsetY, 4, 4);
Embedded Sketch
How this was made
Immediately after class I was very interested in the interactivity and the shapes, so I created the circle in circle thing with the purple and green background at the bottom half of the background. I was experimenting with it by adding more circles, changing the strokes, making the circles thicker or thinner, and everything. So when I started doing the assignment, I decided to put this inside as well. I used the reference website for P5.js for most of the shapes and then also for the mapping. I used more of the P5.js references and I also watched a few videos from The Coding Train to understand how it works more.
Reflection and ideas for future work or improvements
I wish I spent more time on the palms and the background because I feel like I could’ve done better. I feel like it could’ve been more realistic, but I enjoyed creating the palms, I enjoyed creating the sun and I enjoyed doing all of it honestly. I wish I was more creative with it. I wish I added a few more of my interests. I wish I added a hand so I could add bracelets or maybe a different colour of hijab or abaya or something like that.