Category: Project-01-Face

sketch

/* 
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(400, 450);
    background(202, 219, 180);
}

function draw() {

    noStroke();
    //hair
    fill(77,47,23);
    ellipse(200, 200, 281, 310);
	
    //face
    fill(222,172,115);
    ellipse(200, 245, 253, 253);
    //EARS
    arc(80, 240, 60, 70, HALF_PI, PI + HALF_PI);
    arc(320, 240, 60, 70, PI + HALF_PI, HALF_PI);

    fill(161,114,50);
    arc(78, 240, 35, 45, HALF_PI, PI + HALF_PI);
    arc(322, 240, 35, 45, PI + HALF_PI, HALF_PI);

    ellipse(120, 275, 8, 8);


    //eyebrows
    fill(77,47,23);
    rect(100,190,66,5);
    rect(234,190,66,5);

    //eyes
    fill(255,255,255);
    ellipse(130, 225, 67, 30);
    ellipse(270, 225, 67, 30);

    fill(63,69,31);
    ellipse(138, 223, 25, 25);
    ellipse(278, 223, 25, 25);

    fill(0,0,0);
    ellipse(138, 223, 15, 15);
    ellipse(278, 223, 15, 15);

    fill(255,255,255);
    ellipse(144, 220, 5, 5);
    ellipse(284, 220, 5, 5);

    //glasses
    noFill();
    stroke(0,0,0);
    strokeWeight(3);
    rect(75, 200, 100, 60, 25);
    rect(225, 200, 100, 60, 25);
    line(175, 230, 225, 230);

    arc(130, 225, 67, 30, PI, 0);
    arc(270, 225, 67, 30, PI, 0);

    noStroke();

    //nose
    fill(161,114,50);
    ellipse(200, 278, 35, 35);

    fill(222,172,115);
    ellipse(200, 270, 35, 35);

    //lips
    fill(153,24,97);
    arc(200, 318, 50, 40, 0, PI);

    fill(92,13,58);
    arc(188, 318, 26, 20, PI, 0);
    arc(212, 318, 26, 20, PI, 0);

    //more hair
    fill(77,47,23);
    arc(319, 100, 284, 208, HALF_PI, PI, CHORD);
    arc(334, 80, 284, 208, HALF_PI, PI, CHORD);




    


}

This was fun, and took me less time to figure out than I thought it would! I found it difficult to arrange everything just by guessing random positions, so I did a quick sketch on Illustrator and then pulled the coordinates from there.

Project 01 — Face

/*
Jenny Hu
Section E
jjh1@andrew.cmu.edu
Assignment-01
*/

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

