Homework 1 – Self-Portrait (p5.js)

Hi everyone =) I am finally taking this class and I planned to take it from Freshman Spring! Assignment for today was to create a self-portrait using p5.js. The completion of assignment was quite fun and I enjoyed playing with different shapes and colors. At the end, it turns out to be not really my portrait copy made in p5 but a cute image that I really like.

At the beginning, my initial plan was to stick to my real-life appearance and replicate something alike in code. I tried to convey few features of my appearance with quite noticeable eyebrows and quite long hair. Though, you may barely ever see me without my hair tied.

In the process, I noticed how important is the order. I needed to make sure nothing overlaps in an odd fashion. So, for example, hair code came first, followed by skin and face overall with bang added at the end. For me, the challenging part was to make hair, mouth, and nose appear a bit natural. For hair, I have used arc and rectangle shape to add length. I wanted to use arcs for mouth and nose as well but it turned out to be a bit complicated.

Overall, it was a fun experience and I may continue working on it in my spare time. What I feel may use some improvement is the accuracy of my portrait, yet it should not expected to be 100% exact, right? I browsed through several other projects and I really loved their animation parts and I may recommend myself to add some animation to my image. So, here is my sketch and I will provide my code below it!

function setup() {
  createCanvas(520, 520);
}

function draw() {
  background(163, 187, 236);
  //Hair
  noStroke();
  fill(84, 53, 17);
  arc(260, 260, 300, 380, QUARTER_PI + HALF_PI, QUARTER_PI, OPEN);
  rect(110, 250, 300, 400);
  print(mouseX, mouseY);

  //Neck
  fill(232, 190, 172);
  rect(235, 360, 50, 55, 20);
  //Face
  noStroke();
  fill(232, 190, 172);
  ellipse(260, 255, 200, 260);

  noStroke();
  fill(84, 53, 17);
  arc(300, 120, 150, 100, 0, PI + QUARTER_PI, CHORD);

  //Eyebrows
  stroke(21, 19, 19);
  strokeWeight(7);
  noFill();
  arc(210, 230, 55, 10, PI, TWO_PI, OPEN);
  arc(310, 230, 55, 10, PI, TWO_PI, OPEN);

  //Eyes
  strokeWeight(1);
  fill(57, 36, 12);
  ellipse(210, 260, 28, 35);
  ellipse(310, 260, 28, 35);
  noStroke();
  fill(255);
  ellipse(207, 252, 8, 8);
  ellipse(306, 252, 8, 8);

  //Nose & Mouth
  fill(201, 130, 118);
  triangle(260, 250, 270, 310, 250, 310);

  //Hair (continued)
  stroke(201, 130, 118);
  strokeWeight(10);
  line(250, 335, 270, 335);

  //Shoulders & Shirt
  noStroke();
  fill(239, 246, 138);
  rect(185, 395, 150, 220);
  ellipse(190, 515, 160, 240);
  ellipse(330, 515, 160, 240);
}

Thank you for checking this out!