Category: Project-01-Face

Project-01-Face Veronica

Veronica Project 01 Face

//Veronica Wang
//Section B
//yiruiw@andrew.cmu.edu
//Project 01 Face


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

function draw() {

	//hair
	noStroke();
	fill(161,129,83);
	ellipse(300, 250, 250, 250);
	rect(175, 200, 250, 250, 50);
	noStroke();
	fill(134,107,68);
	ellipse(300, 250, 240, 240);
	noStroke();
	fill(161,129,83);
	ellipse(310, 260, 250, 250);

	//face
	noStroke();
	fill(255,236,190);
	ellipse(300, 300, 200, 220);
	rect(275,375,50,70);
	ellipse(210,300,50,50);

	//hair
	noStroke();
	fill(161,129,83);
	ellipse(280, 210, 160, 100);
	ellipse(365, 210, 80, 80);
	rect(200,200,20,200,10);

	//earing
	noStroke();
	fill('white');
	ellipse(190,310,10,10);

	//eyebrows
	noStroke();
	fill(161,129,83);
	ellipse(270, 270, 70, 15);
	ellipse(365, 270, 50, 15);
	noStroke();
	fill(255,236,190);
	ellipse(270, 275, 80, 15);
	ellipse(365, 275, 60, 15);

	//eyes
	noStroke();
	fill(161,129,83);
	ellipse(270, 305, 50, 50);
	ellipse(365, 305, 50, 50);
	noStroke();
	fill(255,236,190);
	ellipse(270, 315, 60, 60);
	ellipse(365, 315, 60, 60);
	line()

	//shirt
	noStroke();
	fill(170);
	ellipse(300, 625, 400, 400);
	noStroke();
	fill(180);
	ellipse(300, 635, 400, 400);
	noStroke();
	fill(255,177,190);
	ellipse(300, 625, 300, 300);
	noStroke();
	fill(180);
	rect(180, 475, 240, 250);
	noStroke();
	fill(170);
	rect(180, 533, 10, 70);

	//mouth
	noStroke();
	fill(255,139,139);
	arc(300, 365, 45, 45, 0, PI + QUARTER_PI, OPEN);

	//nose
	noStroke();
	fill(229,217,163);
	arc(320, 330, 20, 20, -45,QUARTER_PI+QUARTER_PI, OPEN);

	//neck
	noStroke();
	fill(255,236,190);
	ellipse(300,447,100,50);

}

I started by sketching out the face I wanted to draw in simple shapes, and then tried to put them into javascript. I don’t have much coding background and was struggling to create curves, so I used overlapping ellipses to draw curved eyebrows/eyes. I’m sure there are smarter ways to do this but I still had a lot of fun doing this exercise!

Sophia Kim Project-01-Face

sketch

//Sophia S Kim 
//Section C 1:30 
//sophiaki@andrew.cmu.edu
//Project-01-Self Portrait

function setup() {
  createCanvas(500,600); /// width,height
  background(117, 168, 253); ///background reference to RGB (R,G,B)
}