function draw() {
    background(255,245,242);
    noStroke();


//neck
    fill(250, 235, 220);
    rect(294, 370, 52, 60);
//neck shadow
    fill(235, 215, 207);
    rect(346,370, 12, 60);




//shirt
    fill(150, 157, 172);
    rect(192, 410, 138, 195, 100,0,0,0); //(x,y,w,h,topl eft, top right, bottom right, bottome left)
//shirt shadow
    fill(87, 96, 111);
    rect(330, 410, 138, 195, 0, 100, 0, 0);
//shirtsleeve
    fill(150,157,172);
    rect(61, 424, 71, 144, 100);
//shirt button
    fill(250);
    ellipse(330, 470, 20, 20);
    ellipse(330, 530, 20, 20);



//palm & thumb
    fill(250, 235, 220);
    rect(61, 269, 78, 132, 100);
    rect(130, 320, 30, 50, 100);
//fingers
    fill(255,245,242);
    rect(75, 260, 10, 50, 100);
    rect(94, 260, 10, 45, 100);
    rect(115, 260, 10, 50, 100);





//hair
    fill(87);
    rect(178, 177, 62, 328, 0, 0, 0, 20);
    rect(402, 177, 62, 328, 0, 0, 20, 0);
    rect(178, 115, 286, 62, 100, 100, 0, 0);
    ellipse(323, 90, 80, 80);





//face base & ears
    fill(250, 235, 220);
    rect(197, 177, 253, 200, 0, 0, 100, 100);
    rect(162, 218, 47, 63, 100);
    rect(445, 218, 47, 63, 100);




//hair bangs
    fill(87);
    rect(370, 140, 85, 70, 0, 0, 0, 100);




//mouth
    noFill();
    stroke(87);
    strokeWeight(9);
    ellipse(320, 320, 40, 40);


    noStroke();    
    fill(250,235,220);
    rect(286, 280, 80, 45);




//nose
    fill(235, 215, 207);
    rect(307, 251, 25, 50, 100);




//blush
    fill(255, 225, 212);
    ellipse(229, 278, 55, 55);
    ellipse(422, 278, 55, 55);




//earrings
    fill(240, 190, 97);
    rect(161, 230, 10, 5, 100);
    rect(161, 245, 10, 5, 100);
    ellipse(185, 272, 10, 10);
    ellipse(466, 272, 10, 10);




//eyes
    //whites
    fill(255);
    rect(244, 230, 37, 25, 0, 0, 100, 100);
    rect(364, 230, 37, 25, 0, 0, 100, 100);

    //blacks
    fill(0);
    ellipse(262, 236, 25, 25);
    ellipse(383, 236, 25, 25);
    rect(244, 224, 37, 7, 0, 100, 0, 0);
    rect(364, 224, 37, 7, 0, 100, 0, 0);
    rect(244, 218, 6, 8);
    rect(254, 218, 6, 8);
    rect(264, 218, 6, 8);
    rect(364, 218, 6, 8);
    rect(374, 218, 6, 8);
    rect(384, 218, 6, 8);

    //glasses
    noFill();
    stroke(133, 80, 50);
    strokeWeight(12);
    ellipse(257, 239, 100, 100);
    ellipse(383, 239, 100, 100);





    noLoop();
}

Fun stuff! In my process, I found visualizing in the sketch file a little slow for iterating graphical ideas. So instead, I went to work in a vector-program (sketch) to play with colors and shapes that stuck to the same primitive ones we’ve been using in class before. This allowed me to quickly plan my elements and push them in the program.

Kevin’s Face

// Kevin Thies
// Section C
// kthies@andrew.cmu.edu
// Project-01
function setup() {
  // put setup code here
  createCanvas(500,500);
}

function draw() {
  // put drawing code here
  background (102,140,93);
  // hat
    // all white back part
  stroke(255);
  fill(255);
  ellipse(250,100,300,150);
    // little bit of center grey
  fill(75);
  ellipse(250,100,250,150);
    //hiding the bottom half of the previous ones
  fill(102,140,93);
  noStroke();
  rect(10,100,490,300);
    //rounding out the bottom
  stroke(255);
  fill(255);
  ellipse(250,100,300,10);
    // hat lip
      // Underside
  stroke(255);
  fill(255);
  ellipse(250,110,280,50);
      // Lines
  stroke(75);
  strokeWeight(6);
  fill(0);
  quad(200,90,150,125);
  quad(175,90,125,122);
      // outline
  stroke(255);
  strokeWeight(6);
  fill(0,0,0,0);
  ellipse(250,110,280,50);

  // glasses
  stroke(120);
  strokeWeight(6);
  fill(0,0,0,0);
  rect(135,160,100,50,10,10);
  rect(265,160,100,50,10,10);
  rect(235,180,30,1);
  //beard
  noStroke();
  fill(130,103,64);
      // sideburns
  rect(95,180,15,100);
  rect(390,180,15,100);
      // chin bit
  quad(95,260,95,295,180,315,180,280);
  quad(405,260,405,295,320,315,320,280);
  quad(250,315,250,330,180,315,180,290);
  quad(250,315,250,330,320,315,320,290);
      // mustache
  quad(250,260,250,275,200,290,200,275);
  quad(250,260,250,275,300,290,300,275);

}

When I think of myself, I usually think about my glasses, my hair, and my hat. I really wanted to capture those as much as I could, giving attention to the fillet of the frames and the way the beard and mustache don’t quite connect. The hat’s weird but I wasn’t sure of a better way to do it. All in all, I like this stylized me.

