## yunzhous-Project-01-Face

``````function setup() {
createCanvas(500, 500);
background(241, 163, 111);

}

function draw() {

translate(0, 65);

//hair
fill(0);
ellipse(width/2, 130, 160, 160);
rectMode(CENTER);
rect(width/2, 250, 160, 240);

//hat
fill(251, 197, 197);
noStroke();
triangle(325, 0, 250, 50, 325, 100);
ellipse(325, -5, 25, 25);

//face
noStroke();
fill(240, 206, 183);
ellipse(width/2, 150, 130, 140);

//ears
fill(240, 206, 183);
ellipse(183, 155, 20, 25);
ellipse(317, 155, 20, 25);

//dark circles
fill(125, 60);
arc(220, 158, 25, 20, 0, PI);
arc(280, 158, 25, 20, 0, PI);
fill(240, 206, 183);
ellipse(220, 152, 25, 20);
ellipse(280, 152, 25, 20);

//eyes
fill(255);
ellipse(220, 150, 25, 20);
ellipse(280, 150, 25, 20);
fill(0);
ellipse(224, 152, 14, 14);
ellipse(284, 152, 14, 14);

//eyebrows
stroke(0);
strokeWeight(4);
line(205, 135, 235, 125);
line(265, 125, 295, 135);

//nose
stroke(0);
strokeWeight(2);
line(width/2, 160, width/2, 165);

//smile
noFill();
strokeWeight(2);
arc(250, 180, 30, 15, 0, PI);

//dimple
noStroke();
translate(46, -102);
fill(245, 169, 157, 97);
ellipse(275, 180, 8, 5);

//bang
fill(0);
rotate(PI/4);
translate(50, -140);
ellipse(176, 79, 45, 100);

}``````

I sketched this out on my sketchbook first, and then draw them using Sublime. The most time consuming part is testing and moving the xy coordinates.

## hannahk2- Project-01

``````//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-01

function setup() {
createCanvas(600, 600);
background(0, 38, 74);
}

function draw() {
//triangle top
fill(0, 142, 214);
stroke(0, 92, 153);
strokeWeight(7);
triangle(205, 176, 268, 237, 416, 322);

fill(0, 142, 214);
stroke(0, 92, 153);
strokeWeight(7);
triangle(224, 186, 259, 255, 293, 217);

fill(0, 142, 214);
stroke(0, 92, 153);
strokeWeight(7);
triangle(212, 243, 161, 306, 239, 308);

//hair top curve
bezier(203, 180, 294, 177, 390, 231, 438, 300);

fill(0, 142, 214);
stroke(0, 92, 153);
strokeWeight(7);
ellipse(293, 308, 276, 176);

fill(0, 142, 214);
noStroke();
quad(233, 196, 250, 297, 410, 378, 350, 222);

fill(0, 142, 214);
stroke(0, 92, 153);
strokeWeight(7);
quad(158, 293, 128, 426, 466, 463, 413, 322);

//bottom hair curve
fill(0, 142, 214);
bezier(130, 403, 77, 457, 168, 467, 363, 447);

//face
fill(214, 219, 223);
noStroke();
ellipse(291, 375, 242, 185);

//peak
fill(214, 219, 223);
noStroke();
triangle(291, 271, 214, 343, 366, 331);

//right eye
fill(238, 249, 236);
stroke(0, 38, 74);
strokeWeight(5);
ellipse(426, 377, 166, 150);

//left eye
fill(238, 249, 236);
stroke(0, 38, 74);
strokeWeight(5);
ellipse(200, 366, 166, 150);

//right pupil
fill(0, 0, 0);
stroke(0, 38, 74);
strokeWeight(5);
ellipse(434, 379, 91, 92);

//left pupil
fill(0, 0, 0);
stroke(0, 38, 74);
strokeWeight(5);
ellipse(200, 379, 91, 92);

//top lip
fill(147, 221, 220)
ellipse(330, 415, 64, 18);

//bottom lip
fill(45, 198, 214)
ellipse(330, 435, 64, 16);

}
``````

This project was very hard for me as it was one of my first times coding. I am kind of embarrassed with my results, and had a very difficult time forming some shapes such as curves and whatnot, but once I learn how to use the different shape functions better, I think i will be able to make more successful drawings.

## monicah1-project-01

``````function setup() {
createCanvas(600, 600);
background(7,1,247);
}

