Category: Project-01-Face

face_portrait

function setup() {
    createCanvas(600, 600);
    background(256);
    /*Daniel Teague - 15-104b - dteague@andrew.cmu.edu - project-01"*/;
}

function draw() {
    noFill();
    stroke(200, 152, 105);
    ellipse(300, 250, 150, 200);
    fill(0, 0, 0);
    stroke(0, 0, 0);
    ellipse(275, 200, 40, 25);
    fill(0, 0, 0);
    stroke(0, 0, 0);
    ellipse(325, 200, 40, 25);
    stroke(0, 0, 0);
    line(235, 200, 255, 200);
    stroke(0, 0, 0);
    line(345, 200, 365, 200);
    stroke(0, 0, 0);
    line(295, 200, 305, 200);
    stroke(256, 0, 0);
    noFill();
    arc(300, 275, 75, 75, 0, PI);
    stroke(0, 0, 0);
    arc(300, 335, 75, 150, 0, PI);
    stroke(0, 0, 0);
    line(300, 405, 300, 455);
    stroke(0, 0, 0);
    line(285, 420, 315, 420);
}

I can honestly say this was a lot of fun to do. Playing around with the code to get the results I wanted was interesting and funny at times. I almost had a Kermit the Frog at one point, because the eyes were on the top of the head instead of inside it. Looking forward to seeing what we will need to do in the future.

sketch

/*
Audrey Zheng
Section A
audreyz@andrew.cmu.edu
Assignment-01
*/



function setup() {
    createCanvas(468, 584);
}

function draw() {
	background(220);

	//hair
	noStroke();
	fill(0);
	rect(121,108,215,240,100,100,20,20);



	//body
	noStroke();
	fill(200);
	rect(128,340,206,161, 50);

	//neck
	fill(221,169,112);
	rect(206,305,50,69,20);
	fill(250,194,133);
	rect(218,325,38,49,20);

	//ear
	fill(250,194,133);
	ellipseMode(CORNER);
	ellipse(130,220,38,47);
	ellipse(292,220,38,47);


	//earshadows
	fill(231,165,93);
	ellipse(138,228,27,33);
	ellipse(295,227,27,33);


	//face
	fill(250,194,133);
	rect(149,132,162,193,100);

	//bangs
	fill(0);
	//arc(x, y, w, h, start, stop, [mode])
	arc(185, 120, 150, 80, 0, PI + QUARTER_PI + QUARTER_PI, OPEN);
	arc(98, 55, 100, 150, 0, HALF_PI + QUARTER_PI - 0.5,OPEN); //it goes counter clock-wise

	//eyes
	fill(255);
	rect(172,229,31,23,12);
	rect(254,229,31,23,12);
	fill(0);
	ellipse(179,229,18,18);
	ellipse(260,229,18,18);

	//nose
	fill(231,165,93);
	triangle(230, 251, 224, 270, 236, 270);

	//eyebrows
	noFill();
	stroke(90, 60, 50);
	strokeWeight(6);
	arc(170, 230, 40, 10, 3.24, 6, OPEN);
	arc(250, 230, 40, 10, 3.33, 6.1, OPEN);

	//cheeks
	noStroke();
	fill(255,172,172);
	rect(160,270,25,12,7);
	rect(277,270,25,12,7);

	//eyebrows
	stroke(0);

	strokeWeight(12.0);
	strokeCap(ROUND);
	line(171, 206, 201, 201);
	line(264.5,202.5,295.45,207.81);
    
}

//{ } are braces
// [] are brackets.

/* lol you can do this for comment too */

sketch

/* Jason Zhu
Section E
jlzhu@andrew.cmu.edu
Project-01L Self Portrait (Face)
*/

function setup() {
    createCanvas(600, 600);
    background(230, 180, 180);
}

