Portrait of Joselyn

Brief Description and Concept

In this self-portrait that I created using JavaScript on a webpage, you can see that I vividly depicted my hair in great detail. Notice the two triangular bangs at the front of my forehead, a few newly grown strands curling at the sideburns due to the pressure from my glasses, and my high ponytail secured with a blue hair tie. I even added a post-bleaching light blonde effect to the hair, making it more realistic. Another signature feature is my round glasses. You might also notice that I’m laughing joyfully—probably because I genuinely love outdoor activities on sunny days. There's a little Easter egg too: the extensive use of blue in this illustration reflects my favorite color, likely because my favorite football team plays in blue jerseys.

Coding

Clouds in the Sky

Several ellipse() functions simulate clouds in various sizes and positions.

White color (fill(255)) with no stroke creates soft, cloud-like shapes.

Eyebrows

Simple lines define the nose and arched eyebrows, adding character to the face.

Mouth

The smiling mouth is drawn using an arc, representing joy and happiness.

Alternative Solution Using beginShape()

Instead of using arc(), I can manually plot points to form the curved mouth shape:

fill(250, 128, 114);

beginShape();

vertex(175, 310);

bezierVertex(200, 290, 225, 290, 250, 310);

vertex(250, 310);

endShape(CLOSE);

I prefer the bezierVertex-based approach because it offers greater flexibility in shaping the mouth. This method allows me to create more expressive or asymmetrical smiles, which is useful for adding subtle emotional nuances to the face. However, if simplicity is the priority, the original arc() function is more efficient.

Findings and Lessons Learned

Key Takeaway: Achieving facial symmetry requires precise coordinate adjustments.

Creativity Insight: Combining geometric shapes creatively can produce complex and visually appealing designs.

Problem-Solving: Layering order is essential to avoid overlapping errors.

reflection

Creating this self-portrait with p5.js taught me how to break down complex visuals into simple geometric shapes. One challenge was balancing feature placement, especially aligning the eyes and drawing glasses without obscuring details. I solved this by using stroked circles instead of filled shapes. To improve efficiency, I replaced repetitive code with loops for symmetrical elements, making the design cleaner and more maintainable. Experimenting with bezierVertex() for the mouth also allowed for more expressive shapes compared to arc(). Collaborating with peers and consulting documentation helped refine my work. Overall, this project highlighted the creative potential of coding and the importance of blending logic with artistic expression. In the future, I aim to add animations and dynamic interactions.

Page updated

Report abuse