function draw() {

var skin = color(240,220,167);
fill (skin);
//ellipseMode(center);
ellipse(300,196,270,270);

var white = color(255,255,255);
fill (white);
ellipse(250,150,50,10);
ellipse(350,150,50,10);
var pink = color(240,138,177);
fill (pink);
ellipse(200,200,100,100);
ellipse(400,200,100,100);
//line(280,170,310,190);

line(320,250,290,180);

//ellipsemode(center);
var skin = color(240,220,167);
fill (skin);
ellipse(300,260,50,10);
ellipse(300,255,50,10);

//fill(233,93,74);
ellipseMode(center);
ellipse(250,600,70,70);
ellipse(350,300,70,70);

}

``````

It is interesting to see how compositions of simple shapes can form variety of images. I enjoyed seeing the transition from numbers to shapes.

## Project-1-Face-sjahania

``````function setup() {
createCanvas(200, 200);
background(0,83,124);
}
function setGradient(x, y, w, h, c1, c2) {

noFill();

for (var i = y; i <= y+h; i++) {
var inter = map(i, y, y+h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x+w, i);
}
}

function draw() {
//bow
fill(255,95,60);
stroke(0);
strokeWeight(0.5);
triangle(80,85,85,55,110,75);
triangle(120,85,115,55,90,75);
ellipse(100,65,8,10);

//hair
noStroke();
fill(55,22,0);
rect(75,90,50,80);

//highlights
c2 = color(255,206,69);
c1 = color(55,22,0);

//neck
fill(255,213,161);
rect(88,120,24,20);
arc(100,140,24,29,0,PI);

//jawline
noFill();
strokeWeight(.5);
stroke(0);
arc(100,103,40,60,0,PI);

//face
noStroke();
fill(255,213,161);
ellipse(100,100,50,60);

//bangs
fill(55,22,0);
arc(90,90,45,50,PI-QUARTER_PI,TWO_PI-QUARTER_PI);
arc(110,90,45,50,PI+QUARTER_PI,QUARTER_PI);
fill(255,213,161);
arc(100,100,45,50,QUARTER_PI,TWO_PI-QUARTER_PI);
arc(100,100,45,50,PI+QUARTER_PI,PI-QUARTER_PI)

//whites of eyes
fill(255);
ellipse(90,100,10,7);
ellipse(110,100,10,7);

//eye color
fill(55,22,0);
ellipse(90,100,7,7);
ellipse(110,100,7,7);

//eyebrows
noFill();
stroke(55,22,0);
strokeWeight(1.75);
arc(89,94,15,4,PI,TWO_PI-QUARTER_PI);
arc(111,94,15,4,PI+QUARTER_PI,TWO_PI);

//nose
noFill();
stroke(55,22,0);
strokeWeight(1);
arc(100,110,8,8,PI,TWO_PI);

//mouth
noStroke();
fill(0);
arc(100,118,12,9,0,PI);

//tongue
fill(255,133,159);
arc(100,120,8,5,0,PI);

//shirt
fill(255,95,60);
noStroke();
rect(60,145,80,60,25,25,0,0);

//shirt collar
stroke(0);
strokeWeight(.5);
arc(93,152,20,20,QUARTER_PI,PI+QUARTER_PI);
arc(107,152,20,20,TWO_PI-QUARTER_PI,PI-QUARTER_PI);

//arm holes
fill(0,83,124);
triangle(75,200,75,170,78,200);
triangle(122,200,125,170,125,200);
noStroke();
fill(255,213,161);
triangle(88,145,100,159,112,145);

}

``````

I had a lot of trouble at first, especially since I have no eye for aesthetic, but eventually I got the hang of figuring out where things should go. I also added something from the p5.js website that allowed me to put a gradient in my hair.

## dahyec-Project 01

``````function setup() {
createCanvas(500,600);
background(226,82,98);
}