function draw() {
	noStroke()

	//Background 2
	fill(150, 100, 100);
	rect(200, 200, 340, 340, 30, 30, 30, 30);

	//Neck
	fill(250, 220, 190);
	rect(300, 430, 60, 250, 90, 90, 90, 90);

    //Body
	fill(180, 220, 200);
	rect(300, 590, 350, 400, 90, 90, 0, 0);

	//Shirt Collar
	fill(250, 220, 190);
	ellipse(300, 385, 60, 60, 90, 90, 90, 90);

	//Arm Left
	fill(190, 230, 205);
	rect(150, 580, 80, 300, 45, 45, 20, 20);

	//Arm Right
	fill(190, 230, 205);
	rect(450, 580, 80, 300, 45, 45, 20, 20);

	//Body Fill
	fill(150, 120, 220);
	ellipse(300, 520, 85, 100, 90, 90, 0, 0);

	//hair
	fill(0, 10, 20);
	ellipse(300, 220, 260, 260, 180, 180, 0, 0);

	//face 1
	fill(250, 220, 190);
	rectMode(CENTER);
	ellipse(300, 250, 250, 250, 90, 90, 0, 0);
 
	//hair 2
	fill(0, 10, 20);
	rectMode(CENTER);
	ellipse(300, 160, 220, 100, 180, 180, 0, 0);

	//ear Left
	fill(250, 220, 190);
	strokeWeight(0)
	ellipse(170, 270, 30, 50);
	ellipse(168, 275, 25, 40);

	//ear Right
	fill(250, 220, 190);
	strokeWeight(0)
	ellipse(430, 270, 30, 50);
	ellipse(432, 275, 25, 40);

    //face 2
    fill(250, 220, 190);
    fill(10);
    arc(254,260,40,40,0,PI,OPEN);
    strokeWeight(0);
    arc(348,260,40,40,0,PI,OPEN);
    fill(255, 227, 215);
    ellipse(255,260,10,10,0);
    ellipse(350,260,10,10,0);

	//Mouth
    fill(255,161,119);
    ellipse(300,330,40,30);
}

I think this assignment really opened my eyes. I thought this was an entertaining assignment that helped me better understand the forms and factors that made me, me. I really enjoyed experimenting and although I could not render every aspect of myself as I had wanted, it was still an informative and introspective experience overall.

sketch

function setup() {

    createCanvas(500,700);
    background(0,24,124);
}

function draw(){
//canvas
  noSmooth();
  noStroke();
  fill(252,123,145);
  rect(0,100,500,500);

//face.left
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(219, 100); // the first control point
  curveVertex(219, 100); // is also the start point of curve
  curveVertex(208, 149);
  curveVertex(211, 195);// the last point of curve
  curveVertex(211, 195); // is also the last control point
  endShape();

  beginShape();
  curveVertex(232, 100); // the first control point
  curveVertex(232, 100); // is also the start point of curve
  curveVertex(230, 145);
  curveVertex(225, 182);
  curveVertex(216, 225);
  curveVertex(221, 270);
  curveVertex(237, 302);
  curveVertex(273, 350);// the last point of curve
  curveVertex(273, 350); // is also the last control point
  endShape();

  line(197,152,195,165);
  line(195,165,197,216);
  line(197,216,216,225);
  line(232,100,486,100);

  noFill();
  stroke(0,24,124);
  beginShape();
  curveVertex(222, 100); // the first control point
  curveVertex(222, 100); // is also the start point of curve
  curveVertex(220, 145);
  curveVertex(215, 182);
  curveVertex(206, 225);// the last point of curve
  curveVertex(206, 225); // is also the last control point
  endShape();

  line(208, 149,199,180);


//face.right
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(486, 100); // the first control point
  curveVertex(486, 100); // is also the start point of curve
  curveVertex(472, 198);
  curveVertex(465, 229);
  curveVertex(456, 260);// the last point of curve
  curveVertex(456, 260); // is also the last control point
  endShape();

  line(471,219,456,260);

  stroke(0,24,143);
  beginShape();
  curveVertex(471,270);
  curveVertex(471,270);
  curveVertex(460,295);
  curveVertex(439,317);
  curveVertex(439,317);
  endShape();
  
  noStroke();
  fill(0,24,124);
  quad(486,100,472,198,500,214,500,100);
  triangle(465,229,472,198,491,199);
  triangle(480,195,500,213,471,270);

//eyebrows
  triangle(251,129,294,115,298,129);
  quad(294,115,298,129,340,145,330,128);
  quad(390,148,392,158,435,147,432,137);
  quad(464,150,463,158,435,147,432,137);

//eyes
  noFill();
  stroke(0,24,124);
  strokeWeight(10);
  arc(290, 153, 80, 50, PI/6, 5*PI/6);
  arc(420, 170, 80, 50, PI/6, 5*PI/6);

  noFill();
  stroke(255,27,143);
  strokeWeight(3);
  arc(290, 155, 80, 50, PI/6, 5*PI/6);
  arc(420, 173, 80, 50, PI/6, 5*PI/6);

//nose
  noStroke();
  fill(0,24,124);
  triangle(324,257,355,260,341,242);

//mouth
  noStroke();
  fill(0,24,124);
  ellipse(276,290,10,8);
  ellipse(383,309,15,10);
  triangle(288,295,331,304,323,312);
  triangle(365,307,331,304,323,312);

  fill(255,27,143);
  ellipse(250,270,20,18);
  ellipse(430,280,30,20);
//neck
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(243, 312);// the first control point
  curveVertex(243, 312);// is also the start point of curve
  curveVertex(236, 332); 
  curveVertex(224, 358);
  curveVertex(208, 379);
  curveVertex(185, 395);// the last point of curve
  curveVertex(185, 395); // is also the last control point
  endShape();

//clothes
  stroke(0,24,124);
  line(218,429,142,378);
  line(37,402,142,378);
  line(37,402,0,450);
  line(451,414,500,430);
  line(299,353,327,355);
  fill(0,24,124);
  triangle(331,480,451,414,438,407);

//hair
  noStroke();
  fill(0,24,124);
  quad(218,100,207,148,170,155,173,100);
  triangle(207,148,173,100,172,175);
  triangle(194,200,173,100,172,175);
  quad(233,336,192,344,202,373,225,355);

//earings
  ellipse(195,220,10,10);
  ellipse(199,233,10,10);
  ellipse(206,241,10,10);
 }

