SELF PORTRAIT

For this assignment, I decided to do a simple portrait as it was my first time coding. However, I did want to play around with the background and try new codes, so I decided to do a background that changes color at random when you toggle around the mouse. At first, I thought it was too hard, and it took me time to figure out the codes, but I watched some tutorials on YouTube and went over the presentations in class, and I finally figured it out and was definitely proud of the outcome. I honestly found it difficult to figure out the shapes and where everything goes, but the Mouse X and Y function was a lifesaver, and it was a matter of getting the hang of it. The hair, however, was my least favorite part as it was getting really confusing with the placements of each circle. Maybe there was an easier way instead of just repeating each circle in a different location, so hopefully, I will figure it out in the future. Overall, after a long process of figuring out each shape, size, and code I’m happy with the outcome.

here is the background code which I am most proud of:

let x, y, r, g, b;

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

function draw() {
  // background that changes color
  background(mouseX, mouseY, 100, 7);
  r = random(0, 255);
  g = 0;
  b = random(0, 255);
  x = random(0, 600);
  y = random(0, 400);
  noStroke();
  fill(r, g, b, 100);
  circle(x, y, 24);

here is my portrait!

here is the code:

let eyeRX = 170;
let eyeLX = 225;
let speed = 15;
let x, y, r, g, b;

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

function draw() {
  // background that changes colour
  background(mouseX, mouseY, 100, 7);
  r = random(0, 255);
  g = 0;
  b = random(0, 255);
  x = random(0, 600);
  y = random(0, 400);
  noStroke();
  fill(r, g, b, 100);
  circle(x, y, 24);
  print(mouseX + "," + mouseY);

  //neck
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  rect(200, 280, 70, 150, 100);

  //   left ear
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  circle(135, 177, 25);

  //   right ear
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  circle(264, 177, 25);

  // face
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  ellipse(200, 160, 125, 185);

  //nose
  noFill();
  arc(199, 183, 20, 15, 270, 90);

  // hair
  noStroke();
  fill(46, 28, 17);

  //  top hair
  circle(140, 60, 40);
  circle(183, 95, 40);
  circle(205, 88, 40);
  circle(160, 100, 40);
  circle(170, 50, 40);
  circle(200, 40, 40);
  circle(230, 50, 40);
  circle(233, 94, 40);
  circle(260, 60, 40);

  // More top curls
  fill(46, 28, 10);
  circle(160, 80, 40);
  circle(190, 70, 40);
  circle(220, 70, 40);
  circle(250, 80, 40);

  // Left side curls
  fill(46, 28, 17);
  circle(130, 90, 40);
  circle(120, 120, 40);
  circle(134, 135, 40);
  circle(142, 113, 40);

  // Right side curls
  fill(46, 28, 17);
  circle(270, 90, 40);
  circle(280, 120, 40);
  circle(262, 134, 40);
  circle(256, 115, 40);

  // eyebrows
  stroke(21, 19, 19);
  strokeWeight(2);
  noFill();
  arc(170, 135, 30, 10, PI, TWO_PI);
  arc(225, 135, 30, 10, PI, TWO_PI);

  //right eye
  fill(255);
  ellipse(eyeRX, 150, 20, 20);

  //left eye
  fill(255);
  ellipse(eyeLX, 150, 20, 20);

  //right pupil
  fill(51, 0, 0);
  ellipse(eyeRX, 150, 10, 10);

  //left pupil
  fill(51, 0, 0);
  ellipse(eyeLX, 150, 10, 10);

  //  mouth up
  strokeWeight(1);
  fill("pink");
  rectMode(CENTER);
  arc(200, 209, 30, 15, PI, 0);

  //   mouth down
  strokeWeight(1);
  fill("pink");
  rectMode(CENTER);
  arc(200, 209, 30, 15, 0, PI);

  //   lip line
  arc(200, 210, 27, 1, 0, PI);

  //shirt
  fill(126, 167, 189);
  noStroke();
  rect(200, 380, 199, 200, 50);

  //   shirt neck line
  fill(240, 190, 120);
  noStroke();
  arc(200, 280, 90, 80, 0, PI, CHORD);

  //   short neck shadow
  noFill();
  strokeWeight(8);
  stroke("#212E2D");
  arc(200, 280, 90, 80, 0, PI);

  noStroke();
  fill(64, 102, 122);
  triangle(128, 315, 135, 400, 150, 400);
  triangle(265, 315, 267, 400, 250, 400);
}