Raya Tabassum: Self-Portrait Assignment

This is my first attempt at p5.js. I’ve tried to reflect my personal preferences and appearances in this “self-portrait”. My idea is to portray a Bangladeshi girl with big eyes, dark lipstick, and blush wearing a dress and a necklace. I matched the skin color with my own complexion, and the hair color with my hair highlight’s color. Concept wise I think the intention was to personalize the drawing as much as I can using only the simple shapes like ellipse, circle, arc, rectangles and straight lines. I tried to make the colors pop and to make it very detailed for example the necklace is similar to an actual one that I have with an Emerald stone, then the parting between the hair which is something very prominent in my appearance. Placing the lips and the eyelashes were the most difficult part for me I think.
I added interactivity with a smile formed on the mouth upon mouse-click with the if-else statement and mouseIsPressed function. So if you click on the image the lips change to a smile.
For improvements I think adding interactivity with the eyes opening and closing periodically and having some texts would have been nice. Also maybe making it a full-body self-portrait would be a very detailed development I believe which I intend to work on later. Overall, I loved playing with the numbers and parameters and colors and shapes to make it more and more perfect to the reality.

function setup() {
  createCanvas(500, 500);
  background(255, 182, 193); //Pink background
}

function draw() {
  //Hair
  noStroke();
  fill(90, 56, 37); // Hair color
  arc(250, 140, 200, 180, PI, 0); // Top hair
  rect(150, 140, 200, 300); // Side hair
  
  //Neck
  fill(230, 180, 145);
  rect(200, 260, 100, 70);
  
  //Dress
  fill(220, 0, 100);
  arc(250, 445, 250, 300, PI, 0, OPEN);
  
  //Necklace Design
  noFill();
  strokeWeight(2);
  stroke(255);
  arc(250, 320, 137, 200, 0, PI);
  arc(250, 317, 127, 190, 0, PI);
  stroke(0);
  fill(31.4, 78.4, 49);
  ellipse(250, 416, 9, 12);

  //Face
  stroke(0);
  strokeWeight(1);
  fill(230, 180, 145); //Skin color
  ellipse(250, 200, 170, 195); //Face shape
 
  //Eyes
  fill(255); //White of the eyes
  ellipse(215, 180, 40, 20); //Left eye
  ellipse(285, 180, 40, 20); //Right eye
  fill(0); //Pupil color
  ellipse(215, 180, 10, 20); //Left pupil
  ellipse(285, 180, 10, 20); //Right pupil

  // Eyelashes
  stroke(0);
  strokeWeight(0.5);
  // Left eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(190 + i * 6, 162, 200 + i * 6, 172);
  }
  // Right eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(278 + i * 6, 172,  288 + i * 6, 162);
  }

  // Eyebrows
  strokeWeight(2);
  noFill();
  arc(215, 167, 40, 20, PI, TWO_PI); //Left eyebrow
  arc(285, 167, 40, 20, PI, TWO_PI); //Right eyebrow
  
  //Middle parting of Hair
  strokeWeight(1);
  line(250, 52, 250, 103);
  
  //Nose
  noFill();
  strokeWeight(1);
  arc(250, 210, 10, 15, 180, 90, OPEN); 
  
  //Blush
  noStroke();
  fill(255, 192, 203);
  ellipse(195, 210, 20, 10);
  ellipse(305, 210, 20, 10);

  //Forming a smiley face when mouse is pressed
  if(mouseIsPressed){
    noFill();
    stroke(0);
    arc(250, 225, 80, 45, 120, 103);
    fill(255);
    arc(250, 225, 58, 70, 120, 103, OPEN);
    
  }
  else{
    //Lips
    fill(128, 0, 0); //Lip color
    noStroke();
    arc(260, 250, 28, 12, PI, 0);
    arc(240, 250, 28, 12, PI, 0);
    arc(250, 250, 50, 20, 0, PI);
  }
}