function draw() {
	fill(24, 16, 0); //hair color
	noStroke();
	ellipse(252.5, 251, 343, 328); //top part of hair

	fill(24, 16, 0); //hair color
	noStroke();
	rect(81, 252, 343, 259); //bottom half of hair

	fill(255, 236, 194); //skin color
	noStroke();
	ellipse(250, 283, 256, 300); //head shape

	fill(255, 236, 194);
	noStroke();
	ellipse(126, 304, 59, 80); //left ear 

	fill(255, 236, 194);
	noStroke();
	ellipse(371, 303, 59, 80); //right ear 

	fill(214, 213, 211);
	noStroke();
	ellipse(123, 391, 11, 112); //left earring

	fill(214, 213, 211);
	noStroke();
	ellipse(378, 391, 11, 112); //right earring

	fill(255, 236, 194);
	noStroke();
	rect(185, 383, 131, 101); //neck

	fill(255, 236, 194);
	noStroke();
	rect(130, 477, 245, 124); //chest

	fill(255, 236, 194);
	noStroke();
	ellipse(130, 600, 144, 246); //left arm

	fill(255, 236, 194);
	noStroke();
	ellipse(372, 600, 157, 246); //right arm

	fill(244, 224, 181); // shadow skin color 
	noStroke();
	ellipse(250, 324, 32, 25); // nose shadow

	fill(255, 236, 194); // skin color
	noStroke();
	ellipse(250, 319, 32, 23); // nose

	fill(244, 224, 181);
	noStroke();
	ellipse(250.5, 416, 131, 32); //chin shadow 

	fill(255, 236, 194);
	noStroke();
	ellipse(250.5, 409, 133, 20); // chin

	fill(244, 224, 181); 
	noStroke();
	ellipse(128, 590, 23, 78); //left arm SHADOW

	fill(244, 224, 181); 
	noStroke();
	ellipse(375, 590, 23, 78); //right arm SHADOW

	fill(0); //shirt color
	noStroke();
	rect(130, 477, 15, 126); //shirt strap left

	fill(0);
	noStroke();
	rect(360, 477, 15, 126); // shirt strap right 

	fill(0);
	noStroke();
	rect(138, 553, 226, 47); //tank middle 

	fill(255, 236, 194); 
	noStroke();
	ellipse(252.5, 553, 215.5, 27); // circle skin color to make curve for tank 

	fill(24, 16, 0);
	noStroke();
	ellipse(184, 242, 85, 43); //left eyebrow 

	fill(255, 236, 194); 
	noStroke();
	ellipse(184, 246, 97, 35.5); // makes shape for left eyebrow 

	fill(24, 16, 0);
	noStroke();
	ellipse(318, 243, 85, 43); // right eyebrow

	fill(255, 236, 194);
	noStroke();
	ellipse(318, 248, 97, 35.5); //makes shape for right eyebrow

	fill(0);
	noStroke();
	ellipse(175, 262, 135, 36); // left sun glass frame black

	fill(0, 18, 108);
	noStroke();
	ellipse(175, 262, 121, 19); //blue left frame of sunglasses

	fill(0);
	noStroke();
	rect(236, 258, 26, 6); //middle of sunglasses

	fill(0);
	noStroke();
	ellipse(324, 262, 135, 36); //right sun glass frame black

	fill(0, 18, 108);
	noStroke();
	ellipse(323, 262, 121, 19); //blue right frame of sunglasses
}

–
Starting the code was really hard, but after awhile, I was able to get a hang of writing code by using photoshop. Usually to make icons/digital images, I would use Illustrator or Photoshop, and I am really proud of myself that I was able to make this self-portrait through code. I organized each part of the self-portrait by typing out side-notes for each shape.

Dani Delgado Face

Project01Dani

/*Dani Delgado
Section E
ddelgad1@andrew.cmu.edu
Project_01_Face
*/

function setup() {
    createCanvas(500, 600);
    background(197, 202, 233);
   }

function draw() {
	//hair
	noStroke();
	fill(93, 64, 55);
	rect(115, 130, 250, 350, 90, 90, 0, 0);

	//curls
	arc(125, 220, 55, 70, 1.52, 4.712, PI, OPEN);
	arc(120, 280, 60, 70, 1.52, 4.712, PI, OPEN);
	arc(115, 345, 65, 75, 1.52, 4.712, PI, OPEN);
	arc(115, 415, 85, 80, 1.52, 4.712, PI, OPEN);

	arc(355, 220, 55, 70, 4.712, 1.52, PI, OPEN);
	arc(360, 280, 60, 70, 4.712, 1.52, PI, OPEN);
	arc(365, 345, 65, 75, 4.712, 1.6, PI, OPEN);
	arc(365, 415, 85, 80, 4.712, 1.6, PI, OPEN);

	arc(255, 137, 105, 80, 3.14, 0, PI, OPEN);
	arc(190, 140, 50, 50, 3.14, 0, PI, OPEN);

	arc(325, 168, 70, 70, 3.75, 7, PI, OPEN);
	arc(150, 165, 60, 60, 2, 5.6, PI, OPEN);

	//body
	noStroke();
	fill(158, 158, 158);
	rect(85, 430, 315, 170, 95, 95, 0, 0);

	fill(120, 110, 100);
	rect(145, 525, 15, 85, 20, 0, 0, 0);
	rect(335, 525, 15, 85, 0, 20, 0, 0);

	//face
	fill(185, 125, 90);
	noStroke();
	rect(210, 390, 60, 70, 0, 0, 80, 80);

	fill(265, 205, 155);
	rect(140, 150, 200, 250, 90);
	rect(215, 410, 55, 50, 90, 10, 80, 80);
	
	//ears
	arc(141, 300, 45, 60, 1.52, 4.712, PI, OPEN);
	arc(340, 300, 45, 60, 4.7, 1.65, PI, OPEN);

	fill(255, 160, 140);
	arc(141, 298, 28, 32, 1.52, 4.712, PI, OPEN);
	arc(340, 298, 28, 32, 4.7, 1.65, PI, OPEN);

	//mouth
	fill(50, 20, 30);
	arc(240, 335, 55, 65, 6.28, 3.14, PI, OPEN);

	fill(249,249,249);
	rect(212.5, 335, 55, 8, 0, 0, 35, 35);

	//nose, eyes, earrings
	fill(255, 160, 140);
	rect(230, 255, 20, 60, 90, 90, 5, 5);

	fill(70, 40, 38);
	ellipse(190, 260, 29, 29);
	ellipse(290, 260, 29, 29);

	fill(255, 171, 64);
	ellipse(129, 317, 9, 9);
	rect(134, 322, 5, 13, 10);
	ellipse(352, 317, 9, 9);
	rect(340, 322, 5, 13, 10);

	fill(225, 245, 254);
	ellipse(124, 307, 7, 7);
	ellipse(357, 307, 7, 7,);

	fill(250, 250, 250)
	ellipse(186, 265, 10, 10);
	ellipse(286, 265, 10, 10);

	noFill();
	stroke(90, 60, 50);
	strokeWeight(6);
	arc(186, 234, 40, 10, 3.24, 6, PI, OPEN);
	arc(292, 234, 40, 10, 3.24, 6, PI, OPEN);

	//bangs or front hair
	noStroke();
	fill(93, 64, 55);
	arc(300, 140, 200, 170, 1, PI, OPEN);
	rect(215, 140, 120, 50, 90);
	rect(295, 180, 50, 30, 90);

}

