Category: Project-01-Face

Kimberlyn Cho – Project-01-Face

portraitDownload
//Kimberlyn Cho
//15-104 C
//ycho2@andrew.cmu.edu
//Assignment-01

function setup() {
	createCanvas(600, 600);
    background("white");
}

function draw() {
    //background
    noStroke();
    fill(255, 153, 102);
    rect(0, 0, 150, 600);
    fill(255, 136, 77);
    rect(150, 0, 150, 600);
    fill(255, 119, 51);
    rect(300, 0, 150, 600);
    fill(255, 102, 26);
    rect(450, 0, 150, 600);
    //body
    fill("pink");
    ellipse(300, 590, 330, 285);
    //neck
    fill(242, 192, 131);
    rect(261, 416, 80, 55);
    ellipse(300, 470, 80, 50);
    //face
    fill(252, 204, 156);
    beginShape();
    vertex(300, 440);
    vertex(390, 390);
    vertex(390, 250);
    vertex(300, 200);
    vertex(210, 250);
    vertex(210, 390);
    endShape();
    //ears
    ellipse(200, 340, 30, 40);
    ellipse(400, 340, 30, 40);
    //hair
    fill(179, 89, 0);
    noStroke();
    arc(270, 300, 150, 200, PI, 0 - QUARTER_PI, CHORD);
    arc(330, 300, 150, 200, PI + QUARTER_PI, 0, CHORD);
    //bun
    ellipse(300, 190, 120, 120);
	//eyes
    fill("white");
    ellipse(255, 325, 40, 22);
    ellipse(345, 325, 40, 22);
    fill("brown");
    ellipse(255, 325, 20, 20);
    ellipse(345, 325, 20, 20);
    fill("black");
    ellipse(255, 325, 13, 13);
    ellipse(345, 325, 13, 13);
    stroke("black");
    noFill();
    arc(255, 320, 40, 15, PI, 0, OPEN);
    arc(345, 320, 40, 15, PI, 0, OPEN);
    //eyebrows
    noStroke();
    fill(179, 89, 0);
    rect(235, 295, 45, 6);
    rect(320, 295, 45, 6);
    triangle(235, 295, 220, 305, 235, 301);
    triangle(365, 295, 380, 305, 365, 301);
    //nose
    stroke(228, 179, 129);
    fill(252, 204, 156);
    arc(300, 370, 20, 8, 0, PI, OPEN);
    line(290, 310, 293, 360);
    line(310, 310, 307, 360);
    //mouth
    noStroke();
    fill(255, 77, 77);
    arc(300, 390, 50, 30, 0, PI, CHORD);

}

For my self portrait I mainly focused on my most distinct facial features and attributes such as a big bun and a square jawline. I experimented with a variety of shapes and functions to allow for more flexibility in my drawing.

Julia Nishizaki – Project-01-Face

When starting this project, I knew that I wanted to capture both my facial features as well as my personality, and to express a playful and friendly tone. However, as I started to sketch out some initial ideas, I realized that I really had to simplify my concept and make it more geometric, as I didn’t know how to create weird or irregular organic shapes. While I had some trouble trying to figure out p5.js and sublime, this project really helped me to learn some of the basics, and to explore what I could do.

julia_selfportrait

//Julia Nishizaki
//jnishiza@andrew.cmu.edu
//Section B, Project 01 Self-Portrait

