## eeryan-Project 1 self portrait

``````function setup() {
createCanvas(500, 600);
background(247,187,31);
}

function draw() {
//hair
strokeWeight(0);
fill(137,60,29);
ellipse(240,280,300,300)
strokeWeight(0);
fill(137,60,29);
ellipse(185,350,290,310);
strokeWeight(0);
fill(137,60,29);
ellipse(300,360,280,270);
//face
strokeWeight(0);
fill(234,179,125);
ellipse(250,300,250,260);
//body
strokeWeight(0);
fill(141,214,239);
ellipse(230,580,355,240);
//cheeks
strokeWeight(0);
fill(250,178,125);
ellipse(187,305,75,75);
strokeWeight(0);
fill(250,178,125);
ellipse(328,305,75,75);
//eyes
strokeWeight(0);
fill(137,60,29);
ellipse(220,273,20,15);
strokeWeight(0);
fill(137,60,29);
ellipse(308,273,20,15);
//nose
strokeWeight(0);
fill(244,151,89);
rect(258,265,23,80);
//mouth
stroke(234,125,92);
strokeWeight(5);
noFill();
line(230,370,290,370);
}
``````

Process:

I started by mocking up my self portrait in Illustrator, to figure out the shapes and colors that would work best for this assignment. I found it easier to rough it out in Illustrator and in my sketchbook as opposed to diving in with code without first planning out how I wanted it to look. After I figured out the way I generally wanted it to look in Illustrator, I used the ruler function to find the x and y coordinates for each shape to insert into my code. Once I had coded everything to the exact coordinates that I had in Illustrator, I further tweaked some of the facial elements to get everything the way I wanted. I messed around with adding colored strokes to certain elements, as well as adding a neck, but decided in the end to keep to simple, rounded shapes to unify the composition.

## JackieChou-project 01-face

``````//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project-01
function setup() {
createCanvas(600, 585);
background(251,220,13);
text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {

//neck
noStroke();
fill(211,166,161);
rect(255,400,90,100);

fill(224,195,200);
ellipse(300,300,200,240);

//hat
fill(60);
arc(300,240,170,150,PI,0);
fill(0);
ellipse(300,160,20,20);

//face shape
fill(251,220,13);

//ears
fill(224,195,200);
ellipse(210,290,50,60);
ellipse(390,290,50,60);

fill(20);
rect(210,255,179,65);

arc(210,287,33,64,HALF_PI,PI+HALF_PI);
arc(389,287,33,64,PI+HALF_PI,HALF_PI);

fill(211,166,161);
ellipse(263,283,45,35);
ellipse(343,283,45,35);

fill(224,195,200);
ellipse(258,283,45,35);
ellipse(338,283,45,35);

//eyes
fill(245);
ellipse(259,281,30,15);
ellipse(341,281,30,15);
fill(3);
ellipse(252,281,10,10);
ellipse(334,281,10,10);

//mouth2
stroke(173,140,137);
strokeWeight(5);
line(270,370,330,370);

//nose
noStroke();
fill(211,166,161);
arc(300,337,30,10,0,PI);

//nose
noFill();
strokeWeight(3);
stroke(136,104,101);
noStroke();
beginShape();
curveVertex(300,290);
curveVertex(297,290);
curveVertex(315,320);
curveVertex(292,322);
curveVertex(293,310);
endShape();
noStroke();

//shirt
fill(50);
ellipse(300,584,370,270);
noFill();
beginShape();
vertex(70,600);
vertex(150,515);
vertex(255,475);
vertex(345,475);
vertex(450,515);
vertex(530,600);
endShape(CLOSE);

//shirt-stripes
fill(210);
rect(170,500,260,10);
rect(145,530,300,10);
rect(135,560,330,10);

}
``````

Robber, 2017
Digital self portrait.
Javascript.

For this project, I went through multiple iterations and phases. The toughest part was learning first how to utilize the different commands to create the shapes I wanted to use. Also, I didn’t learn how to organize my code until late in the process, which made managing my code harder. However, I picked everything up fairly quickly.

I also experimented and iterated how I wanted to represent my nose and my mouth.

I first went from a generic self portrait:

To a robber (I don’t know why, but I felt that it represented me).