The process of creating this self portrait was an interesting experience as I have not had much prior experience with coding. However, I wanted to push myself by researching how to use arcs and other simple, but more complex shapes and then incorporating them into my work. The process was a bit long and unfamiliar, but fun nonetheless.

Rachel Lee Project-01 (Face)

Rachel Lee Project-01-Face

/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Assignment-01 (Self Portrait)*/

function setup() {
    createCanvas(513, 663);
    background(230, 175, 35);
    noStroke();
}


function draw() {
	//hair
	fill(48, 41, 36);
	ellipse(255, 226, 330, 322);
	rect(90, 230, 330, 336);

	//neck
	fill(233, 203, 164);
	rect(178, 356, 154, 81);
	ellipse(255, 432, 154, 154);

	//face
	fill(237, 213, 171);
	ellipse(255, 258, 300, 300);


	//eyebrows
	fill(48, 41, 36);
	quad(149, 198, 160, 188, 212, 194, 212, 197);
	quad(296, 194, 348, 188, 360, 198, 296, 197);

	//bangs
	fill(48, 41, 36);
	quad(107, 229, 123, 135, 304, 88, 202, 182);

	//ears
	fill(237, 213, 171);
	ellipse(108, 254, 51, 51);
	ellipse(400, 254, 51, 51);

	//eyes
	fill(48, 41, 36);
	ellipse(328, 234, 48, 39);
	fill(237, 213, 171);
	ellipse(328, 229, 48, 39);
	fill(48, 41, 36);
	rect(171, 251, 3, 7);
	rect(181, 253, 3, 8);
	rect(192, 250, 3, 8);

	fill(48, 41, 36);
	ellipse(181, 234, 48, 39);
	fill(237, 213, 171);
	ellipse(180, 229, 48, 39);
	fill(48, 41, 36);
	rect(319, 252, 3, 7);
	rect(329, 253, 3, 8);
	rect(339, 250, 3, 8);

	//nose
	fill(242, 196, 156);
	triangle(241, 300, 252, 249, 252, 300);
	fill(226, 182, 140);
	triangle(252, 300, 252, 249, 263, 300);

	//mouth
	fill(224, 84, 58);
	ellipse(254, 331, 70, 39);
	fill(237, 213, 171);
	ellipse(254, 326, 70, 39);

	//blush
	fill(242, 196, 156);
	ellipse(164, 292, 58, 29);
	ellipse(346, 292, 58, 29);

	//earrings
	fill(54, 70, 157);
	ellipse(98, 295, 50, 68);
	ellipse(412, 295, 50, 68);
}

I really enjoyed this assignment! It was super fun to see what I could come up with using basic shapes. At first I was just drawing freehand, but I found it much easier and much more precise to extract coordinates and color swatches from an Illustrator sketch I created.

Eunice Choe – Project-01-Face

Eunice Choe – Project-01-Face

/*
Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-01
*/



function setup() {
    createCanvas(600, 600);
    background(195, 80, 54);
}