function draw() {

//background
strokeWeight(0);
fill (182,68,81);
rect (0,0,700,80);
rect (0,150,700,80);
rect (0,300,700,80);
rect (0,450,700,80);

//hair
strokeWeight(0);
fill(137,54,73);
ellipse(250,230,300,270);
rect(100,240,300,500);

//ears
fill(226,110,112);
ellipse(135,300,40,70);
fill(226,110,112);
ellipse(365,300,40,70);
fill(85,33,64,80);
ellipse(135,300,20,40);
fill(85,33,64,80);
ellipse(365,300,20,40);

//face
strokeWeight(0);
fill(82,36,67,90);
ellipse(242,310,220,260);
strokeWeight(0);
fill(226,110,112);
ellipse(250,300,220,260);

//body
strokeWeight(0);
fill(233,202,163);
ellipse(250,580,355,240);
fill(233,202,163);
rect(73,565,354,240);

//eyes
strokeWeight(0);
fill(85,33,64);
ellipse(205,290,26,40);
ellipse(310,290,26,40);

//nose
strokeWeight(0);
ellipse(258,325,10,10);

//mouth
fill(85,33,64,80);
arc(255, 380,33,30,0,PI);
fill(85,33,64);
arc(255, 365, 60,13,PI,0,PI);

//bang
fill(82,36,67,60);
rect(178,163,180,100);
fill(137,54,73);
rect(185,155,180,100);

//eyelash
strokeWeight(3);
line(225,289,215,285);
line(330,289,320,285);

//hairpin
strokeWeight(5);
line(390,210,350,240);
strokeWeight(5);
line(390,230,360,253);

}``````

In processing my self-portrait, I created simplified and 2D styled design.
Before starting with this project, I sketched my idea and then illustrated with illustrator so I can see what it would look like. In order to make it more 2D looking, I added some shadow under my front hair and face. Also, I only used 2 toned colors to look more simplified. I had a lot of fun learning and utilizing p5.js geometric elements.

## danakim-Project-01-face

``````//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Self Portrait

function setup() {
createCanvas(400, 400);
background(170, 200, 192);
}

function draw() {
//Background grid stroke properties
stroke(244, 205, 44);
strokeWeight(5);

//Background grid
line(100, 0, 100, 400);
line(200, 0, 200, 400);
line(300, 0, 300, 400);
line(0, 100, 400, 100);
line(0, 200, 400, 200);
line(0, 300, 400, 300);

//Hair
noStroke();
fill(33, 23, 12);
ellipse(216, 147, 105, 71);
ellipse(157, 168, 54, 61);
ellipse(146, 250, 47, 212);
ellipse(250, 250, 52, 200);
ellipse(200, 250, 30, 200);
ellipse(190, 250, 35, 200);
ellipse(175, 250, 42, 205);
ellipse(215, 250, 25, 203);
ellipse(225, 250, 30, 206);

//Face
noStroke();
fill(228, 195, 173);
ellipse(200, 210, 130, 137);

//eyes
fill(265);
ellipse(230, 200, 25, 23);
ellipse(168, 200, 25, 23);

fill(114, 67, 6);
ellipse(234, 200, 16, 18);
ellipse(172, 200, 16, 18);

//eyebrows
noFill();
stroke(33, 23, 12);
strokeWeight(5.0);
strokeJoin(ROUND);
beginShape();
vertex(217, 172);
vertex(243, 165);
vertex(251, 174);
endShape();

line(149, 174, 185, 174);

//Nose
stroke(33, 23, 12);
strokeWeight(1);
line(200, 205, 196, 230);
line(196, 230, 200, 230);

//Lips
noStroke();
fill(227, 157, 143);
triangle(189, 247, 197, 240, 209, 247);
triangle(199, 247, 209, 240, 216, 247);

fill(211, 132, 116);
arc(200, 247, 27, 15, 0, PI, CHORD);

//neck
fill(228, 195, 173);
rect(185, 270, 30, 50);

//body
fill(44, 59, 134);
rect(150 ,320, 100, 20);

fill(90, 100, 149);
quad(160, 340, 240, 340, 235, 400, 165, 400);
}
``````

I can barely draw people by hand let alone coding. However, the coding aspect of the project was not difficult. If anything it was a bit time consuming figuring out coordinates.

## rgroves – project01 – face

``````function setup() {
createCanvas(600, 750);
background(235);
}