function setup() {
    createCanvas(600,600);
    background(251,177,97);
    rectMode(CENTER);
    noStroke();

    //shirt
    c = color('rgb(34,40,92)');
    fill(c);
    rect(375,415,110,50,20,25,0,0);
    c = color('rgb(25,32,66)');
    fill(c);
    arc(340,600,200,415,PI,PI + HALF_PI);
    c = color('rgb(34,40,92)');
    fill(c);
    arc(340,600,370,415,PI + HALF_PI,0);
    arc(350,600,50,255,PI,PI + HALF_PI);

    //hair behind face
    fill('black');
    circle(280,195,190);

    //dark grey, side shave
    c=color('rgb(49,46,47)');
    fill(c);
    rect(350,170,250,180,55,80,0,0);

    //skin
    c = color('rgb(248,212,178)');
    fill(c);
    circle(455,275,90);
    circle(460,305,50);
    square(370,380,80);
    triangle(330,420,410,420,340,480);
    arc(350,275,250,255,0,PI,PIE);
    rect(340,210,230,150,0,80,0,0);

    //sideburns
    c=color('rgb(49,46,47)');
    fill(c);
    rect(465,220,20,120,0,0,10,5);

    //hair
    fill('black');   
    arc(340,115,110,110,PI,0,PIE);
    arc(285,150,175,175,HALF_PI + QUARTER_PI,PI + HALF_PI + QUARTER_PI,PIE);
    arc(340,81,130,130,0,PI,PIE);
    arc(280,110,130,130,0,PI,PIE);

    //highlight
    noFill();
    stroke('rgb(215,138,132)');
    strokeWeight(10);
    arc(285,150,175,175,HALF_PI + QUARTER_PI,PI + HALF_PI + QUARTER_PI,OPEN);
    arc(340,81,130,130,0 + QUARTER_PI,HALF_PI + QUARTER_PI,OPEN);

    //cheek
    noStroke();
    c = color('rgb(247,204,173)');
    fill(c);
    circle(405,300,85);

    //glasses
    noFill();
    stroke('rgb(178,79,74)');
    strokeWeight(10);
    strokeCap(ROUND);
    rect(385,255,90,60,15,15,15,15);
    rect(260,255,90,60,15,15,15,15);

    //nose
    stroke('rgb(232,183,141)');
    strokeWeight(10);
    c = color('rgb(248,212,178)');
    fill(c);
    bezier(305,210,355,260,250,285,320,310);

    //glasses bridge
    stroke('rgb(178,79,74)');
    strokeWeight(8);
    line(305,245,340,245);

    //eyes and eyebrows
    stroke('black');
    strokeWeight(15);
    line(350,210,420,210);
    line(220,210,290,200);
    noStroke();
    fill('black');
    circle(385,240,15);
    circle(275,240,15);

    //mouth
    c = color('rgb(215,138,132)');
    fill(c);
    arc(320,330,60,60,0,PI,PIE);

    //earring
    c = color('rgb(69,89,175)');
    fill(c);
    circle(472,315,5);
}

Stefanie Suk- Project-01-Face

For this project, I tried to incorporate all the elements I think represents myself. The blue t-shirt, hairpin, intense face blush, and pink lipstick are what I wear the most often these days. I experimented using different shapes, colors, and sizes to create all these elements of myself into the self portrait.

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Self Portrait Project

function setup() {
    createCanvas(600, 600);
    background(220);
}

function draw() {
    fill(255, 111, 0);
    noStroke();
    rect(0, 0, 600, 600); // background 
    fill(70, 27, 9);
    noStroke();
    ellipse(312, 300, 480, 530); //hair circle
    fill(70, 27, 9);
    noStroke();
    rect(72, 300, 480, 300); // hair rectangle
    fill(255, 233, 201);
    noStroke();
    ellipse(312, 281, 323.2, 398.9); // face
    fill(70, 27, 9);
    noStroke();
    rect(167, 108, 296, 59); // bangs rectangle
    fill(70, 27, 9);
    noStroke();
    ellipse(313, 103.5, 212, 99); // bangs circle
    fill(255);
    noStroke();
    ellipse(245, 253.7, 92.6, 92.6); // left eye
    fill(255);
    noStroke();
    ellipse(375, 253.7, 92.6, 92.6); // right eye
    fill(0);
    noStroke();
    ellipse(245, 280, 34.3, 34.3); // left eye black
    fill(0);
    noStroke();
    ellipse(375, 280, 34.3, 34.3);
    fill(70, 27, 9);
    noStroke();
    rect(200, 180, 83.2, 10); // left eyebrow
    fill(70, 27, 9);
    noStroke();
    rect(331, 180, 83.2, 10); // right eyebrow
    stroke(0);
    line(296.6, 291.6, 270.2, 349.8);
    stroke(0);
    line(270.2, 349.8, 308.3, 359.9); // nose
    fill(255, 77, 135);
    noStroke();
    arc(306, 395, 108, 50, 0, PI, CHORD); // lips
    fill(255, 233, 201);
    noStroke();
    rect(264.7, 457.6, 91.3, 36.5); //neck
    fill(0, 0, 255);
    noStroke();
    ellipse(312, 620, 408, 260, PI, 0, CHORD); // body
    fill(255, 233, 201);
    noStroke();
    ellipse(310.5, 497, 92, 54); // neck2
    fill(0, 0, 255);
    noStroke();
    ellipse(127.4, 114.1, 42.4, 42.4); // left hairpin
    fill(0, 0, 255);
    noStroke();
    ellipse(162.4, 135.7, 42.4, 42.4); // right hairpin
    fill(255, 233, 201);
    noStroke();
    ellipse(150.5, 290.1, 67, 94); // left ear
    fill(255, 233, 201);
    noStroke();
    ellipse(470.5, 290.5, 67, 94); // right ear
    fill(0, 0, 255);
    noStroke();
    ellipse(146, 353, 8, 66); // left earring
    fill(0, 0, 255);
    noStroke();
    ellipse(472.5, 353, 8, 66); // right earring
    fill(255, 202, 201);
    noStroke();
    ellipse(207.5, 346, 47, 26); // left blush
    fill(255, 202, 201);
    noStroke();
    ellipse(395.5, 346, 47, 26); // left blush
}

