My Concept
For my self-portrait, I wanted to create something that represented me through the colors and details I chose. I used some of my favorite colors especially blue and purple throughout the background, shirt, hearts and stars. I also added sunglasses because they are my favorite accessory and I wanted that to be one of the main details that represented my personality.
I used p5.js to code the sketch and built the character using basic shapes like ellipse(), rect(), arc() and line(). I used ellipses for the head, hair, eyes and sunglasses, rectangles for the shirt, arms and neck and lines for details like the eyebrows and nose.
Code I am proud of
let glassesY = constrain(mouseY,150,230); ellipse(225, glassesY, 40, 30); ellipse(275, glassesY, 40, 30); line(245, glassesY, 255, glassesY); line(205,glassesY -2, 190, glassesY-8); line(295,glassesY -2, 310, glassesY-8);
This code I am particularly proud of , the sunglasses. I didn’t want to keep them in one fixed position, so I decided to have them move up and down with the mouse. I used mouseY to control their vertical position and constrain() to keep them within a certain range on the face. The line glassesY = constrain(mouseY, 150, 230); was particularly helpful because it links the mouse movement to the sunglasses. Then I used glassesY for the lenses and for the lines that represent the arms of the glasses. This meant that the whole pair moved along when the mouse moved, giving the portrait more interactivity.
How this was made
I used the p5.js v1 Reference as an external source to help me understand the different functions and how to use them correctly. I also used a little bit of AI to help me figure out how to connect the sunglasses to the mouse and make them move up and down. I tried the code myself and made the final edits to best suit my design. I used external Unicode symbols for the hearts and stars and added them into the sketch using the text() function.
Reflection and ideas
In this project I had to experiment a lot to create the perfect picture. I had to modify the position, size, color, and order of each individual shape to create the complete picture. I often made small errors in my coding, but fixed them to build a better understanding of p5.js.
This project, overall, taught me that coding can be a creative and flexible process. It was fun to see how a character could be developed with the use of simple lines and shapes. I found that making the sunglasses interactive really enhanced a personalized component to the project and made it more enjoyable. If I were to do this project again, I would spend time developing more features of the project. This would include adding more animations to the character which could include making the character blink, and developing more movement to the character and the additional animations in this project.