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();
    rotate(radians(20));
    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.

sketch

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

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

	//head triangle
	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);

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

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

	//hair mid section quad
	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.

my-sketch.js

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.

sketch

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

  noFill();

  // Top to bottom gradient
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);
	setGradient(75,120,50,30,c1,c2)

	//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.

sketch

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_project01

//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.

becky – 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();
    

    //shadow
	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.

sketch

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

sketch

//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_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.