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);

color shirtShadowColor = color(227, 234, 235);
color cheeksColor = color(226, 169, 175, 50);

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

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));
} else {
hairColor = color(102, 94, 91);
}

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

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);

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);

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);

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");
}
```