Motivation
I’m not much of a social media person, and even on the platforms I’m on, I’m rarely active. Snapchat, in particular, never really interested me until a good friend recommended it and encouraged me to join. During the account creation process, I had to create an avatar that resembled me. Months later, I joined Duolingo and had to do something similar. I found it fascinating to customize every detail—from facial features and skin tone to hairstyle and outfit. Beyond the fun of creating these avatars, I became curious about the logic and methods behind designing such features. When I learned that our first-week assignment was to draw a self-portrait, it therefore felt familiar, but this time, there were no pre-made shapes or preset colors to choose from. Instead, I was responsible for drawing and coloring everything myself using p5.js. I was genuinely excited about the challenge! I therefore drew my inspiration from my snapchat and Duolingo avatar that I think paint a picture of who I am.
Code
Before coding the portrait, I began by sketching it on plain paper to guide me, particularly with determining precise measurements for the coordinates. I worked on a 400×400 canvas with a light grey background (Greyscale: 220). I started by coding the body and gradually worked my way upward. After much thought about choosing a color that closely represents my skin tone, I decided on RGB(79, 41, 3). To keep the code organized, I grouped related features into separate blocks—such as eyes, glasses, ears, and nose. I’m especially proud of how the eyes, ears, glasses, and mouth turned out because positioning and sizing them correctly took a lot of effort and calculations. For the outfit, I settled for a grey zipper jacket, as grey happens to be my favorite color. To add more aesthetics and also to learn something new; sin curves I decided to add a frame on the top and bottom.
Challenges and Areas for Improvement
The entire process was enjoyable, but I did encounter some challenges along the way. While some issues were minor and I managed to resolve them, others were more complex, and I had to settle for alternative approaches. Some of the key challenges I faced included making curves on the edges of quads, maintaining symmetry, and working with arcs. Additionally, I was unable to implement interactivity in this project, but I hope to explore and implement it in future projects. I aim to enhance my skills in adding interactivity to make future projects more dynamic and engaging. Overall, I really enjoyed the process and look forward to creating more projects. I also appreciate how this journey allows me to continuously improve my JavaScript skills as I move forward.