function draw() {
    noStroke();

    //hair
    fill(39, 25, 3);
    rect(175, 250, 250, 300);
    ellipse(300, 250, 250, 250);

    //face
    fill(244, 221, 184);
    ellipse(300, 290, 200, 230);

    //bangs
    fill(39, 25, 3);
    quad(190, 270, 270, 240, 360, 160, 240, 185);

    //ear
    fill(244, 221, 184);
    ellipse(200, 300, 40, 40);

    //makeup
    fill(230, 145, 98);
    ellipse(248, 280, 55, 30);
    ellipse(357, 280, 55, 30);

    fill(254, 246, 230);
    ellipse(225, 310, 30, 20);
    ellipse(380, 310, 30, 20);

    //eyes
    fill(255, 255, 255);
    ellipse(255, 290, 40, 25);
    ellipse(350, 290, 40, 25);
    rect(235, 277, 40, 15);
    rect(330, 277, 40, 15);

    fill(39, 25, 3);
    rect(226, 277, 50, 4, 20);
    rect(329, 277, 50, 4, 20);
    ellipse(260, 290, 20, 20);
    ellipse(355, 290, 20, 20);

    fill(255, 255, 255);
    ellipse(255, 285, 5, 5);
    ellipse(350, 285, 5, 5);

    //brows
    fill(39, 25, 3);
    rect(220, 250, 55, 6, 20);
    rect(330, 250, 55, 6, 20);

    //nose
    fill(249, 204, 151);
    rect(290, 290, 30, 55, 20);

    fill(244, 221, 184);
    ellipse(310, 335, 10, 10);

    //mouth
    fill(216, 123, 104);
    quad(270, 370, 305, 360, 330, 370, 305, 380);

    fill(245, 155, 140);
    triangle(270, 370, 305, 360, 305, 380);

    //neck
    fill(244, 221, 184);
    rect(270, 390, 60, 30);

    //shirt
    fill(144, 214, 212);
    rect(150, 420, 300, 400, 100);

    fill(70, 131, 138);
    rect(340, 490, 55, 70, 20);

}

In my self portrait, I wanted to incorporate details that clearly reflect me. For instance, I chose to include my long, dark hair and red eye shadow. Overall, I really enjoyed this project!

