Assignment 1 (Self-Portrait) Shaikha Alkaabi

While working on this assignment, I wanted to recreate my middle school self. I had some experience with Processing so working with P5.js wasn’t so hard to navigate and work with. The thing I struggles with the most in this assignment was the bow. The idea is simple but I never worked with triangles in code before so it was quite difficult trying to figure out the right coordinates. For future assignments I’d like to make my projects much more interactive and fun.

function setup() {
  createCanvas(400, 400);
  background(250, 195, 231);
  rectMode(CENTER);
 

}

function draw() {
  
  //Hair
  fill(99, 64, 18, 20);
  rect(200, 235,160, 250, 70);

  //Dress
  fill(232, 133, 12);
  rect(200, 390, 190, 200,60);
    
  //Neck
  fill(250, 207, 150);
  rect(200, 245, 70, 150);

  //Face
  fill(250, 207, 150);
  ellipse(width/2, height/2, 130, 150);
  
  //right eye
  fill(255,255,255);
  ellipse(173, 200, 25, 25);
  //pupil color
  fill(0),
  ellipse(173, 200, 11, 20);

  //left eye
  fill(255,255,255);
  ellipse(226, 200, 25, 25);
  //pupil color
  fill(0);
  ellipse(226, 200, 11, 20);  

  // Eyebrows
  strokeWeight(3);
  noFill();
  //Left eyebrow
  arc(173, 183, 35, 20, PI, TWO_PI); 
  //Right eyebrow
  arc(226, 183, 35, 20, PI, TWO_PI); 
  
  //Nose
  fill(166, 128, 78);
  ellipse(200, 220, 10, 15);

  //Mouth
  fill(255,255,255);
  arc(200, 240, 40, 40, 0, PI + 0, CHORD);
  
  //Bow
  fill(171, 50, 66);
  ellipse(250, 120, 20, 20);
  triangle(240,120,210,90,230,150);
  triangle(260,120,270,90,300,145);

  
  //Earings
  fill(237, 192, 66);
  //right earing
  ellipse(134, 210, 10, 10);  
  //left earing
  ellipse(267, 210, 10, 10);  


}