Yoshi Torralva-Project-01-Face

When approaching this project, I wanted to create my self-portrait that was angular with similarly toned hues. Using mostly quadrilaterals, I needed to make sure points lined up with each other to create a unified facial structure. Additionally, I added mouse tracking to a square in the background to add an extra element of depth.

sketch

//Yoshi Torralva
//Section E
//yrt@andrew.cmu.edu
//Project-01
function setup() {
    createCanvas(600,600);
}
function draw() {
    background(249,33,33);
//background with mouse tracking for added depth
    fill(234,24,24);
    rect(mouseX,mouseY,500,500);
//shirt
    fill(51,3,14);
    noStroke();
    quad(122,517,374,408,374,600,91,600);
    quad(374,408,507,432,579,600,292,600);
//right ear
    fill(160,2,18);
    noStroke();
    quad(384,267,392,277,377,318,340,326);
//hair behind ellipse
    fill(114,7,18);
    noStroke();
    ellipse(269,172,112,112);
//side hair
    fill(114,7,18);
    noStroke();
    quad(200,194,225,177,218,244,197,274);
//hair
    fill(114,7,18);
    noStroke();
    ellipse(290,163,112,112);
    ellipse(330,224,125,174);
//neck shadow
    fill(89,4,20);
    noStroke();
    quad(224,363,360,314,350,385,237,433);
//head
    fill(191,16,25);
    noStroke();
    quad(256,322,350,331,326,362,274,368);
    quad(207,346,257,322,274,368,224,363);
    quad(207,241,257,323,207,346);
    quad(197,273,207,241,207,346,199,323);
    quad(225,273,297,283,256,322);
    quad(250,323,353,227,357,270,324,329);
    quad(305,359,357,270,370,292,350,331);
//ellipse for head
    fill(191,16,25);
    noStroke();
    ellipse(281,229,146,135);
//neck
    fill(191,16,25);
    noStroke();
    quad(254,390,334,371,374,408,220,477);
    quad(334,371,357,328,351,387);
    quad(219,477,374,407,345,459,269,483);
//hair in front of head
    fill(114,7,18);
    noStroke();
    ellipse(324,172,106,76);
//nose shadow
    fill(160,2,8);
    noStroke();
    quad(276,237,283,245,286,279,278,269);
    quad(261,241,263,238,254,266,246,276);
//sunglasses
    fill(114,7,18)
    noStroke();
    quad(206,225,264,233,250,268,203,260);
    quad(279,235,338,240,334,275,284,273);
    quad(240,230,361,242,360,249,239,237);
//eyebrows
    fill(114,7,18)
    noStroke();
    quad(221,213,236,210,231,219,214,223);
    quad(236,210,261,217,260,226,231,219);
    quad(286,220,326,218,327,227,289,229);
    quad(326,218,342,233,327,227);
//nostrils
    fill(160,2,8);
    noStroke();
    ellipse(254,280,8,4);
    ellipse(274,282,8,4);
//upper lip
    fill(160,2,8)
    noStroke();
    quad(243,309,257,306,257,313,233,316);
    quad(257,306,260,307,260,314,257,313);
    quad(260,307,262,306,263,313,260,314);
    quad(262,306,279,310,288,319,263,313);
//lower lip
    fill(135,3,22);
    noStroke();
    quad(233,316,257,313,256,321,245,320);
    quad(257,313,260,314,259,321,256,321);
    quad(260,314,263,313,262,321,259,321);
    quad(263,313,288,319,262,321);
}