Alessandra Fleck-Project 01-Face

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-01
function setup() {
    createCanvas(600, 600);
    background(146,199,159);
    noStroke();

    //text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {

	//face shape
	beginShape();
		fill(225,225,225);
		vertex(319, 0);
		vertex(333, 96);
		vertex(308, 261);
		vertex(289, 363);
		vertex(270, 400);
		vertex(176, 505);
		vertex(124, 537);
		vertex(42, 545);
		vertex(0, 539);
		vertex(0, 0);
		endShape(CLOSE);

	//eye
	beginShape();
		fill("white");
		vertex(275, 128);
		vertex(244, 136);
		vertex(216, 139);
		vertex(160, 132);
		vertex(154, 122);
		vertex(176, 107);
		vertex(210, 94);
		vertex(256, 106);
		endShape(CLOSE);

	

	//tri 01
	beginShape();
		fill(183,183,183);
		vertex(319, 0);
		vertex(256, 106);
		vertex(210, 94);
		vertex(206, 0);
		endShape(CLOSE);
	 //tri 02
	 beginShape();
	 	fill(172,172,172);
	 	vertex(275, 128);
	 	vertex(224, 136);
	 	vertex(216, 139);
	 	vertex(250, 250);
	 	endShape(CLOSE);
	 //tri 03
	 beginShape();
	 	fill(203,202,202);
	 	vertex(224, 136);
	 	vertex(216, 139);
	 	vertex(160, 132);
	 	vertex(250,250);
	 	endShape(CLOSE);

	//lips
	beginShape();
		fill(203,87,136);
		vertex(145, 400);
		vertex(127, 422);
		vertex(97, 440);
		vertex(0, 421);
		vertex(0, 396);
		vertex(19, 400);
		vertex(60, 414);
		endShape(CLOSE);
	beginShape();
		fill(2244,195,216);
		vertex(0, 366);
		vertex(36, 352);
		vertex(61, 361);
		vertex(81, 358);
		vertex(103, 364);
		vertex(146, 395);
		vertex(104, 403);
		vertex(67, 394);
		vertex(27, 393);
		vertex(0, 391);
		endShape(CLOSE);

	//ear
	beginShape();
		fill(183,183,183);
		vertex(306, 256);
		vertex(346, 229);
		vertex(377, 160);
		vertex(398, 0);
		vertex(320, 0);
		endShape(CLOSE);

	//contour
	beginShape();
		fill(112,112,112);
		vertex(301, 0);
		vertex(319, 0);
		vertex(333, 96);
		vertex(308, 261);
		vertex(289, 363);
		vertex(270, 400);
		vertex(250, 250); // cheek insert
		vertex(275, 128);
		endShape(CLOSE);

	//pupil
		fill("white");
		ellipse(210, 118, 50, 40);
		fill("grey");
		ellipse(210, 110, 40, 30);
		fill("black");
		ellipse(210, 118, 30, 30);
		fill("white");
		ellipse(205, 112, 20, 20);

	//nose
		beginShape();
			fill(203,202,202);
			vertex(0, 298);
			vertex(48, 304);
			vertex(64, 308);
			vertex(86, 302);
			vertex(120, 304);
			vertex(129, 283);
			vertex(123, 243);
			vertex(121, 133);
			vertex(42, 122);
			vertex(10, 245);
			endShape(CLOSE);
		beginShape();
			fill(112,112,112);
			vertex(64, 308);
			vertex(80, 280); // tip
			vertex(86, 302);
			endShape(CLOSE);
		beginShape();
			fill(144,143,143);
			vertex(80, 280);
			vertex(108, 263);
			vertex(118, 238);
			vertex(122, 137);
			vertex(213, 42);
			vertex(293, 48);
			vertex(264, 29);
			vertex(192, 36);
			vertex(109, 86);
			vertex(94, 124);
			vertex(83, 242);
			vertex(50, 292);
			vertex(48, 304);
			vertex(64, 308);
			endShape(CLOSE);
		beginShape();
			fill(155,152,152);
			vertex(24, 170);
			vertex(38, 124);
			vertex(0, 64);
			vertex(0, 125);
			endShape(CLOSE);
		beginShape();
			fill(173,172,172);
			vertex(38, 124);
			vertex(10, 244);
			vertex(30, 270);
			vertex(48, 240);
			vertex(54, 130);
			endShape(CLOSE);

		//neck
		beginShape();
			fill(155,152,152);
			vertex(216, 559);
			vertex(212, 464);
			vertex(175, 509);
			vertex(118, 540);
			vertex(41, 543);
			vertex(0, 600);
			endShape(CLOSE);

		//cheek shade
		beginShape();
		fill(220,220,220);
		vertex(250, 250);// cheek insert
		vertex(120, 304); 
		vertex(129, 283);
		vertex(123, 243);
		endShape(CLOSE);

		//cheek shade 2
		beginShape();
		fill(198,199,197);
		vertex(250, 250);// cheek insert
		vertex(120, 304); 
		vertex(145, 400);
		vertex(270, 400);
		vertex(176, 505);
		endShape(CLOSE);
		//cheek shade 2
		beginShape();
		fill(198,199,197);
		vertex(250, 250);// cheek insert
		vertex(120, 304); 
		vertex(145, 400);
		vertex(270, 400);
		vertex(176, 505);
		endShape(CLOSE);
		//cheek shade 3
		beginShape();
		fill(198,199,197);
		vertex(308, 261);
		vertex(289, 363);
		vertex(270, 400);
		vertex(127, 422);
		 // cheek insert
		vertex(200, 400);
		vertex(275, 128); // eye edge
		endShape(CLOSE);

	//Embellishments

	strokeWeight(2.5);
	strokeCap(ROUND);
	line(0, 0, 109, 86);
	line(0, 600, 97, 440);

	fill("white");
	stroke(0, 0, 0);
	bezier(200, 200, 100, 100, 90, 90, 15, 80);

	//hair
	fill(91,76,40);
	stroke(0, 0, 0);
	bezier(400, 200, 400, 400, 500, 300, 350, 400);
	fill(91,76,40);
	
	stroke(0, 0, 0);
	bezier(400, 200, 400, 400, 300, 300, 300, 500);
	fill(150,126,69);
	stroke(0, 0, 0);
	bezier(400, 200, 600, 10, 300, 150, 200, 0);
	fill(120,114,97);
	stroke("brown");
	bezier(300, 0, 600, 10, 200, 150, 100, 0);
	fill(120,114,97);
	stroke(0, 0, 0);
	bezier(300, 0, 600, 10, 300, 50, 400, 500);




	
	
	

	
	


}

 

In this project I wanted to create an abstracted face with vertex points that all connect to one another. Through the course of creating the face however, relying on a effective connectivity program that could input the connection between points at random would be more efficient than manually inputing every value.

Nina Yoo Project-01-Face

sketch

function setup() {
    createCanvas(600, 600);
    background(182,186,181);
    
}

