Short Description
For the first assignment of my intro to IM class, we had to design a self-portrait of yourself. I have been wanting to take an IM/ IMA class for the past two years at NYU, so I was really excited to get started and work on this project. I wanted my portrait to portray some of my favorite characteristics of who I am as a person. As such, portrait is a small reflection of the character that I am.
Character Design Concept
For my character, I took inspiration from the appearance of Duolingo character. Now before you judge, I often feel the need to add contrast and extensive detail to a design, so I have trouble simplifying my ideal design into primary shapes and colors. Therefore, specifically referencing Violet (my favorite) from Duolingo, I was able to simplify how the human anatomy is suppose to look and add details accordingly to my needs.
The Outfit
My next I asked myself, “what did I want my character to wear?” And so, I decided to dress her up in one of my to-go outfits in a black tank top, green cargo pants, and pair of off-white sneakers. In addition, I have a cartilage piercing and two lobe piercing on one of my ears, so I added silver jewelry that I typically wear on my character’s ear. I could have added my other ear, but I thought my character looked good as it was. I also can’t forget my pair of silver/blue glasses, so my character can look even more like me.
The Background
After I had completed my character design, I moved onto the background and added some little detail of things I liked. At first, I wanted a cool animated background, but then I realized I wasn’t that comfort/ knowledge on p5 and decided on a plain background of my favorite color – burgundy red. Then, in the corner of the screen is my pet cat (Mio), who I love very much. Lastly, I added “Hello!” to the background to greet anyone that may come across my character.
The Coding Process
Given this was my first time working in p5, I am really happy with the outcome of my design. I had some issue with simplicity and wanting to do more than I was currently able to do. However, after experimenting and testing the p5 reference functions, I was able to work a lot more comfortably.
The Hardships
THE HAIR. I believe the thing I work on the longest out of everything on my character was the hair. I could not find a shape that fit exactly what I wanted, and the math functions for the shapes were initially all so confusing to me. Eventually I searched up ‘character designs in p5’ on Google to see if hair was just supposed to look bad with the simple shapes, but I came across a post by Erika Noma who used the bezier() function and life was good again. I wouldn’t say my hair is how I imagined it to look, but it works. Although understanding the parameters was a little confusing to me, I do recommend anyone wanting to do a simple curvy/ waving shape to use this function because you’re able to insert 4 different points.
// hair front (on face)
fill('#927242');
bezier(200, 85, 245, 80, 280, 143, 257, 160) // left hair
bezier(200, 85, 135, 80, 120, 140, 135, 160) // right hair
The Brightside/ Greatest Achievement
After working through several shapes and functions to find the perfect hair shape, I felt like I became an expert on the math components of p5. For some functions such as arc() and rotate(), I didn’t realize at first the angles were measured radians, not degrees. You can imagine my confusion when errors were blowing up on the console and the shapes started flying across my screen. Through this project, the unit circle became my best friend and biggest support :’).
As such, through this experience, I was able to encode a simple waving action to my character. With the help of ChatGBT to understand the push(), pop(), and translate() functions that were outside of the p5 reference page, I was able to tweak my project to move based on the x-position of the mouse. The code below is the function for the waving action of my character. I am super proud I was able to make my character come to life and turn my difficulties into something positive.
/* right arm
-- translate the center to where the arm would pivot
-- push() & pop() so it doesn't affect the rest of the drawing
-- let angle which the arm will wave based on the x-position of the mouse
*/
fill("rgb(242,222,203)") // filled at the top for the arms
push()
translate(245, 230)
let angle = map(mouseX, 0, width, PI/ 10 , PI / 4)
rotate(angle)
ellipse(0, -40, 15, 100) // right arm
fill('rgb(233,200,170)')
circle(0, -113, 20) // right tiny circle hand :3
pop()
My Final Self-Portrait Reflection
Overall, I am pretty satisfied with the outcome of my final design. I was able to incorporate different aspects of myself onto my character and show who I am as a person. Given I was hesitant and unsure if I could implement something that moves in my project, I feel I have learned a lot through my experience with p5 and overcoming technical difficulties. Going forward, I hope to learn more about the potentials of p5 (frames, rendering, input/output, etc) and continue to design fun projects. I advise anyone starting out with p5 to not give up and continue to learn through trial and error!