Concept:
For this self-portrait assignment, I drew Anpanman, one of my favorite cartoon characters from childhood. Many of my friends say I look like him, so I chose him as a playful version of my self-portrait. I also admire his optimistic, outgoing personality, and I want to reflect that feeling in my work. My goal for this assignment was to learn how to use p5.js, since I had never used it before. Through drawing with code, I practiced working with coordinates and basic programming logic, and I learned how to build an image step by step using simple shapes. Since my birthday is coming up, I also designed this piece as a small birthday gift card for myself.
How this was made:
I created this image using p5.js. I started by drawing Anpanman’s face. For the face color, I asked ChatGPT to help me find the exact color values, and I used the p5.js reference to learn how to make the shape and remove the stroke. Next, I drew the nose and cheeks. Since they are also circles, that part was fairly straightforward. After that, the eyebrows were the hardest part. Even after checking the reference image, I was still confused about how to code the correct shape. I asked ChatGPT for help, but the code it suggested was too complicated for me to understand. So I went back to the p5.js reference and experimented on my own. After about 15 minutes of trial and error, I finally got the eyebrow shape I wanted. For the mouth, I followed the reference image for the shape, but I asked ChatGPT for help with the mouth color because I tried several times and still couldn’t match the shade I wanted. For the remaining details—highlights, clothing, and buttons—I mainly relied on the p5.js reference and built them using simple shapes.
The part I’m proud of:
The part I’m most proud of is the eyebrows. They weren’t a simple shape, and using arcs was harder than I expected. I had to manage a lot of details—especially the angle and the coordinates—and I kept getting confused about where everything should go. After many tries and small adjustments, I finally found the right position, curve, and angle that looked correct and made me feel satisfied.
//left eye brow noFill(); stroke(20); strokeWeight(3); arc(117, 135, 50, 65, PI, TWO_PI); //right eye brow arc(183,135,50,65,PI,TWO_PI);
Reflection and ideas for future work or improvements:
I think I could improve this project by adding more detail to the clothing and including some interactive animation. Since this was my first time using p5.js, there are still many skills I want to develop. In future work, I hope to incorporate more of my own creative ideas and make my drawings more detailed, polished, and well organized.