function draw() {

	//main hair
	noStroke()
	fill(0)
	ellipse(309,269,268,292)

	noStroke()
	fill(0)
	ellipse(349,274,253,267)


	//basic face
	noStroke()
	fill(241,233,186)
	ellipse(330,283,223,262)

	//ear
	noStroke()
	fill(241,233,186)
	ellipse(432,273,45,81)

	//neck
	noStroke()
	fill(241,233,186)
	rect(293,349,68,103)


	//body
	noStroke()
	fill(241,233,186)
	rect(232,449,197,150)

	noStroke()
	fill(241,233,186)
	ellipse(232,524,86,151)

	noStroke()
	fill(241,233,186)
	rect(189,524,49,75)

	noStroke()
	fill(241,233,186)
	ellipse(427,524,79,151)

	noStroke()
	fill(241,233,186)
	rect(421,524,45,75)

	//under clothes part
	noStroke()
	fill(0)
	rect(234,530,184,69)


	//front hair
	noStroke()
	fill(0,0,0)
	ellipse(296,179,160,86)



	//mouth shadows
	noStroke()
	fill(210,203,167)
	ellipse(320,384,22,13)
	noStroke()
	fill(210,203,167)
	ellipse(320,352,7,14)

	//nose shadow
	noStroke()
	fill(210,203,167)
	ellipse(320,327,22,13)
	noStroke()
	fill(210,203,167)
	ellipse(320,300,7,28)

	//eyes shadow
	noStroke()
	fill(210,203,167)
	ellipse(266,271,54,27)
	noStroke()
	fill(210,203,167)
	ellipse(375,271,54,27)

	//ear shadow
	noStroke()
	fill(210,203,167)
	ellipse(432,273,7,25)

	//arm shadow
	noStroke()
	fill(210,203,167)
	ellipse(419,569,11,61)

	noStroke()
	fill(210,203,167)
	ellipse(232,569,11,61)

	//chin shadow
	noStroke()
	fill(210,203,167)
	ellipse(327,412,68,13)




	//lips
	noStroke()
	fill(187,96,141)
	ellipse(320,375,29,11)
	noStroke()
	fill(188,126,151)
	ellipse(308,367,29,10)
	noStroke()
	fill(188,126,151)
	ellipse(335,368,29,10)
	noStroke()
	fill(241,233,186)
	ellipse(302,364,29,13)
	noStroke()
	fill(241,233,186)
	ellipse(340,364,29,13)

	//eyelashes
	noStroke()
	fill(0)
	ellipse(266,275,52,24)

	noStroke()
	fill(0)
	ellipse(376,275,52,24)

	//white part of eyes
	noStroke()
	fill(255)
	ellipse(376,279,52,19)

	noStroke()
	fill(255)
	ellipse(266,279,52,19)

	//eyebrows
	noStroke()
	fill(0)
	ellipse(266,243,52,22)

	noStroke()
	fill(0)
	ellipse(376,243,52,22)

	noStroke()
	fill(241,233,186)
	ellipse(266,248,52,19)

	noStroke()
	fill(241,233,186)
	ellipse(376,248,52,19)


	//eyeballs
	noStroke()
	fill(0)
	ellipse(266,272,15,15)

	noStroke()
	fill(0)
	ellipse(376,272,15,15)	

	//mole
	noStroke()
	fill(0)
	ellipse(305,398,5,5)

	//clothes
	noStroke()
	fill(0)
	ellipse(327,540,194,118)

	noStroke()
	fill(0)
	rect(258,449,12,60)

	noStroke()
	fill(0)
	rect(384,449,12,60)




}

I started off with making basic shapes and then played with coloring to demonstrate shadows.

Emily Zhou –– Self Portrait

I started with the key features of the head and body. Then I played with different colours and added a party hat.

emily-face

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

function draw() {
	// hair
	fill(51, 29, 7);
	noStroke();
	rect(90, 118, 466, 740, 233, 233);
	// body
	fill(255);
	noStroke();
	ellipse(325, 645, 243, 374);
	// head
	fill(253, 198, 137);
	noStroke();
	ellipse(324, 356, 360, 360);
	// left ear
	fill(253, 198, 137);
	noStroke();
	ellipse(144, 387, 67, 67);
	// right ear
	fill(253, 198, 137);
	noStroke();
	ellipse(502, 355, 61, 61);
	// left eye
	fill(255);
	noStroke();
	ellipse(224, 349, 80, 80);
	// right eye
	fill(255);
	noStroke();
	ellipse(439, 332, 72, 72);
	// left pupil
	fill(0);
	noStroke();
	ellipse(224, 349, 59, 59);
	// right pupil
	fill(0);
	noStroke();
	ellipse(439, 332, 52, 52);
	// mouth
	fill(250, 139, 139);
	noStroke();
	arc(330, 420, 80, 80, 0, PI + QUARTER_PI, CHORD);
	// hat
	fill(240, 110, 170);
	noStroke();
	triangle(261, 149, 304, 26, 363, 142);
}