Sammie Kim_Project01_Face


sketch-Sammie

//Sammie Kim
//section D
//sammiek@andrew.cmu.edu
//Self Portrait

function setup() {
  createCanvas(600, 600);
  background(185,209,158);

//body
  noStroke();
  fill(171 ,220,237);
  ellipse(320,560,265,270);
//neck
  fill(204 ,178,151);
  rect(287,395,64,47);
  ellipse(319,437,64,37);
//leftear
  fill(204 ,178,151);
  arc(225,313,40,55,1/2*PI,PI+1/2*PI,CHORD);
//ponytail
  fill(130,101,56);
  ellipse(400,320,80,240);
//face
  noStroke();
  fill(239 ,224,199);
  ellipse(320,294,202,235);
//blush
  fill(237,192,230);
  ellipse(263,324,24,14);
  ellipse(364,325,24,14);
//right ear
  fill(204 ,178,151);
  arc(414,313,40,55,PI+1/2*PI,1/2*PI,CHORD);
//side hair
  fill(130,101,56);
  rect(408,230,15,124);
//Eyes
  fill(130,101,56);
  ellipse(354,300,18,13); //right eye
  ellipse(273,299,18,13);
  stroke(130,101,56);
  line(360,296,370,293);
  line(264,296,254,293);
  bezier(360,275,363,270,365,275);
//nose
  fill(130,101,56);
  arc(312,330,20,20,PI,2*PI);
//mouth
  fill(161,101,64);
  arc(313, 360, 60, 40, 0, PI, CHORD);
//arms
  noFill();
  stroke(130,101,56);
  stroke(100);
  strokeWeight(1);
  bezier(260, 290, 270, 280, 275, 280, 285, 290);
  bezier(343, 290, 355, 280, 360, 280, 368, 290);
  bezier(405, 525, 410, 535, 415, 567, 408, 600);
  bezier(240, 525, 235, 542, 231, 567, 238, 600);
//Front Hair
  fill(130,101,56);
  angleMode(DEGREES);
  rotate(20);
  ellipse(395,90,175,82);
  rotate(6);
  ellipse(330,110,60,115);
}

This self portrait assignment allowed me to be more experimental with coding, and compile various shapes to create my face. As I had a hard time figuring out curved shapes, this was a good practice to recall my basic geometry knowledge. 

Sean Leo – Project_01

sleo-selfportrait

/*Sean B. Leo
Section C
sleo@andrew.cmu.edu
Project_01*/
function setup() {
    createCanvas(600, 600);
  }
  function draw() {
    background(225);
    noStroke();
    //skin
    fill(222, 197, 165);
    rect(200, 150, 200, 300);
    quad(200, 150, 200, 450, 178, 400, 150, 200);
    quad(400, 150, 450, 200, 415, 440, 400, 400);
    //hair
    fill(83, 47, 22);
    quad(150, 150, 350, 100, 450, 150, 350, 175);
    rect(150, 210, 10, 80);
    rect(440, 210, 10, 80);
    triangle(200, 150, 150, 250, 130, 175);
    triangle(400, 150, 470, 170, 450, 250);
    //beard
    quad(150, 249, 200, 375, 250, 470, 160, 430);
    quad(450, 249, 440, 430, 350, 470, 400, 375);
    quad(200, 400, 270, 450, 270, 500, 200, 460);
    quad(400, 400, 400, 460, 320, 500, 320, 450);
    rect(270, 450, 50, 50); 
    //musatche
    quad(200, 420, 270, 390, 280, 395, 300, 405);  
    quad(320, 390, 330, 395, 400, 420, 300, 405); 
   
    
  }