function draw() {
angleMode(DEGREES);
strokeWeight(0);

//light hair
fill(250, 230, 150);
beginShape();
vertex(125, 225);
vertex(120,380);
vertex(55, 475);
vertex(55, 590);
vertex(40, 620);
vertex(150, 600);
vertex(175, 625);
vertex(220, 600);
vertex(290, 290);
vertex(125, 225);
endShape();
triangle(360, 630, 410, 350, 510, 550);
triangle(510, 550, 490, 615, 380, 600);

//darkhair
fill(168, 128, 120);
ellipse(350, 254, 450);

//light hair
fill(250, 230, 150);

triangle(150, 500, 175, 300, 280, 500);

//face shape
fill(250 ,235 ,195);
ellipse(378, 242, 345);
//chin
beginShape();
curveVertex(235, 160);
curveVertex(235, 160);
curveVertex(193, 355);
curveVertex(215, 510);
curveVertex(270, 568);
curveVertex(347, 550);
curveVertex(475, 420);
curveVertex(538, 306);
curveVertex(538, 306);
endShape();

//ear
ellipse(450, 425, 150, 70);

//eye1
push();
translate(300,303);
rotate(25);
fill(240,240,230);
ellipse(0, 0, 70, 30);
fill(105, 130, 170);
ellipse(0,-5,40);
fill(250, 220, 195);
arc(0, 0, 70, 70, 180, 360, CHORD);
pop();

//hair
push();
fill(168, 128, 120);
translate(340, 175);
rotate(75);
ellipse(0, 0, 200, 420);
pop();

fill(260, 212, 170)

beginShape();
curveVertex(550, 257);
curveVertex(550, 257);
curveVertex(422, 287);
curveVertex(350, 465);
curveVertex(363, 530);
curveVertex(363, 530);
endShape();

curveTightness(1.5);
beginShape();
curveVertex(367, 464);
curveVertex(367, 464);
curveVertex(338, 467);
curveVertex(330, 465);
curveVertex(320, 460);
curveVertex(316, 478);
curveVertex(315, 480);
curveVertex(308, 478);
curveVertex(304, 473);
curveVertex(274, 478);
curveVertex(306, 487);
curveVertex(334, 505);
curveVertex(350, 520);
curveVertex(350, 520);
endShape();

curveTightness(0);
beginShape();
curveVertex(350, 520);
curveVertex(350, 520);
curveVertex(335, 505);
curveVertex(318, 515);
curveVertex(297, 506);
curveVertex(290, 510);
curveVertex(288, 519);
curveVertex(290, 534);
curveVertex(287, 553);
curveVertex(274, 569);
curveVertex(274, 569);
endShape();

beginShape();
curveVertex(215, 510);
curveVertex(274, 569);
curveVertex(347, 550);
curveVertex(475, 420);
curveVertex(538, 306);
curveVertex(550, 257);
curveVertex(550, 257);
endShape();

//eye1

push();
translate(440, 360);
rotate(25);
fill(240,240,230);
ellipse(0, 0, 70, 30);
fill(95, 120, 150);
ellipse(0,-5,40);
fill(230, 200, 185);
arc(0, 0, 70, 70, 180, 360, CHORD);
pop();
}
``````

Rebecca Groves
Section B

Reflection:
For my portrait, I wanted to maintain elements of my drawing style, which is generally not very geometric. As a compromise, I represented the nose and mouth in as organic a style as I could in this medium, and the rest of the face – the hair, eyes, and ear – are geometric.

## Project-01-face

``````function setup()
{

ellipseMode(CORNER);
createCanvas(300,300);
background(220);

fill(240,227,221);
ellipse(50,25,200,250);

fill(236,223,223);
stroke(71,46,44);
strokeWeight(5);
ellipse(135,10,25,25);
strokeWeight(10);
ellipse(75,40,35,35);
ellipse(215,40,35,35);
ellipse(55,75,35,35);
ellipse(235,75,35,35);
ellipse(105,20,35,35);
ellipse(145,25,35,35);
ellipse(185,20,35,35);
ellipse(115,45,35,35);
ellipse(90,50,35,35);
strokeWeight(7);
ellipse(165,10,25,25);

fill(255);
strokeWeight(1);
stroke(0);
ellipse(90,115,40,20);
ellipse(170,115,40,20);
fill(14,75,49);
ellipse(105,120,10,10);
ellipse(185,120,10,10);

fill(251,223,210);
noStroke();
triangle(150,125,138,190,153,190);
fill(234,205,192);
triangle(150,125,153,190,168,190);

fill(165,60,60);
ellipse(125,215,50,8);
}
``````

## hschung-Project 01

``````//Heidi Chung
//Section A
//hschung@andrew.cmu.edu

