Category: Project-01-Face

romi-selfportrait

/* Romi Jin 
Section B 
rsjin@andrew.cmu.edu 
Project-01 */

function setup() {
    createCanvas(500, 1000);
    background(252, 221, 215);
    //background(255, 240, 245);
}

function draw() {

    //right side of hair
    fill(106, 59, 51);
    noStroke();
    beginShape();

    curveVertex(380,219);
    curveVertex(371,200);
    curveVertex(352,172);
    curveVertex(336,153);
    curveVertex(323,141);
    curveVertex(311,136);
    curveVertex(324,128);
    curveVertex(338,119);
    curveVertex(350,102);
    curveVertex(353,105);
    curveVertex(366,118);
    curveVertex(391,157);
    curveVertex(411,195);
    curveVertex(417,213);
    curveVertex(421,229);
    curveVertex(422,247);
    curveVertex(422,261);
    curveVertex(423,283);
    curveVertex(425,309);
    curveVertex(427,331);
    curveVertex(429,349);
    curveVertex(423,368);
    curveVertex(415,387);
    curveVertex(405,399);
    curveVertex(391,413);
    curveVertex(384,418);
    endShape(CLOSE);


     //shirt
    fill(255,255,255);
    stroke(220,220,220);
    strokeWeight(1);
    beginShape();
    vertex(333,493);
    vertex(351,502);
    vertex(367,500);
    vertex(423,504);
    vertex(453,525);
    vertex(500,538);
    vertex(500,793);
    vertex(462,749);
    vertex(468,1000);
    vertex(0,1000);
    vertex(0,561);
    vertex(11,558);
    vertex(333,493);
    endShape(CLOSE);

    //shirt lines
    noFill();
    stroke(220,220,220);
    strokeWeight(1);
    triangle(333, 493, 308, 605, 383, 624);

    noFill();
    stroke(220,220,220);
    strokeWeight(1);
    beginShape();
    vertex(308,605);
    vertex(271,850);
    vertex(286,1000);
    vertex(237,1000);
    vertex(229,852);
    vertex(254,659);
    endShape(CLOSE);

    stroke(220,220,220);
    strokeWeight(1);
    line(199,713,241,758);

    stroke(220,220,220);
    strokeWeight(2);
    line(270,686,267,702);

    noFill();
    stroke(220,220,220);
    strokeWeight(1);
    ellipse(255,886,18,18);

    //neck
    fill(244, 224, 217);
    noStroke();
    beginShape();
    vertex(333,493);
    vertex(308,605);
    vertex(254,659);
    vertex(241,758);
    vertex(199,713);
    vertex(199,490);
    vertex(333,493);
    endShape(CLOSE);

    //neckshadow
    fill(221,205,202);
    noStroke();
    triangle(253,517,211,640,199,490);

    //face shape
    fill(255, 233, 224);
    noStroke();
    ellipse(271, 320, 260, 395);

    //facial features

    //beauty mark
    stroke(139,94,60);
    strokeWeight(4);
    point(200,334);

    //eyebrows
    //left
    fill(68,50,35);
    noStroke();
    beginShape();
    curveVertex(246,233);
    curveVertex(228,230);
    curveVertex(208,229);
    curveVertex(189,231);
    curveVertex(178,238);
    curveVertex(180,247);
    curveVertex(194,246);
    curveVertex(217,246);
    curveVertex(238,247);
    curveVertex(250,245);
    endShape(CLOSE);
    //right
    fill(68,50,35);
    noStroke();
    beginShape();
    curveVertex(317,234);
    curveVertex(338,232);
    curveVertex(356,233);
    curveVertex(376,237);
    curveVertex(387,243);
    curveVertex(391,251);
    curveVertex(393,256);
    curveVertex(386,255);
    curveVertex(371,249);
    curveVertex(355,247);
    curveVertex(335,247);
    curveVertex(320,248);
    curveVertex(312,250);
    curveVertex(308,242);
    endShape(CLOSE);

    //eyes

    //outline
    //left
    fill(255);
    stroke(0);
    strokeWeight(.75)
    beginShape();
    curveVertex(238,295);
    curveVertex(238,295);
    curveVertex(236,291);
    curveVertex(233,287);
    curveVertex(228,283);
    curveVertex(221,280);
    curveVertex(211,279);
    curveVertex(201,279);
    curveVertex(190,282);
    curveVertex(182,286);
    curveVertex(177,289);
    curveVertex(179,292);
    curveVertex(184,299);
    curveVertex(193,303);
    curveVertex(201,305);
    curveVertex(210,306);
    curveVertex(217,304);
    curveVertex(226,301);
    curveVertex(233,299);
    curveVertex(238,295);
    endShape(CLOSE);
    //right
    fill(255);
    stroke(0);
    strokeWeight(.75)
    beginShape();
    curveVertex(312,297);
    curveVertex(312,297);
    curveVertex(319,287);
    curveVertex(330,282);
    curveVertex(343,280);
    curveVertex(354,282);
    curveVertex(363,286);
    curveVertex(370,292);
    curveVertex(373,295);
    curveVertex(367,300);
    curveVertex(359,302);
    curveVertex(351,305);
    curveVertex(344,306);
    curveVertex(333,305);
    curveVertex(327,304);
    curveVertex(320,300);
    endShape(CLOSE);

    //left
    stroke(96,57,19);
    strokeWeight(27);
    point(209,293);

    stroke(0);
    strokeWeight(15);
    point(209,293);

    stroke(255);
    strokeWeight(6);
    point(215,290);

    //right
    stroke(96,57,19);
    strokeWeight(26);
    point(341,293);

    stroke(0);
    strokeWeight(14);
    point(341,293);

    stroke(255);
    strokeWeight(6);
    point(347,290);

    noFill();
    stroke(0);
    strokeWeight(.5);
    beginShape();
    curveVertex(179,281);
    curveVertex(179,281);
    curveVertex(197,274);
    curveVertex(210,273);
    curveVertex(223,276);
    curveVertex(232,282);
    curveVertex(238,288);
    curveVertex(238,288);
    endShape();

    noFill();
    stroke(0);
    strokeWeight(.5);
    beginShape();
    curveVertex(312,289);
    curveVertex(312,289);
    curveVertex(321,281);
    curveVertex(332,277);
    curveVertex(347,276);
    curveVertex(360,279);
    curveVertex(375,290);
    curveVertex(375,290);
    endShape();

    //nose
    noFill();
    stroke(0);
    strokeWeight(1);
    beginShape();
    curveVertex(253,342);
    curveVertex(253,342);
    curveVertex(244,355);
    curveVertex(241,367);
    curveVertex(248,383);
    curveVertex(260,379);
    curveVertex(261,372);
    curveVertex(270,375);
    curveVertex(279,383);
    curveVertex(289,378);
    curveVertex(301,373);
    curveVertex(301,383);
    curveVertex(312,380);
    curveVertex(314,369);
    curveVertex(309,353);
    curveVertex(304,342);
    curveVertex(304,342);
    endShape();

    //lips
    fill(232,163,163);
    noStroke();
    beginShape();
    curveVertex(228,427);
    curveVertex(228,427);
    curveVertex(238,422);
    curveVertex(257,407);
    curveVertex(268,409);
    curveVertex(276,412);
    curveVertex(283,411);
    curveVertex(293,408);
    curveVertex(306,417);
    curveVertex(319,431);
    curveVertex(308,441);
    curveVertex(290,454);
    curveVertex(275,455);
    curveVertex(260,454);
    curveVertex(250,449);
    curveVertex(242,442);
    curveVertex(234,435);
    endShape(CLOSE);

    noFill();
    stroke(183,132,132);
    strokeWeight(1.5);
    beginShape();
    curveVertex(228,427);
    curveVertex(238,427);
    curveVertex(251,425);
    curveVertex(263,426);
    curveVertex(276,428);
    curveVertex(295,427);
    curveVertex(309,431);
    curveVertex(319,431);
    endShape();

    stroke(0);
    strokeWeight(.25);
    line(264,387,261,401);

    stroke(0);
    strokeWeight(.25);
    line(290,389,293,403);

    fill(244,223,220);
    noStroke();
    quad(278,388,269,403,277,408,286,403);

    //hair
    fill(150, 82, 61);
    noStroke();
    beginShape();
    curveVertex(347,79);
    curveVertex(342,74);
    curveVertex(338,68);
    curveVertex(327,61);
    curveVertex(315,57);
    curveVertex(312,57);
    curveVertex(301,54);
    curveVertex(285,54);
    curveVertex(226,71);
    curveVertex(142,137);
    curveVertex(81,249);
    curveVertex(70,315);
    curveVertex(57,368);
    curveVertex(38,427);
    curveVertex(19,499);
    curveVertex(11,563);
    curveVertex(26,671);
    curveVertex(51,729);
    curveVertex(82,825);
    curveVertex(91,848);
    curveVertex(109,887);
    curveVertex(109,823);
    curveVertex(139,850);
    curveVertex(142,890);
    curveVertex(164,861);
    curveVertex(172,814);
    curveVertex(196,846);
    curveVertex(258,868);
    curveVertex(219,828);
    curveVertex(204,793);
    curveVertex(198,751);
    curveVertex(210,648);
    curveVertex(211,544);
    curveVertex(203,507);
    curveVertex(199,490);
    curveVertex(180,380);
    curveVertex(171,320);
    curveVertex(191,230);
    curveVertex(236,163);
    curveVertex(289,138);
    curveVertex(309,138);
    curveVertex(323,125);
    curveVertex(330,132);
    curveVertex(336,127);
    curveVertex(347,119);
    curveVertex(352,110);
    curveVertex(352,108);
    curveVertex(354,91);
    endShape(CLOSE);

}