Thinking about drawing through coordinates was challenging as well as getting used to the grid orientation. I believe it’ll just take some getting used too and practice.

*not sure why my height is getting cropped off…

Lanna Lang- Project 01-Face

sketchP1 – lanna

function setup() {
    createCanvas(350, 420);
    background(200, 200, 225);
    
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(50);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('SHH KEEP', 170, 45);
    
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(80);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('IT A', 170, 110);
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(80);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('SECRET', 170, 175);
}

function draw() {
/* BLUSH */
    stroke(255, 200, 200);
    fill(255, 200, 200);
    circle(130, 230, 20);

/* FACE */
    strokeWeight(4);
    stroke(51);
    noFill();
    ellipse(175, 230, 130, 130);

/* NOSE */
    strokeWeight(4);
    stroke(51);
    arc(160, 230, 20, 20, 0, PI + QUARTER_PI, TWO_PI);

/*BODY */
    stroke(51);
    line(135, 285, 100, 420);
    line(210, 287, 250, 420);

/* MOUTH */
    strokeWeight(4);
    stroke(51);
    noFill();
    arc(180, 250, 40, 40, 0, HALF_PI);

/* LEFT EYE */
    line(135, 205, 148, 205);

/* RIGHT EYE */  
    fill(0);
    circle(190, 205, 10);

/* ARM */
    strokeWeight(6);
    line(117, 350, 70, 280);
    line(70, 280, 90, 240);
    line(90, 240, 103, 223);
    line(90, 245, 130, 243);
    line(92, 240, 125, 238);

   
}

I wanted to make my self-portrait funny and light-hearted so I recreated a meme with this project. The process wasn’t that difficult as I decided to stick with basic shapes and lines. Overall, this was a great experience for me to familiarize myself with basic coding and using Sublime.

William-Su-Project-01

William Su – Project – 01

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Assignment-01-b



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

function draw() {

	let skin = color('#FFD7AD');
	let w = color(255, 255, 255);
	let b = color(0, 0, 0);
	let g = color(100, 100, 100);
	let br = color('#654321');

	fill(w);
	ellipse(300, 600, 400, 500);

	fill(skin);
	ellipse(300, 300, 200, 250);

	fill(w);
	ellipse(260, 280, 40, 25);

	fill(w);
	ellipse(340, 280, 40, 25);

	fill(br);
	ellipse(340, 280, 20, 20);

	fill(b);
	ellipse(340, 280, 10, 10);

	fill(br);
	ellipse(260, 280, 20, 20);

	fill(b);
	ellipse(260, 280, 10, 10);

	fill(g);
	beginShape();
	vertex(200,280);
	vertex(220,190);
	vertex(260,190);
	endShape();

	beginShape();
	vertex(400,270);
	vertex(380,220);
	vertex(320,190);
	endShape();

	fill(b);
	beginShape();
	vertex(380,220);
	vertex(360,190);
	vertex(340,170);
	vertex(210,160);
	vertex(220,170);
	vertex(210,180);
	vertex(220,190);
	vertex(205,200);
	vertex(305,210);
	endShape();
}

With this project, I utilized ellipses and custom polygons. I set a couple variables for the colors to make it easier for myself to set fills.

YouieCho-Project-01-Face

sketch

