My Concept:
For my first project in Intro to IM, I decided to create a representation of myself using only 2D shapes in p5.js for my self-portrait. My goal was to use simple shapes to create the representation using the elements and colors for the face details, hijab/shailah, and abaya. Initially, I wanted to create a yellow bird or a kitten, but when I started writing the code for the face structure, I wanted to create something comparable to myself while challenging my skills. I then changed the shapes and sizes to fit the way I want to portray myself on this canvas. When frustrated or confused, I usually frown without noticing and my cheeks get really hot and red, which is why I wanted to capture myself in this specific emotional state.
How this was made:
Resources: In the second IM class, Professor Mang went through p5.js which I found extremely helpful because I was able to navigate the platform better. I started experimenting with the codes and different forms of digital art I could make. Unfortunately, I had some work that wasn’t saved, so I couldn’t go back to review it. I also found the technical readings helpful, throughout my process, I was going back and forth to create the lines or shapes.
I started this sketch by creating the background and then the face shape and hijab. I used basic 2D primitives like lines, ellipse, and arc for my face details. I began with a large black ellipse for my shailah in the background and my face. At first, my head looked like an exact circle but after adjusting the values a couple of times, I was able to change it slightly to a more oval shape that felt more natural. I then worked on the details of my face like my eyes, pupils, nose, mouth, and cheeks. While I found it confusing at first to figure out the math, I searched for a 400×400 graph to help with the placement which made the process easier for me because I had many trials figuring out the size, shape, and position of the eyes and nose for example.
I learned how to create the smile using the arc() function. Even though I experimented with different types of shapes and lines for the mouth, I wasn’t satisfied with the results, so I stuck with this one. I used the arc() with PI, which draws part of a circle and allowed me to create a subtle smile.
I also learned about the stroke() and noStroke() commands which I was proud of. When using stroke () it controls the outline of a shape, so when adding noStroke() it completely removes the outline. I used this for the cheeks to create a softer and more natural look. When I put the noStroke () command, all the shapes lost their outlines, so I decided to move the cheek commands to the bottom but it was still removing all the outlines from all the other shapes. This is when I realized that I must include the stroke() command for the shapes I want to keep the outline, in this case it was the eyes.
The code I’m proud of: (I couldn’t find the code insertion)
< //my nose stroke(0); line(200,235,195,235); //long line line(200,199,210,235); //short line>
I know that it’s simple, but for some reason I spent a long time trying to figure out how to create the nose. At first, I created a triangle with 2 lines like this /\ but this wasn’t the nose I was looking for, so I decided to create the nose I normally see in simple illustrations and cartoons using one long and one short line. I had trouble finding the right coordinates because sometimes the line would reach the top of the canvas board and then it would disappear and then it would be short. This challenge led me to use a 400×400 grid again to help me understand the positioning better.
Reflection:
I enjoyed doing this mini project. At first, I was procrastinating and stressing all weekend about how I would use code to create a self-portrait, but the process turned out to be much more manageable than I expected. I am proud with how the final piece turned out. In the future, I would love to add motion or interactivity like making the eyes follow the mouse or the facial expressions change when the mouse is clicked. As I learn and become more confident with coding, I would like to revisit this project and create a more advanced version to reflect my growth in the course.