Assignment 1 – Kamila

link

function setup() {
  rectMode(CENTER);
  angleMode(DEGREES);

  createCanvas(600, 700);
}

function draw() {
  background(255);

  //   hair
  fill(61, 13, 6);
  rect(300, 400, 600, 800, 200);

  //   neck
  noStroke();
  fill(209, 166, 146);
  rect(300, 500, 200, 200);

  //   head
  stroke(33, 6, 4);
  strokeWeight(3);
  fill(209, 166, 146);
  ellipse(300, 300, 360, 450);

  //  nose
  noStroke();
  fill(219, 199, 186, 87);
  triangle(350, 360, 300, 270, 250, 360);

  //   eyes
  noStroke();

  fill(254);
  ellipse(220, 240, 90, 70);

  fill(254);
  ellipse(370, 240, 90, 70);

  fill(97, 48, 16);
  ellipse(220, 230, 35, 40);

  fill(97, 48, 16);
  ellipse(370, 230, 35, 40);

  //   ears

    noFill();
    stroke(209, 166, 146);
    strokeWeight(12);
    arc(120, 300, 70, 80, 30, 14, CHORD);

    stroke(209, 166, 146);
    strokeWeight(12);
    arc(480, 300, 70, 80, 30, 14, CHORD);

  // airpods

  fill(5, 0, 0);
  rect(100, 300, 100, 170, 20);

  fill(5, 0, 0);
  rect(500, 300, 100, 170, 20);

  fill(145, 17, 173);
  rect(100, 200, 60, 200, 5, 5, 100, 100);

  fill(145, 17, 173);
  rect(500, 200, 60, 200, 5, 5, 100, 100);

  fill(145, 17, 173);
  stroke(145, 17, 173);
  strokeWeight(50);
  curve(73, 120, 500, 120, 274, 1, 50, 50, 50, 100, 10, 100);
  fill(145, 17, 173);
  stroke(145, 17, 173);
  strokeWeight(50);
  curve(10, 120, 96, 106, 274, 1, 50, 50, 50, 100, 10, 100);

  //  lips
  noStroke();

  stroke(130, 12, 12);
  strokeWeight(7);
  fill(145, 39, 39);
  arc(305, 410, 150, 100, 0, 180, CHORD);

  //   brows
  noStroke();
  fill(64, 17, 14);
  rect(215, 180, 80, 10, 50);

  fill(64, 17, 14);
  rect(365, 180, 80, 10, 50);
}

For this project, I created a self-portrait of mine.  My goal was to use only basic shapes (rectangles, ellipses, triangles, and arcs) to represent my facial features and a few signature details: my hair, bold lipstick, and big headphones.

The part I’m most proud of is the headphone area. I used rectangles for the ear pieces and thick curves for the band to suggest a 3D shape using only 2D primitives:

// airpods fill(5, 0, 0); rect(100, 300, 100, 170, 20); fill(5, 0, 0); rect(500, 300, 100, 170, 20); fill(145, 17, 173); rect(100, 200, 60, 200, 5, 5, 100, 100); fill(145, 17, 173); rect(500, 200, 60, 200, 5, 5, 100, 100); fill(145, 17, 173); stroke(145, 17, 173); strokeWeight(50); curve(73, 120, 500, 120, 274, 1, 50, 50, 50, 100, 10, 100); fill(145, 17, 173); stroke(145, 17, 173); strokeWeight(50); curve(10, 120, 96, 106, 274, 1, 50, 50, 50, 100, 10, 100); The reason I chose this specific chunk of code is because it turned out to be exactly the way I wanted it to look like. The rectangles stack together to feel like ear cups and stems. The thickcurve()lines work as the headband, wrapping over the hair. Reusing the same purple color for all the headphone parts makes it look like one connected object even though it’s made of separate shapes.

I started by setting up the canvas and using rectMode(CENTER) so positioning the neck and hair was easier. I built the face using an ellipse for the head and a rectangle for the neck. I added features (eyes, nose, lips, brows) with ellipses, a triangle, an arc, and rectangles. The hair is a large rounded rectangle in the background. For the AirPods, I experimented with curve() and thick strokeWeight to make a band that feels like it wraps over the head. I didn’t use any image files, textures, or external assets, just p5.js drawing functions.

Breaking everything down into simple shapes helped me understand coordinate systems and layering in p5.js. Also, using consistent color palettes made the portrait feel more cohesive. I would make the sketch more interactive next time. For example: eyes following the mouse, or changing lip color with a key press.