Assignment 1 : Self Portrait

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
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); }
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);
}