//Youie Cho minyounc Section E
function setup() {
    createCanvas(600, 600);
    background(255, 149, 0);
    //hair
    fill(0);
    bezier(120, 250, 116, 150, 150, 100, 218, 90);
    bezier(218, 90, 250, 20, 465, 30, 480, 250);
    rect(120, 250, 360, 300);
    triangle(120, 250, 218, 90, 480, 250);
    //neck
    noStroke();
    fill(245, 214, 179);
    rect(220, 300, 160, 300);
    //ears
    ellipse(170, 275, 40, 80);
    ellipse(430, 275, 40, 80);
    //face
    fill(255, 231, 204);
    bezier(165, 220, 170, 500, 430, 500, 435, 220);
    bezier(165, 220, 180, 35, 400, 120, 435, 220);
    //nose
    fill(245, 214, 179);
    quad(290, 230, 310, 230, 330, 300, 275, 300);
    bezier(275, 300, 290, 315, 315, 315, 330, 300);
    //under eyes and white
    fill(255);
    bezier(205, 240, 218, 250, 250, 250, 260, 240);
    bezier(340, 240, 350, 250, 382, 250, 395, 240);
    stroke(0);
    strokeWeight(2);
    fill(255);
    bezier(202, 240, 218, 220, 250, 220, 260, 240);
    bezier(340, 240, 350, 220, 382, 220, 397, 240);
    //pupils
    fill(20, 27, 8);
    noStroke();
    ellipse(235, 235, 23, 22);
    ellipse(365, 235, 23, 22);
    //eyes
    stroke(0);
    strokeWeight(2);
    noFill();
    bezier(202, 240, 218, 220, 250, 220, 260, 240);
    bezier(340, 240, 350, 220, 382, 220, 397, 240);
    //eyebrows
    noStroke();
    fill(71, 39, 32);
    quad(204, 205, 265, 205, 265, 211, 195, 211);
    quad(334, 205, 393, 205, 402, 211, 334, 211);
    //eyelids
    noFill();
    stroke(100);
    strokeWeight(1);
    bezier(200, 236, 218, 217, 250, 217, 261, 237);
    bezier(338, 238, 350, 217, 382, 217, 400, 236);
    //mouth
    noStroke();
    fill(186, 64, 50);
    bezier(250, 340, 270, 375, 330, 375, 350, 340);
    //clothes
    fill(108, 227, 102);
    arc(300, 530, 250, 250, -QUARTER_PI, PI + QUARTER_PI);
    fill(88, 180, 81);
    rect(50, 550, 500, 50);
    quad(50, 550, 180, 500, 420, 500, 550, 550);
}

It was very fun to be able to draw with code for the first time. There were some trials and errors, but I could eventually figure it out with the reference.

CJ Walsh Portrait – Project 01

sketch

function setup() {
    createCanvas(600, 600);
    background('#A596E2');
    noStroke ();
    fill ('#9FFFF5');
    rect(0, 286, 600, 162.98);

    fill ('#E5CFC3');
    rect (259, 371, 80.231, 66.118);
    ellipse (300, 284.5, 198.281, 220.094);
    ellipse (300, 260, 192.479, 181.644);
    ellipse (195, 290, 40.059, 54.693);
    ellipse (404, 290, 40.059, 54.693);
    fill ('#6F5C40');
    ellipse (259, 269, 23.682, 23.682);
    ellipse (336, 269, 23.682, 23.682);
    ellipse (210, 252, 43.217, 43.217);
    ellipse (389, 252, 43.217, 43.217);
    ellipse (218, 216.5, 53.026, 53.026);
	ellipse (380, 216.5, 53.026, 53.026);
	ellipse (241, 194, 57.097, 57.097);
	ellipse (358, 194, 57.097, 57.097);
	ellipse (282, 181, 74.301, 74.301);
	ellipse (317, 181, 74.301, 74.301);
	rect (247, 244, 27.915, 7.562);
	rect (322, 244, 27.915, 7.562);
	fill ('#D0BAAB');
	arc(300, 317, 170.641, 145.641, 0, PI, CHORD);
	fill ('#a3917d');
	arc(300, 327, 105.331, 105.331, 0, PI, CHORD);
	fill ('#D6BFAE');
	ellipse (300, 366, 45.802, 23.332);
	fill ('white');
	rect (256, 327, 88.326, 9.965);
	fill ('#C1B4AA');
	ellipse (300, 301, 28.596, 12.596);
	fill ('#94E09A');
	ellipse (300, 498, 218.357, 170.905);
	rect (192, 500, 218.569, 132.986);
}

This was a super fun image to make. I used Illustrator to sketch the shapes I wanted to use and plot the coordinates so I could translate that into the code I wanted. The most difficult part was figuring out how to create and place arcs, but I eventually worked it out.