For this project, I wanted to code a realistic cartoon of my face, using a photo, drawing a simple outline in Illustrator, and extracting coordinates from there to save time of randomly guessing the positions of each component. I also used a light, pastel color palette according to the photo this was based on. It took a lot less time than I had thought it would and was a lot of fun!

sketch

function setup() {
   createCanvas(600, 600);

}

function draw() {
background(255, 214, 89);
//shirt
	//dark blue
	fill(8,27,64);
	strokeWeight(0);
	rect(150, 450, 300, 200, 50);
	//neck
	fill(237,175,130);
	triangle(250,450,350,450,300,500);
	rect(250,425,100,25);
	//collar
	fill(36,45,64);
	triangle(300,500,250,430,230,450);
	triangle(300,500,350,430,370,450);
//hair
	fill(97,62,39);
	ellipse(300,150,300,200);
	ellipse(150,205,50,150);
	ellipse(450,205,50,150);
//head
	fill(237,186,149);
	triangle(300,450,150,400,450,400);
	rect(150,150,300,250);
	ellipse(150,295,50,80);
	ellipse(450,295,59,80);
	//more hair
	fill(97,62,39);
	ellipse(315,150,270,75);
	triangle(150,150,180,150,150,170);
	//eyebrows
	rect(200,215,60,15);
	rect(342,215,60,15);
	//nose
	fill(237,175,130);
	triangle(300,250,280,340,320,340);
	ellipse(300,335,40,40);
	//eyes
	fill(250);
	ellipse(230, 280, 80, 80);
	ellipse(370,280,80,80);
	fill(0);
	ellipse(230,280,30,30);
	ellipse(370,280,30,30);
	fill(237,186,149);
	//rect(200,230,200,15);
	//mouth
	fill(250);
	triangle(230,370,370,370,300,420);

	//mole
	strokeWeight(5);
	fill(98,63,39);
	point(330,447);
	//teeth
	line(260,390,300,390);
	//dimples
	noLoop();
	stroke(237,175,130);
	line(200,360,200,370);
	line(400,360,400,370);
	



}