function setup() {
createCanvas(600,600);
background(145, 193, 191);

noStroke();

fill(31, 34, 13); //hair
quad(200, 195,  400, 185,  425, 375,  180, 375);

fill(234, 178, 117); //neck
rect(263, 380, 78, 78);

fill(235, 207, 155); //face
ellipse(300, 260, 210, 260);

fill(234, 175, 152); //left blush
ellipse(235, 265, 60, 60,);

fill(234, 175, 152); //right blush
ellipse(365, 265, 60, 60);

fill(61, 44, 23); //left eye
ellipse(250, 240, 24, 22);

fill(61, 44, 23); //right eye
ellipse(350, 240, 24, 22);

fill(255); //mouth
ellipse(width/2, height/2 +10, 60, 60);

fill(235, 207, 155);//eclipse over mouth
rect(width/2 -30, height/2 -15, 60, 30);

fill(234, 178, 117); //nose
triangle(300, 267, 320, 290, 280, 290);

fill(76, 54, 36); //more hair
quad(222, 159,  345, 129,  420, 220,  391, 230);

fill(76, 54, 36); //more hair
quad(371, 398,  391, 228,  421, 219,  433, 340);

fill(76, 54, 36); //more hair
quad(215, 156,  183, 234,  206, 245,  247, 163);

fill(76, 54, 36); //more hair
quad(183, 234,  174, 345,  237, 400,  207, 244);

fill(76, 54, 36); // top part of hair
quad(216, 157,  275, 123,  377, 132,  420, 219);

fill(76, 54, 36);
triangle(183, 235,  207, 149,  275, 122);

}``````

Before I started coding, I made a sketch in Illustrator, so I could keep it simple and cute. Sketching it first helped me ground myself so I wouldn’t be lost immediately trying to code shapes without an image in mind first. It took a lot of time plotting points and getting used to the fashion of “drawing shapes” in this way. My friend helped me save some time; we took a screenshot of some of my existing work and dropped it into a 600×600 Illustrator doc, so I could find the points easily and insert them into my code.

I regret not starting earlier and rushing myself, because I think I would have had more fun if I utilized my time better so I could experiment more. Next time, I’ll manage myself better instead of being afraid to dive in.

Also, I thought I drew my portrait centered but I guess not?? Oops.

## Nayeon_project01_portrait

``````//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-01_Portrait

//Canvas
function setup() {
createCanvas(600, 800);

}

//background
function draw() {
angleMode(DEGREES);
background(20, 120,150); //light blue
if (mouseX < (width / 2)){
background(10, 50, 200); //blue
}

//hair
fill(0);
ellipse((width / 2) + 80, (height / 2) - 50, 300, 300);
push();
rotate(30);
ellipse((width / 2) + 50, 200, 200, 300);
pop();
ellipse(550, 400, 100, 100);

//face
fill(220,180,150);
noStroke();
ellipse(width / 2, height / 2, 300, 400);
ellipse((width / 2) - 20, (height / 2) + 78, 350, 250);

//ears
ellipse(width / 2 + 170, (height / 2) + 50, 150, 150);

//hands
push();
rotate(-3);
ellipse(100, 700, 150, 180);
ellipse(180, 680, 50, 70);

ellipse(400, 700, 150, 180);
ellipse(320, 680, 50, 70);
pop();

//eyes
fill(40, 30, 20);
noStroke();
ellipse((width / 2) + 50, (height / 2), 30, 50);
ellipse((width / 2) - 100, (height / 2), 30, 50);

//mouth
fill(210, 115, 90);
arc((width / 2) - 20, (height / 2) + 80, 150, 200, 0, 180, CHORD);

//teeth
fill(265);
arc((width / 2) - 20, (height / 2) + 80, 150, 50, 0, 180, CHORD);

//blush
fill(225, 125, 100);
ellipse((width / 2) + 100, (height / 2 + 50), 50, 50);
ellipse((width / 2) - 150, (height / 2 + 50), 50, 50);
//front_hair
push();
rotate(-20);
fill(0);
ellipse((width / 2), (height / 2) + 20, 150, 200);
pop();

//crown
push();
rotate(-5);
fill(250, 180, 0);
triangle(120, 130, 150, 280, 300, 280);
triangle(220, 100, 200, 280, 350, 280);
triangle(350, 100, 250, 280, 400, 280);
triangle(450, 130, 300, 280, 450, 280);
ellipse(300, 280, 300, 50);
pop();

fill(40, 180, 250);
ellipse(125, 120, 50, 50);
ellipse(230, 70, 50, 50);
ellipse(360, 60, 50, 50);
ellipse(460, 90, 50, 50);

//diamond
fill(265)
quad(mouseX, mouseY, mouseX +30, mouseY +50, mouseX, mouseY + 100 , mouseX -30, mouseY +50);

}
``````

I struggled a lot to create drawing with code in the beginning since I’m too used to draw with my hand. When I tried to create shapes with code, my brain just couldn’t process in ‘programming’ way.
I even struggled to figure out x, y in script because it is apposite way to I’m used to think.
But after few hours with struggling, I started to enjoy this new way to draw something. It was actually very amusing struggle.