Lingfan Jiang – Project 01 – Face

sketch

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-01


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

function draw() {
    scale(0.6);
    background(35);


    fill(255);
    beginShape();
    vertex(433,43.9);
    vertex(423,80.9);
    vertex(411,121);
    vertex(409,167);
    vertex(449,201);
    vertex(443,216);
    vertex(401,244);
    vertex(417,288);
    vertex(392,321);
    vertex(434,344);
    vertex(416,362);
    vertex(387,358);
    vertex(367,355);
    vertex(348,394);
    vertex(367,396);
    vertex(337,441);
    vertex(322,497);
    vertex(302,552);
    vertex(320,590);
    vertex(344,604);
    vertex(368,616);
    vertex(407,626);
    vertex(445,629);
    vertex(436,637);
    vertex(408,647);
    vertex(362,629);
    vertex(331,610);
    vertex(312,613);
    vertex(286,628);
    vertex(297,599);
    vertex(258,587);
    vertex(239,617);
    vertex(248,642);
    vertex(204,658);
    vertex(178,698);
    vertex(204,733);
    vertex(236,756);
    vertex(283,773);
    vertex(313,793);
    vertex(353,789);
    vertex(398,788);
    vertex(425,764);
    vertex(451,739);
    vertex(458,718);
    vertex(484,684);
    vertex(499,666);
    vertex(507,642);
    vertex(525,617);
    vertex(514,625);
    vertex(526,606);
    vertex(534,591);
    vertex(540,634);
    vertex(530,683);
    vertex(518,724);
    vertex(488,768);
    vertex(469,792);
    vertex(436,815);
    vertex(431,850);
    vertex(419,866);
    vertex(387,910);
    vertex(368,914);
    vertex(364,910);
    vertex(325,930);
    vertex(268,941);
    vertex(217,926);
    vertex(161,912);
    vertex(114,883);
    vertex(82.4,851);
    vertex(48,804);
    vertex(20.3,764);
    vertex(1.22,726);
    vertex(0.476,695);
    vertex(2.12,647);
    vertex(8.55,603);
    vertex(23.4,572);
    vertex(37,544);
    vertex(51.7,503);
    vertex(81.7,458);
    vertex(73.5,435);
    vertex(70.4,383);
    vertex(94.4,330);
    vertex(133,286);
    vertex(182,290);
    vertex(215,241);
    vertex(239,190);
    vertex(236,137);
    vertex(183,115);
    vertex(135,82.8);
    vertex(86.8,49.9);
    vertex(36.5,20.8);
    vertex(20.1,1.46);
    vertex(78.3,1.46);
    vertex(137,1.46);
    vertex(195,1.46);
    vertex(254,1.46);
    vertex(312,2.74);
    vertex(371,2.53);
    vertex(429,1.46);
    vertex(488,1.46);
    vertex(483,32.9);
    vertex(433,43.9);
    endShape(); //main head

    beginShape();
    vertex(441,567);
    vertex(459,572);
    vertex(442,584);
    vertex(421,588);
    vertex(402,590);
    vertex(394,603);
    vertex(383,587);
    vertex(369,571);
    vertex(349,565);
    vertex(351,546);
    vertex(362,561);
    vertex(362,548);
    vertex(364,530);
    vertex(382,521);
    vertex(391,523);
    vertex(411,529);
    vertex(399,541);
    vertex(417,551);
    vertex(420,558);
    vertex(426,577);
    vertex(441,567);
    endShape(); //left eye

    beginShape();
    vertex(667,1.46);
    vertex(713,1.46);
    vertex(747,14.6);
    vertex(753,57.8);
    vertex(758,97.7);
    vertex(762,112);
    vertex(774,109);
    vertex(773,71.6);
    vertex(780,31.5);
    vertex(778,4.74);
    vertex(809,2.63);
    vertex(856,2.43);
    vertex(901,9.2);
    vertex(915,5.3);
    vertex(948,9.72);
    vertex(923,30.5);
    vertex(915,35.8);
    vertex(889,55.6);
    vertex(930,33.1);
    vertex(958,6.15);
    vertex(987,2.46);
    vertex(966,21.8);
    vertex(924,43.7);
    vertex(882,64.7);
    vertex(839,84.2);
    vertex(798,106);
    vertex(758,130);
    vertex(750,129);
    vertex(748,86.5);
    vertex(735,66.2);
    vertex(741,87);
    vertex(747,112);
    vertex(731,148);
    vertex(717,148);
    vertex(686,169);
    vertex(640,177);
    vertex(681,157);
    vertex(714,125);
    vertex(704,81.6);
    vertex(691,36.4);
    vertex(667,1.46);
    endShape(); //clothing detail

    beginShape();
    vertex(566,469);
    vertex(574,469);
    vertex(582,481);
    vertex(593,491);
    vertex(591,507);
    vertex(581,519);
    vertex(566,522);
    vertex(558,514);
    vertex(566,500);
    vertex(570,485);
    vertex(566,469);
    endShape(); //ear detail

    beginShape();
    vertex(380,437);
    vertex(373,435);
    vertex(366,431);
    vertex(361,426);
    vertex(368,422);
    vertex(376,419);
    vertex(383,421);
    vertex(391,423);
    vertex(394,429);
    vertex(388,435);
    vertex(380,437);
    endShape(); //nose detail

    var c = color(99, 99, 99); 
    fill(c); 
    noStroke();
    beginShape();
    vertex(165,477);
    vertex(148,468);
    vertex(152,489);
    vertex(165,505);
    vertex(178,519);
    vertex(176,535);
    vertex(195,530);
    vertex(216,526);
    vertex(235,535);
    vertex(246,520);
    vertex(228,524);
    vertex(236,514);
    vertex(246,499);
    vertex(239,481);
    vertex(231,476);
    vertex(212,468);
    vertex(214,485);
    vertex(193,480);
    vertex(186,483);
    vertex(169,494);
    vertex(165,477);
    endShape(); // right eye

    //details
    var c = color(255, 204, 0); 
    fill(c); 
    noStroke();
    triangle(375,560,380,555,380,548);

    var c = color(255, 150, 0); 
    fill(c); 
    noStroke();
    triangle(385,560,380,555,380,548);

    noFill();
    stroke(255, 108, 0);
    arc(385, 557, 10, 10, 0, PI);

    fill(255, 255, 255);
    noStroke();
    quad(200,510,205,516,210,510,205,504);

    stroke(0,0,0);
    strokeWeight(2);
    line(875,35,800,75);

    point(825,42);

    fill(255, 255, 255);
    noStroke();
    ellipse(220,500,5,5);

    fill(0, 0, 0);
    noStroke();
    rect(810,25,3,3);

    noLoop();
    

}