I first created a picture in photoshop first and then found the coordinates to create the code.

liz-maday-portrait

//Self Portrait
//Elizabeth Maday

function setup() {
    createCanvas(600, 600);
    background(220);
    strokeWeight(5);
    text("p5.js vers 0.7.1 test.", 10, 15);
}

function draw() {
    background(252, 226, 97); 

    //caption
    textSize(27);
    textStyle(BOLD);
    text("This is me.", 28, 238);

    //body
    var c = color(66, 148, 34); 
    fill(66, 148, 34);
    ellipse(300, 600, 200, 600);

    //ear left
    var c = color(206, 141, 9);
    fill(206, 141, 9);
    ellipse(192, 270, 30, 40);

    //ear right
    var c = color(206, 141, 9);
    fill(206, 141, 9);
    ellipse(407, 270, 30, 40);

    //head
    fill(206, 141, 92); //this is the skin color
    ellipse(300, 300, 220, 275);

    //nose
    arc(300, 325, 20, 20, 0, PI);

    //right eye
    var c = color(0, 0, 0); 
    fill(0, 0, 0);
    ellipse(275, 245, 10, 10);

    //left eye
    ellipse(325, 245, 10, 10);

    //hat
    var c = color(255, 0, 0); 
    fill(255, 0, 0);
    arc(300, 162, 40, 50, PI, TWO_PI);

    //brim
    var c = color(255, 0, 0); 
    fill(255, 0, 0);
    ellipse(242, 161, 76, 10);

    //earring
    var c = color(0, 65, 251); 
    fill(0, 65, 251);
    ellipse(415, 275, 10, 10);

    //arms
    line(395, 495, 470, 550);
    line(470, 550, 550, 500);
    line(208, 460, 125, 275);

    //mouth
    line(287, 372, 313 ,372);

    //hands
    var c = color(0, 0, 0); 
    fill(0, 0, 0);
    ellipse(550, 500, 10, 10);

    var c = color(0, 0, 0); 
    fill(0, 0, 0);
    ellipse(125, 275, 10, 10);

    //hair
    var c = color(106, 66, 27); 
    fill(106, 66, 27);
    triangle(280, 164, 318, 164, 298, 194);

    var c = color(106, 66, 27); 
    fill(106, 66, 27);
    triangle(240, 184, 280, 164, 267, 213);

    var c = color(106, 66, 27); 
    fill(106, 66, 27);
    triangle(318, 164, 360, 184, 333, 213);

    //stripe
    var c = color(0, 65, 251); 
    fill(0, 65, 251);
    rect(210, 475, 180, 16);
}