sketch

function setup() {
    createCanvas(600, 600);
    noStroke();
    background(150,160,190);
}

function draw() {
    //head
    fill(255,224,189);
    rect(225, 225, 140, 200, 45, 45, 90, 90);

    //ears
    rect(210, 285, 90, 60, 10, 180, 10, 90);

    //glasses
    noFill();
    stroke(90);
    strokeWeight(3);
    rect(235, 285, 67, 55, 20, 20, 90, 90);
    rect(318, 285, 60, 55, 20, 20, 90, 90);
    arc(310, 310, 16, 15, PI, 0);

    //mouth
    strokeWeight(2);
    ellipse(300, 375, 20, 20);

    //nose
    fill(255,180,170);
    arc(310, 345, 20, 17, PI, 0);

    //hair
    fill(75,49,52);
    noStroke();
    rect(225, 250, 10, 70);
    triangle(225, 250, 235, 250, 240, 230);
    rect(235, 220, 140, 40, 20, 20, 400, 0);

    //eyes
    rect(280, 315, 10, 10, 3);
    rect(330, 315, 10, 10, 3);

    noStroke();
}

I started with the fact that my face is very close to a rectangle, just barely rounded at the edges. From there, I used my most noticeable features (my big glasses and big ears) to set my face and supported them with small eyes, a small nose, and a small mouth. The perspective was a mistake that I decided I liked, so I made my final product in perspective.

sketch

function setup() {
createCanvas(300, 300);
background(200);
ellipse(150, 150, 100, 70);
}

function draw() {
}

sketch

function setup() {
	createCanvas(300, 300);
	background(200);
	ellipse(150, 150, 100, 70);
}

function draw() {

    }

sketch

function setup() {
    createCanvas(200, 20);
    background(220);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
}

sketch

function setup() {
    createCanvas(300, 300);
    background(200);
    ellipse(150, 150, 100, 70);
}

function draw() {
}

sketch

function setup() {
    createCanvas(300, 300);
    background(200);
    ellipse(150, 150, 100, 70);
}

function draw() {
}

sketch

//Han Yu
//section D
//hyu1@andrew.cmu.edu
//Project 01 Face

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

function draw() {
	noStroke();
	fill(99,189,214);
	ellipse(300,300,550,550);
	//hair
	noStroke();
	fill(64,35,19);
	ellipse(282,275,235,300);
	ellipse(308,280,235,300);
	quad(380,270,190,270,150,530,450,530);

	//face
	noStroke();
	fill(253,205,174);
	ellipse(300,285,200,255);

	//hair
	noStroke();
	fill(64,35,19);
	ellipse(292,180,130,70);
	ellipse(250,200,130,50);

	//brows
	strokeWeight(4)
	stroke(1)
	noFill();
	arc(250, 270, 40, 40, PI+QUARTER_PI, TWO_PI-QUARTER_PI, OPEN);
	arc(338, 270, 40, 40, PI+QUARTER_PI, TWO_PI-QUARTER_PI, OPEN);

	//eyelashes
	fill(0);
	stroke(51)
	strokeWeight(5)
	line(240,267,260,270);
	line(320,268,340,270);

	//eyes
	noStroke();
	fill(0);
	ellipse(260,280,18,27);
	ellipse(340,280,18,27);

	//glisten
	fill(253,205,174);
	triangle(260,280,300,280,350,350);
	triangle(340,280,380,330,400,290);

	//nose
	stroke(255,187,164);
	strokeWeight(4);
	line(294,310,290,338);
	line(290,338,300,336);

	//neck
	noStroke();
	fill(253,205,174);
	rect(280,410,40,58);

	//lips
	stroke(200,114,110);
	fill(200,114,110);
	ellipse(300,365,40,9);

	//sweater
	noStroke();
	fill(random(0,255),random(150,255),random(160,245));
	quad(230,440,370,440,420,530,180,530);


}

I like doing the project overall. It took me a long time to find colors that match together. I couldn’t decide on one sweater color so I used a range of random colors I like.