Self Portrait

This week’s assignment was to create a self-portrait in Processing. It felt a little counterintuitive to draw using lines of code, especially regarding time. Why should I draw a shape for like 5 minutes coding the exact position of vertices, while I can open Illustrator and have the same shape done it a matter of seconds? The answer came when I wanted to add some cool effects. And that got me very excited for all the possibilities that opened with this initial exercise.

For this assignment, I mostly I used the beginShape() endShape() function but to get some practice, I experimented with triangles, rectangles, ellipses and all sorts of shapes. Definitely the hardest one to crack were arcs and its angles – though they are very simple, I had to revisit high school trigonometry for that which opened some painful memories. I also googled a lot and the game-changing hack was to track your mouse cursor using “print” so you know the exact coordinates. Cannot even say how much time this has saved me. Also smooth() function is very great as it makes the corners look less robotic and more finessed!

Overall I created a very simplified version of me with some pastel colours and lazy triangular pseudo shadows to add some structure. And when you put your cursor to my necklace my hair (and eyebrows) go crazy. Yay.

And the code:

//setting up the colors I'm going to use
color backgroundColorA= color(170, 196, 171);
color backgroundColorB= color(115, 144, 130);
color faceColor = color(225, 199, 186);
color lipsColor = color(214, 171, 154);
color shirtColorLight = color(207, 213, 213);
color shirtColorDark = color(180, 181, 181);
color necklaceColorLight = color(211, 181, 123);
color necklaceColorDark = color(211, 168, 85);

//colors for shadows
color shirtShadowColor = color(227, 234, 235);
color cheeksColor = color(226, 169, 175, 50);

//color integers for some cool effects later on
int hairColor;
int hairShadowColor;

void setup() {
  size(500, 500);
  smooth();
}

void draw () {
  background(backgroundColorB);
  noStroke();
  ellipseMode(CENTER);
  fill(backgroundColorA);
  ellipse(width/2, width/2, 450, 450);


  if (mouseX>240 && mouseX<260 && mouseY>370 && mouseY < 390) {
    hairColor = color(random(255), random(255), random(255));
    hairShadowColor = color(random(255), random(255), random(255));
  } else {
    hairColor = color(102, 94, 91);
    hairShadowColor = color(80, 75, 70);
  }


  //hair in the back
  fill(hairColor);
  rect(175, 240, 150, 150);


  //head and neck
  fill(faceColor);
  rect(160, 100, 180, 150, 10);
  rect(230, 240, 40, 40, 10);

  //shirt collar
  fill(shirtColorDark);
  rect(215, 294, 70, 5, 10);
  fill(shirtColorLight);
  rect(210, 275, 80, 20, 10);

  //shirt body
  fill(shirtColorLight);
  beginShape();
  vertex(215, 299);
  vertex(90, 320);
  vertex(90, 400);
  vertex(410, 400);
  vertex(410, 320);
  vertex(285, 299);
  endShape(CLOSE);

  //arms
  ellipseMode(CENTER);
  ellipse(90, 360, 20, 80);
  ellipse(410, 360, 20, 80);

  //shirt shadow
  fill(shirtShadowColor);
  triangle(380, 327, 409, 362, 397, 336);
  triangle(98, 369, 153, 388, 103, 380);
  triangle(261, 282, 279, 287, 276, 280);

  //necklace
  stroke(necklaceColorLight);
  strokeWeight(2);
  line(215, 299, 250, 370);
  line(285, 299, 250, 370);

  noStroke();
  fill(necklaceColorLight);
  ellipseMode(CORNER);
  ellipse(240, 370, 20, 20);

  fill(necklaceColorDark);
  ellipse(245, 370, 10, 10);


  //hair
  ellipseMode(CENTER);
  noStroke();
  fill(hairColor);

  //letf shape of hair
  beginShape();
  vertex(158, 108);
  vertex(128, 168);
  vertex(135, 258);
  vertex(125, 331);
  vertex(141, 367);
  vertex(176, 372);
  vertex(194, 315);
  vertex(181, 231);
  vertex(193, 167);
  vertex(204, 133);
  vertex(265, 110);
  endShape(CLOSE);

  //top of the head
  arc(323, 110, 100, 70, -PI, 0);
  arc(218, 110, 120, 70, -PI, 0);
  rect(251, 100, 40, 10);

  //right shape of hair
  fill(hairColor);
  beginShape();
  vertex(323, 102);
  vertex(313, 183);
  vertex(305, 281);
  vertex(315, 371);
  vertex(369, 328);
  vertex(386, 242);
  vertex(373, 109);
  endShape(CLOSE);

  beginShape();
  vertex(303, 104);
  vertex(322, 141);
  vertex(331, 97);
  endShape(CLOSE);

  //hair shadow
  fill(hairShadowColor);
  triangle(311, 255, 320, 344, 322, 286);
  triangle(168, 139, 167, 171, 154, 193);
  triangle(324, 84, 356, 104, 345, 90);
  triangle(173, 254, 187, 312, 170, 283);
  triangle(368, 147, 376, 229, 365, 183);
 


  //eyes
  stroke(lipsColor);
  strokeWeight(5);
  arc(220, 170, 20, 5, -PI, 0);
  arc(280, 170, 20, 5, -PI, 0);

  //lips
  stroke(lipsColor);
  strokeWeight(5);
  noFill();
  arc(250, 215, 30, 20, 0, radians(180));

  //chin
  strokeWeight(1);
  line(240, 250, 260, 250);

  //eyebrows
  stroke(hairColor);
  strokeWeight(3);
  noFill();
  beginShape();
  vertex(270, 150);
  vertex(280, 148);
  vertex(295, 150);
  endShape();

  beginShape();
  vertex(230, 150);
  vertex(220, 148);
  vertex(205, 150);
  endShape();

  //chubby cheeks
  fill(cheeksColor);
  noStroke();
  ellipseMode(CORNER);
  ellipse(190, 188, 30, 40);
  ellipse(282, 188, 30, 40);

  //cursor tracker
  print(mouseX);
  print(" ");
  println(mouseY);
  
  saveFrame("me_####.png");
}