In this project, I decided to incorporate my knowledge from some architecture software. It is quite satisfying to see it worked in the end. However, the only problem is that different from Mathematica axis, the Y axis goes in different directions in Java script. In the end, my face is upside-down, but I guess it makes it special too. Overall, it is very interesting to finish this project cross-discipline!

Justin Yook – Project 01 – Face

jyook_SelfPortrait

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500, 500);
    background(112, 156, 205);
}

function draw() {

	noStroke();
	//General face shape and color
	fill(254, 256, 225);
	ellipse(250, 250, 260, 280);

	//Hat
	fill(0);
	arc(250, 180, 240, 220, PI, TWO_PI, OPEN);
	fill(0);
	ellipse(250, 170, 232, 200);

	//used to make the curve of the hat's bill
	fill(254, 256, 225);
	ellipse(250, 245, 190, 70);

	//helps differentiate parts of the hat
	fill(52, 61, 70);
	ellipse(250, 180, 225, 40);

	//covers up the unnecessary grey area to leave only curve line
	fill(0);
	ellipse(250, 185, 220, 40);

	//Eyes
	fill(255);
	arc(190, 240, 70, 60, 0, PI);

	fill(255);
	arc(310, 240, 70, 60, 0, PI);

	fill(0);
	ellipse(190, 250, 10, 10);

	fill(0);
	ellipse(310, 250, 10, 10);

	//Eyebrows
	fill(0);
	rect(270, 235, 80, 5);

	fill(0);
	rect(150, 235, 80, 5);

	//Mouth
	fill(0);
	rect(205, 330, 90, 5);
 
}

While I was doing this project, I tried to come up with a style that can be both simple and meaningful. I randomly chose the South Park character style because their characters are simple primitives, but they each possess distinguishable features. For me, that’s my black hat, and my unamused eyes.