Assignment 1- (Self-Portrait) Hamdah AlSuwaidi

Description:
For this assignment, I opted for a straightforward approach to create a self-portrait. The portrait includes various facial features, notably the eyes move horizontally due to the animation, and the eyebrows respond to the eye movement.

Sketch:

Code Implementation:

let eye1X = 170;
let eye2X = 230;
let direction1 = 1;
let direction2 = 1;
let lipYOffset = 0;

function setup() {
  angleMode(DEGREES);
  rectMode(CENTER);
  createCanvas(400, 400);
  background(240);
}

function draw() {
  background(240);

  // Draw the existing elements

  // hair
  fill(41, 38, 31);
  rect(200, 220, 205, 330, 90);

  // shirt
  fill(167, 181, 169);
  rect(200, 380, 190, 270, 40);

  // neck
  fill(245, 227, 176);
  rect(200, 239, 100, 100, 30);

  // face
  fill(245, 227, 176);
  ellipse(200, 150, 150, 175);

  // left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);

  // right eye
  ellipse(eye2X, 143, 40, 40);

  // left pupil
  fill(0);
  ellipse(eye1X, 143, 15, 20);

  // right pupil
  ellipse(eye2X, 143, 15, 20);

  // mouth
  arc(200, 192, 50, 50, 0, 180);

  // nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);

  // bangs
  noStroke();
  fill(41, 38, 31);
  rect(200, 81, 90, 43, 58);
  strokeWeight(5);
  stroke(41, 38, 31);
  line(150, 115, 175, 115); // left eyebrow
  line(225, 115, 250, 115); // right eyebrow
  strokeWeight(1);
  stroke(0);



  // eye positions 
  eye1X += direction1 * 2;
  eye2X += direction2 * 2;

  // Check if eyes reach the edge and change direction
  if (eye1X <= 160 || eye1X >= 180) {
    direction1 *= -1;
  }

  if (eye2X <= 220 || eye2X >= 240) {
    direction2 *= -1;
  }

  
}