Creating this self portrait was rather rewarding. I oftentimes struggled keeping track of the coordinates I was using, and I had to reorganize my code multiple times to sort this out. If I had more time, I would like to learn how to animate this portrait, just so that it feels more human and less static.

jkong1-selfie

/* 
Jennifer Kong
Section B
jkong1@andrew.cmu.edu
Project-01-Face
*/

// NOTE: a version of this exact code can be found on openprocessing. 
// https://www.openprocessing.org/sketch/584143
// I made that/the below code when I didn't have my personal laptop with me and needed to save my work somewhere.
// so I promise I'm not plagarising! 
// If needed to prove that code is mine, I can give log-in credentials to the account on openprocessing. 


function setup() {
    createCanvas(600, 800);
    background(255);
    fill(255, 193, 194); // cute pink sphere 
    noStroke();
    ellipse(300,300,500,500);

}

function draw() {
    makeHair();
    makeFace();
    makeEyes();
    makeBrows();
    makeMole();
    makeCowLick();
    makeNose();
    makeHairSweep();
    makeGlasses();
    makeMouth();
}
    
function makeHair() {
    // hair
    stroke(71, 57, 55);
    strokeWeight(150);
    line (250, 250, 173, 500);
    line (340, 255, 440, 475);

}

function makeFace() {
    //face
    noStroke();
    fill(255, 228, 175);
    ellipseMode(CORNER);
    ellipse(400, 347, 28, 40); // ear
    ellipse(179, 287, 223, 203); // top head
    ellipse(179, 204, 233, 229); // bottom head

}

function makeHairSweep() {
    // hair sweep
    fill(71, 57, 55);
    quad(270, 200, 323, 280, 430, 340, 380, 208);

}

function makeBrows () {
    triangle(328, 314, 348, 298, 350, 305); // right brow
    triangle(240, 320, 229, 304, 210, 305); // left brow 

}

function makeCowLick () {
    //shout out to processing.org/tutorials/curves/ for the explanation
    beginShape();
    curveVertex(290, 145); 
    curveVertex(290, 145);
    curveVertex(300, 172);
    curveVertex(299, 200); 
    curveVertex(299, 200); 
    endShape();

}

function makeNose () {
    // nose 
    fill (224, 180, 168);
    triangle(271, 399, 254, 414, 276, 422); 

}

function makeEyes () {
    // eyes
    fill(71, 57, 55);
    ellipse(206, 338, 28, 45);
    ellipse(325, 337, 34, 46);

}

function makeMole () {
    // mole
    noStroke();
    fill(71, 57, 55);
    ellipse(191, 388, 6, 6);

}

function makeGlasses () {
    //glasses
    fill(255, 255, 255, 100);
    rect(300, 355, 92, 57, 20);
    rect(164, 355, 92, 57, 20);
    strokeWeight(5);
    stroke(71, 57, 55);
    line(253, 370, 300, 370);
    line(390, 360, 415, 345); 

}

function makeMouth () {
    // mouth
    strokeWeight(3);
    line(256, 449, 278, 440);
    line(278, 440, 305, 450);  
    
}

Drawing in photoshop with plotted shapes.

The process was fun. I drew a sketch and uploaded to photoshop to find the exact coordinates of the the drawn features. My coding is a bit rusty but I still learned something new!