Reflection
For this self-portrait, I wanted to create a clean, simple, and expressive representation of myself, combining basic shapes like ellipses, arcs, and rectangles. The goal was to balance realism and a playful, cartoon-like aesthetic while incorporating distinct features like a small beard, expressive eyebrows, and stylized hair. I focused on ensuring proportionality and seamless transitions between shapes, such as the neck connecting to the head and the shirt integrating an arc and rectangle for a polished look.
I’m proud of how the self-portrait turned out, as it reflects a good balance of simplicity and personal expression. The use of arcs and ellipses allowed me to create distinct facial features, and the small beard adds a unique touch to the design. However, there is room for improvement. In the future, I’d like to experiment with adding shading or gradients to enhance depth and realism. Additionally, I could explore animations, such as blinking eyes or a waving hand, to bring the portrait to life. This project has been a rewarding exercise in creative coding, helping me better understand shape integration and design principles in p5.js.
function setup() { createCanvas(400, 400); } function draw() { background(220); // Drawing the neck fill(240, 200, 170); rect(180, 280, 40, 20); // Drawing the head fill(240, 200, 170); ellipse(200, 200, 150, 180); // Drawing the eyes fill(255); ellipse(170, 190, 30, 20); ellipse(230, 190, 30, 20); fill(50); ellipse(170, 190, 10, 10); ellipse(230, 190, 10, 10); // Adding eyebrows using arcs for expression stroke(50); strokeWeight(3); noFill(); arc(170, 175, 40, 10, PI, TWO_PI); arc(230, 175, 40, 10, PI, TWO_PI); // Drawing the nose stroke(150, 100, 80); strokeWeight(2); line(200, 190, 200, 220); arc(200, 220, 20, 10, 0, PI); // Adding mouth noStroke(); fill(200, 80, 80); arc(200, 250, 50, 30, 0, PI); // Adding a small beard below the mouth fill(100, 50, 30); arc(200, 280, 70, 30, 0, PI); // Drawing the hair fill(50); arc(200, 150, 160, 120, PI, TWO_PI); rect(120, 150, 20, 80); rect(260, 150, 20, 80); // Drawing ears on both sides of the head fill(240, 200, 170); ellipse(125, 200, 20, 40); ellipse(275, 200, 20, 40); // Drawing a shirt fill(100, 150, 200); noStroke(); arc(200, 347, 100, 100, PI, TWO_PI); rect(150, 345, 100, 50); }