In this project, I really enjoyed the creativity that was involved, as well as the challenge of figuring out how to produce what you want to see. This was one of my first times using code, and it really gave me an insight into the process. I am excited for the time when I will know how to realize more complicated ideas.

gates-face

function setup() {
    createCanvas(500,500);
    background(255);

}

function draw() {

    //head
    fill(242,208,239);
    noStroke();
    ellipse (250,250,500,700);

    //eyes
    stroke (0);
    strokeWeight (1);
    fill(255);
    ellipse(150,250,250,250);
    ellipse(350,250,250,250);

    //iris
    fill(19,175,26);
    noStroke();
    ellipse(150,200,100,100);
    ellipse(350,200,100,100);

    //gold ring left side
    stroke(190,190,6)
    strokeWeight (3);
    noFill();
    beginShape();
    curveVertex (130,180);
    curveVertex (135,165);
    curveVertex (150,170);
    curveVertex (165,165);
    curveVertex (170,180);
    curveVertex (185,185);
    curveVertex (180,200);
    curveVertex (185,215);
    curveVertex (170,220);
    curveVertex (165,235);
    curveVertex (150,230);
    curveVertex (135,235);
    curveVertex (130,220);
    curveVertex (115,215);
    curveVertex (120,200);
    curveVertex (115,185);
    endShape(CLOSE); 

    noFill();
    curve(130,180,130,180,135,165,135,165);

    //gold ring right side
    noFill();
    beginShape();
    curveVertex (330,180);
    curveVertex (335,165);
    curveVertex (350,170);
    curveVertex (365,165);
    curveVertex (370,180);
    curveVertex (385,185);
    curveVertex (380,200);
    curveVertex (385,215);
    curveVertex (370,220);
    curveVertex (365,235);
    curveVertex (350,230);
    curveVertex (335,235);
    curveVertex (330,220);
    curveVertex (315,215);
    curveVertex (320,200);
    curveVertex (315,185);
    endShape(CLOSE); 

    noFill();
    curve(330,180,330,180,335,165,335,165);

    //pupils
    fill(0)
    noStroke();
    ellipse(150,200,50,50);
    ellipse(350,200,50,50);

    //nose
    fill(218,0,165);
    triangle (250,375,225,425,275,425);

    //mustache
    stroke(40,17,0);
    strokeWeight(3);
    line(50,420,50,445);
    line(60,425,60,450);
    line(70,430,70,455);
    line(80,435,80,460);
    line(90,438,90,463);
    line(100,441,100,466);
    line(110,444,110,469);
    line(120,447,120,472);
    line(130,450,130,475);
    line(140,453,140,478);
    line(150,454,150,480);
    line(160,456,160,482);
    line(170,458,170,484);
    line(180,459,180,485);
    line(190,460,190,486);
    line(200,461,200,487);
    line(210,462,210,488);
    line(220,463,220,489);
    line(230,463,230,489);
    line(240,463,240,489);
    line(250,463,250,489);
    line(260,463,260,489);
    line(270,463,270,489);
    line(280,463,280,489);
    line(290,462,290,488);
    line(300,461,300,487);
    line(310,460,310,486);
    line(320,459,320,485);
    line(330,458,330,484);
    line(340,456,340,482);
    line(350,454,350,480);
    line(360,453,360,478);
    line(370,450,370,475);
    line(380,447,380,472);
    line(390,444,390,469);
    line(400,441,400,466);
    line(410,438,410,463);
    line(420,435,420,460);
    line(430,430,430,455);
    line(440,425,440,450);
    line(450,420,450,445);

    //mouth
    noFill();
    stroke(218,0,165);
    strokeWeight(5);
    arc(250,345,600,300,0,PI);

    //hair
    fill(0);
    noStroke();
    arc(250,0,350,200,0,PI);
}

People always tell me I have big, expressive eyes so I knew they would be the focus of this self-portrait. Since the Mondrian assignment got me very familiar with rectangles, I wanted to challenge myself to explore other shapes. Using the curveVertex() function to make the gold rings inside the eyes involved the most trial and error, as did positioning the many lines that make up the mustache.

kpolhemu portrait

function setup() {
    createCanvas(600, 600);
    background(85, 169, 253);
}

function draw() {
	noStroke()

	//hair
	fill(255, 232, 139);
	rectMode(CENTER);
	rect(300, 300, 255, 405, 90, 90, 20, 20);

	//neck
	fill(205, 132, 123);
	rect(295, 350, 70, 300);

	//ear
	fill(205, 132, 123);
	ellipse(395, 290, 15, 30);

	//head
	fill(255, 172, 158);
	rect(300, 270, 188, 263, 90, 90, 175, 175);

	//shirt
	fill(218, 133, 172);
	rectMode(RADIUS);
	rect(300, 600, 150, 150);

	//hair details
	fill(255, 232, 139);
	triangle(320, 130, 200, 300, 200, 150);

	fill(255, 232, 139);
	triangle(320, 130, 250, 250, 340, 130);

	//right eye and eyelid
	fill(0);
	ellipse(255, 260, 30, 10);

	fill(255, 172, 158);
	ellipse(255, 255, 30, 10);

	//left eye and eyelid
	fill(0);
	ellipse(340, 260, 30, 10);

	fill(255, 172, 158);
	ellipse(340, 255, 30, 10);

	//nose
	fill(0);
	ellipse(290, 320, 10, 5);

	fill(0);
	ellipse(310, 320, 10, 5);

	//mouth
	fill(0);
	ellipse(300, 355, 20, 5);

	//earring
	fill(85, 169, 253);
	ellipse(398, 305, 10, 10);

}

Starting & completing this project was pretty difficult for me as I have zero coding experience. I attempted to keep it as simple as possible, using the most basic shapes and not too much detail.

portrait

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//project-01

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

function draw() {

    //background
    background(255, 106, 106);
    if (mouseX > (width / 2)) {
      background(104, 150, 255);
    }

    //eyes
    fill(244, 147, 10);
    stroke(0);
    strokeWeight(0);
    ellipse(150, 220, 120, 100);
    ellipse(450, 270, 130, 100);
    fill(270, 170, 30);
    stroke(0);
    strokeWeight(0);
    ellipse(150, 220, 90, 80);
    ellipse(450, 270, 98, 80);

    //mouth
    ellipse(250, 500, 100, 20);
    fill(216, 41, 49);
    strokeWeight(0);
    ellipse(250, 500, 90, 17);

    //eyeball
    fill("grey")
    ellipse(158, 203, 30, 30);
    ellipse(465, 255, 30, 30);

    //nose
    fill(180, 180, 0);
    stroke(0);
    strokeWeight(0);
    triangle(mouseX, mouseY, mouseX - 15, mouseY - 60, mouseX - 30, mouseY );
    stroke(0);
    strokeWeight(2);


    //hair
    line(200, 0, 200, 50);
    line(210, 0, 210, 48);
    line(220, 0, 220, 45);
    line(230, 0, 230, 40);
    line(240, 0, 240, 52);
    line(250, 0, 250, 47);
    line(260, 0, 260, 48);
    line(270, 0, 270, 49);
    line(280, 0, 280, 45);
    line(290, 0, 290, 51);
    line(300, 0, 300, 50);
    line(310, 0, 310, 48);
    line(320, 0, 320, 45);
    line(330, 0, 330, 40);
    line(340, 0, 340, 52);
    line(350, 0, 350, 47);
    line(360, 0, 360, 48);
    line(370, 0, 370, 49);
    line(380, 0, 380, 45);
    line(390, 0, 390, 51);
    fill(50, 0, 2);
    ellipse(0, 300, 40, 600);
    ellipse(600, 300, 55, 700);
    ellipse(20, 20, 50, 270);
    ellipse(30, 0, 200, 30);
    ellipse(470, 0, 170, 50);
    ellipse(580, 20, 250, 70);
    ellipse(300, 0 ,2000, 20);

    //eyebrow
    fill(50, 50, 50);
    quad(93, 47, 95, 22, 205, 64, 212, 89);
    quad(423, 120, 427, 100, 548, 77, 548, 95);

    //glasses
    rotate(PI/55);
    noFill();
    stroke(50, 0, 2);
    strokeWeight(0.5);
    rect(60, 200, 180, 170,20);
    rect(390, 220, 180, 170, 20);
    line(240, 280, 390, 290);

    //earrings
    arc(0, 520, 200, 200, PI, PI + QUARTER_PI);

}

Red embarrassed face means that you put my nose in WRONG place.

When you see a blue happy face, my nose is generally in the RIGHT place.