Jenni Lee – Project 01 – Face

jenni-face

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600, 600);
    background(237, 247, 249);
    noStroke();
}

function draw() {

	//back hair
	fill(63, 63, 63);
	ellipseMode(CENTER);
	ellipse(300, 200, 300, 300);
	rect(150, 190, 300, 170);
	ellipseMode(CENTER);
	ellipse(300, 350, 300, 300);

	//face
	fill(249, 235, 225);
	ellipseMode(CENTER);
	ellipse(300, 250, 273, 273);

	//bangs
	fill(63, 63, 63);
	ellipseMode(CENTER);
	ellipse(353, 162, 167, 167);

	//neck
	fill(249, 235, 225);
	rect(267, 372, 61, 57);

	//shirt
	fill(252, 180, 180);
	rect(213, 422, 171, 106, 10, 10, 10, 10);

	//ears
	fill(249, 235, 225)
	ellipseMode(CENTER);
	ellipse(157, 268, 50, 50);

	ellipseMode(CENTER);
	ellipse(439, 268, 50, 50)

	//eyes
	fill(63, 63, 63);
	ellipseMode(CENTER);
	ellipse(365, 276, 28, 28);

	fill(63, 63, 63);
	ellipseMode(CENTER);
	ellipse(232, 276, 28, 28);

	//heart
	fill(252, 180, 180);
	ellipseMode(CENTER);
	ellipse(494, 217, 21, 21);
	ellipse(510, 217, 21, 21);
	triangle(485.5, 223, 518.5, 223, 501.5, 240);

	//hoops
	noFill();
	stroke(224, 187, 83);
	strokeWeight(4);
	ellipse(430, 320, 67, 67);
	ellipse(162, 320, 67, 67);

 		noLoop();

}

This project was really enjoyable for me because the limited shape and color options forced me to think creatively in order to make recognizable facial features. Creating this face was very rewarding, as it felt like it was truly made from sratch. Further, I enjoyed organizing the code style, as it was similar to working with type hierarchy!

Alice Fang- Self Portrait

alice-portrait

/* Alice Fang
Section E
acfang@andrew.cmu.edu
Project-01
*/


function setup() {
    createCanvas(600, 600);
    background(87, 160, 170);

    //neck
    noStroke();
    fill(244, 207, 162);
    quad(289, 444, 412, 428, 480, 600, 300, 600);

    //hair
    fill(76, 35, 5);
    ellipse(337, 199, 385, 350);
    quad(176, 252, 314, 303, 218, 562, 80, 511);
    ellipse(199, 542, 244, 357);

    //ear
    fill(244, 171, 122);
    ellipse(183, 307, 75, 103);

    //earring
    strokeWeight(5);
    stroke(225, 245, 235);
    noFill();
    rect(161, 350, 45, 125, 17);

    //shirt
    noStroke();
    fill(204, 104, 70);
    quad(273, 527, 433, 471, 480, 600, 300, 600);

    //face
    fill(244, 207, 162);
    ellipse(338, 271, 350, 408);

    //nose
    fill(244, 171, 122);
    quad(284, 290, 317, 323, 300, 351, 267, 336);

    //eye line
    fill(76, 35, 5);
    ellipse(357, 279, 47, 32);
    ellipse(244, 283, 47, 32);

    //white of eye
    fill(255, 245, 235);
    ellipse(243, 287, 44, 29);
    ellipse(358, 283.2, 44, 29);

    //pupil
    fill(76, 35, 5);
    ellipse(256, 285, 21, 27);
    ellipse(370, 282, 21, 27);

    //eyebrow
    stroke(76, 35, 5);
    strokeWeight(10);
    line(214, 252, 268, 252);
    line(334, 238, 389, 253);

    //top of mouth, nose shadow
    noStroke();
    fill(219, 122, 83);
    ellipse(305, 388, 57, 22);
    quad(267, 336, 296, 339, 317, 322, 300, 351);

    //bottom of mouth
    fill(204, 104, 70);
    ellipse(306, 395, 50, 11);

    //bangs
    fill(76, 35, 5);
    ellipse(485, 390, 147, 564);
    rect(250, 54, 151, 192, 25);
    quad(120, 205, 211, 68, 296, 125, 205, 261);
    quad(346, 93, 432, 50, 521, 231, 424, 273);

}

I found this project to be fairly straightforward, though it was tricky making sure I had the elements in the correct order (especially my hair, in order to get bangs in front of my face…), and making sure the code was organized and readable. Super satisfied with learning how to do this!

cmhoward-01


project-01-face-final2

function setup() {
    createCanvas(600, 550);
    background('lightblue');
}

function draw() {
	//face
	fill('tan');
	noStroke();
	ellipse(275,300,375,375);
	rect(200,300,150,500);
	
	//hair left
	fill(255,255,180);
	noStroke();
	ellipse(100,200,100,100);
	ellipse(100,300,100,100);
	ellipse(100,400,100,100);
	ellipse(100,500,100,100);
	ellipse(135,150,100,100);
	ellipse(135,250,100,100);
	ellipse(135,350,100,100);
	ellipse(135,450,100,100);
	ellipse(135,550,100,100);

	//hair top
	ellipse(200,150,100,100);
	ellipse(275,150,100,100);
	ellipse(350,150,100,100);
	ellipse(350,150,100,100);
	ellipse(425,150,100,100);

	//hair right
	ellipse(475,200,100,100);
	ellipse(440,250,100,100);
	ellipse(475,300,100,100);
	ellipse(440,350,100,100);
	ellipse(475,400,100,100);
	ellipse(440,450,100,100);
	ellipse(475,500,100,100);
	ellipse(440,550,100,100);
	
	//space buns
	ellipse(175,100,150,150);
	ellipse(375,100,150,150);

	//hairbows
	fill('pink');
	ellipse(175,100,25,25);
	ellipse(375,100,25,25);
	triangle(175,100,150,75,150,125);
	triangle(175,100,200,75,200,125);
	triangle(375,100,350,75,350,125);
	triangle(375,100,400,75,400,125);


	//eyes
	fill('white)');
	noStroke();
	rect(200,250,55,25,25,25);
	rect(300,250,55,25,25,25);
	fill('black');
	ellipse(225,262.5,25,25);
	ellipse(325,262.5,25,25);
	stroke('black');
	strokeWeight(5);
	line(205,250,245,250);
	line(305,250,345,250);

	//nose
	arc(275,350,25,25,TWO_PI,PI,OPEN);

	//eyebrows
	quad(195,235,205,230,250,230,205,230);
	quad(355,235,345,230,300,230,345,230);

	//mouth
	ellipse(275,400,75,75);
	fill('white');
	ellipse(275,400,65,65);
	fill('tan');
	noStroke();
	rect(225,350,100,50);
}

this exercise turned out to be more creative problem solving than i initially thought! i can’t wait to learn ways to create 25 ellipses without hard coding each of them.

Jamie Dorst Project 01 Face


/*
Jamie Dorst
Section A
jdorst@andrew.cmu
Project-01
*/

function setup() {
    createCanvas(600, 600);
    background('#ADD8E6');
}

function draw() {

	noStroke();
	translate(-10, -30);
	
// hair
	fill('#271815');
	rectMode(CENTER);
	rect(300, 320, 250, 320, 100, 100, 20, 20);
	
// face
	fill('#EAC086');
	rectMode(CENTER);
	rect(300, 310, 200, 240, 100, 100, 120, 120);

// eyes
	fill('white');
	ellipseMode(CENTER);
	ellipse(255, 290, 40, 20);
	ellipse(345, 290, 40, 20);

	fill('#49311C');
	ellipse(255, 290, 20, 20);
	ellipse(345, 290, 20, 20);

	fill('black');
	ellipse(255, 290, 12, 12);
	ellipse(345, 290, 12, 12);

// eyebrows
	fill('#2D221F');
	rect(250, 270, 50, 7);

	rect(350, 270, 50, 7)

// nose
	noFill();
	stroke(51);
	strokeWeight(2);
	arc(300, 335, 22, 20, 0, PI);

// mouth
	strokeWeight(4);
	strokeCap(ROUND);
	stroke('#C4877A');
	arc(300, 370, 50, 25, 0, PI);

// more hair
	noStroke();
	fill('#271815');

	translate(250, -120);
	rotate(PI / 4.0);
	ellipseMode(CENTER);
	ellipse(250, 250, 70, 180);

	translate(576, -80);
	rotate(PI / 2.0);
	ellipseMode(CENTER);
	ellipse(250, 250, 70, 160);

}

I found this project sort of difficult at first just to visualize what I was going to be doing and the order the layers needed to be in, but once I got going I got the hang of it. The most difficult part was probably rotating the ellipses for my hair, I figured out a way to do it eventually, but I’m guessing there’s a better way than what I did.

Sarah Yae Project 1 Face

sarahyae-faceportrait

function setup() {
    createCanvas(500, 500);
    background('rgb(216,191,216)');

//face
    fill ('rgb(255,235,205)');
    ellipse (250,250,180,230);

//eyes related
    fill ('white');
    ellipse (215,225,40,20);

    fill ('black');
    ellipse (215,225,19,20);

    fill ('brown');
    arc (215,205, 50,10,PI,0);

    fill ('white');
    ellipse (285,225,40,20);

    fill ('black');
    ellipse (285,225,19,20);

    fill ('brown');
    arc (285,205,50,10,PI,0); 

//glasses 
    noFill ();
    ellipse (215,225,55,30);  
    noFill();
    ellipse (285,225,55,30);
    line (242.5,225,257.5,225)

//nose
    line (250,240,260,275);
    line (260,275,240,275);

//mouth
    fill ('red');
    arc (250,300,60,20, 0, PI);

//hair
    fill ('rgb(51,24,29)');
    rect (160,160,30,250);
    rect (310,160,30,250);
    arc (250,170,170,70,PI,0);

}

function draw() {
}

I used my favorite color, lavender, as the background color. I also added glasses to my self-portrait because I have been wearing glasses since I was 9.

Shirley Chen-Project-01-Face

shirleychen-face

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-01


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

function draw() {
//hair
	fill(82, 54, 36);
	noStroke();
	rect(151, 182, 299, 298);

//face
	fill(240, 206, 183);
	noStroke();
	rect(190, 150, 230, 230, 20, 20, 80, 80);

//bangs
	noStroke();
	fill(82, 54, 36);
	rect(180, 150, 240, 100);
	fill(82, 54, 36);
	arc(300, 200, 300, 300, PI, 0);
	var x1 = 240,
	x2 = 230,
	x3 = 230,
	x4 = 220;
	var y1 = 250,
	y2 = 190,
	y3 = 190,
	y4 = 250;
	fill(240, 206, 183);
	noStroke();
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);
	var x1 = 295,
	x2 = 300,
	x3 = 300,
	x4 = 310;
	var y1 = 250,
	y2 = 197,
	y3 = 197,
	y4 = 250;
	fill(240, 206, 183);
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);
	var x1 = 375,
	x2 = 380,
	x3 = 380,
	x4 = 390;
	var y1 = 250,
	y2 = 220,
	y3 = 220,
	y4 = 250;
	fill(240, 206, 183);
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);

//eyes
	fill(0);
	var c = color(0);
	fill(c);
	ellipse(250, 300, 35, 35);
	ellipse(360, 300, 35, 35);

//blush
	var c = color(249, 177, 177);
	fill(c);
	ellipse(240, 340, 50, 35);
	ellipse(370, 340, 50, 35);

//mouth
	fill(206, 95, 95);
	noStroke();
	rect(290, 345, 30, 20, 0, 0, 10, 10);

//body
	fill(139, 162, 176)
	rect(160, 410, 280, 400, 70, 70, 0, 0);

//neck
	fill(240, 206, 183)
	rect(280, 380, 40, 30);

//hair relection
	noFill();
	stroke(213, 167, 121);
	strokeWeight(9);
	curve(260, 250, 180, 180, 250, 100, 260, 200);
	strokeWeight(15);
	point(180, 200);

//arms	
	stroke(0)
	strokeWeight(2);
	line(200, 500, 200, 600);
	line(400, 500, 400, 600);
}

This project is really fun to work on! The part that I need to be careful about during the process is the order of writing my code because I need to figure out which part is on the top and which is at the bottom. Keeping track with the coordinates is also important during the process. I enjoy this project!

Erin Fuller – Self Portrait


//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project-01

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

function draw() {
    background(157, 196, 191);
    background(157, 196, 191);
    background(157, 196, 191);


//hair background

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(210, 180, 100, 30);    

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(340, 180, 200, 120);    

    strokeWeight(0);
    fill(214, 101, 36);
    rect(160, 180, 280, 340);   

//ears

    strokeWeight(0);
    fill(252, 206, 146);
    ellipse(175, 285, 40, 65);

    strokeWeight(0);
    fill(252, 206, 146);
    ellipse(425, 285, 40, 65);

//face

    strokeWeight(0);
    fill(255, 217, 153);
    ellipse(300, 300, 230, 290);

// hair foreground

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(210, 180, 100, 80);    
    
    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(340, 180, 200, 80);  

//eyebrows

    strokeWeight(3); 
    stroke(168, 79, 28)   
    noFill();
    line(315, 240, 344, 230);
    line(344, 230, 365, 234);

    strokeWeight(3); 
    stroke(168, 79, 28)   
    noFill();
    line(285, 240, 256, 230);
    line(256, 230, 235, 234);

 //nose

    strokeWeight(2.5); 
    stroke(214, 177, 128)   
    noFill();
    line(300, 265, 315, 310);
    line(315, 310, 305, 315);

//smile

    strokeWeight(2.5); 
    stroke(204, 61, 94)   
    noFill();
    arc(300, 366, 85, 40, 0, PI);

//left eye

    strokeWeight(0);
    fill(249, 249, 249);
    ellipse(267, 265, 35, 20);

    strokeWeight(0);
    fill(77, 124, 69);
    ellipse(267, 265, 15, 15);

//right eye

    strokeWeight(0);
    fill(249, 249, 249);
    ellipse(343, 265, 35, 20);

    strokeWeight(0);
    fill(77, 124, 69);
    ellipse(343, 265, 15, 15);

//freckles

    strokeWeight(0);
    fill(186, 115, 80);
    ellipse(350, 300, 4, 4);
    ellipse(366, 300, 4, 4);
    ellipse(342, 313, 4, 4);
    ellipse(358, 313, 4, 4);
    ellipse(374, 313, 4, 4);

    strokeWeight(0);
    fill(186, 115, 80);
    ellipse(250, 300, 4, 4);
    ellipse(266, 300, 4, 4);
    ellipse(242, 313, 4, 4);
    ellipse(258, 313, 4, 4);
    ellipse(274, 313, 4, 4);


    noLoop();
}

I was originally very nervous for this class and the idea of coding, just because it seems too structured for me. However, I had a lot of fun with the project and had a lot of satisfaction when I made each new shape and of course when I finally completed the self-portrait.

Judy Li-Project-01-Face

judyli:Face Project

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Assignment-01
*/

function setup() {
    createCanvas(500, 500);
    background(218,165,32);
}

function draw() {
	drawBackgroun();
	drawFace();
	drawBrows();
	drawEyes();
	drawLashes();
	drawNose();
	drawMouth();
	drawHat();
}

function drawBackgroun() {
	strokeWeight(0);
	fill(218,175,32);
	rect(50,50,400,400);
	fill(218,165,32);
	rect(100,100,300,300);
	fill(218,175,32);
	rect(150,150,200,200);

}

function drawFace() {
	strokeWeight(0);
	fill(239,219,178);
	rect(200,225,100,50);
	ellipseMode(CENTER);
	ellipse(250,225,100,50);
	ellipse(250,280,100,75);
}

function drawBrows() {
	fill(77,55,39);
	ellipse(225,240,30,5);
	ellipse(275,240,30,5);
	fill(239,219,178);
	ellipse(225,242.5,30,3);
	ellipse(275,242.5,30,3);
}

function drawEyes() {
	fill(239,200,150);
	ellipseMode(CENTER);
	ellipse(225,250,25,10);
	ellipse(275,250,25,10);
}

function drawLashes() {
	strokeWeight(1);
	line(225,255,225,257.5);
	line(220,255,217.5,257.5);
	line(230,255,232.5,257.5); 
	line(275,255,275,257.5);
	line(270,255,267.5,257.5); 
	line(280,255,282.5,257.5); 
}

function drawNose() {
	strokeWeight(0.5);
	fill(239,200,150);
	ellipse(248,280,10,5);
}

function drawMouth() {
	strokeWeight(0);
	fill(230,141,139);
	ellipse(245,298,10,5);
	ellipse(255,298,10,5);
	fill(225,120,118);
	ellipse(250,300,20,2.5);
	ellipse(250,300.5,17.5,4.5);
}

function drawHat() {
	strokeWeight(0);
	fill(108,108,108);
	rect(200,215,100,5);
	fill(0,0,0);
	rect(200,215,100,-30);
	ellipse(250,185,100,25);
	ellipse(250,225,185,15);
}

A lot of the people around me tell me that I love to sleep, wear hats quite often, and love the color golden yellow. Hence, I used all that for this project. When I started out, it was a bit difficult to start because I had no image in mind. But, I started to play around with the shapes and color to created this. I think during this process, I realized that my java script codes were a bit messy, so I made it more organized and I think that helped me a lot! Overall, I had fun with this project and learned a lot.

Elena Deng Portrait

sketch

/* Elena Deng
Section E {
  edeng1@andrew.cmu.edu
  Assignment-01
}



*/

function setup() {
    createCanvas(350, 450);
    background(255,255,255);
}

function draw() {
  //hair
    fill(62,36,12);
    ellipseMode(0,0,0);
    ellipse(215,172,282,267);
    rect(215,175,280,334);
    ellipse(219,197,208,67);

  //jacket
    fill(140,96,57);
    ellipseMode(CENTER);
    ellipse(196,484,265,366);


  //face
  noStroke();
  fill (217, 173, 128);
  ellipseMode(CENTER);
  ellipse(208,213,244,280);
  ellipse(197,260,259,204);
  ellipse(331,251,35,57);

  //hair pt 2
  fill(62,36,12);
  ellipseMode(CENTER);
  ellipse(223,97,208,67);


  //eyebrows
    noStroke();
    fill(62,36,12);
    ellipseMode(CENTER);
    ellipse(225,182,86,30);
    ellipse(103,190,46,26);

  //eyebrowspt2
    noStroke();
    fill(217, 173, 128);
    ellipse(235,194,104,30);
    rect(165,165,25,30);
    ellipse(108,200,44,29);
    rect(117,171,18,39);

//eye
  noStroke();
  fill(0,0,0);
  ellipseMode(CENTER);
  ellipse(225,217,77,39);
  ellipse(98,215,50,32);

  fill(217, 173, 128);
  ellipse(225,225,77,35);
  ellipse(100,222,47,32);

//nose
  noStroke();
  fill(0,0,0);
  ellipseMode(CENTER);
  ellipse(132,253,35,39);

  fill(217, 173, 128);
  ellipse(132,260,35,26);

//mouth
  noStroke();
  fill(0,0,0);
  ellipseMode();
  ellipse(135,307,60,40);

  fill(217, 173, 128);
  ellipse(130,318,59,40);

//hand
  noStroke();
  fill(217, 173, 128);
  ellipse(75,375,93,134);
  ellipse(96,408,100,38);

//jacketpt2
  fill(140,96,57);
  rect(37,425,75,82,20);

//little splotches of joy
  fill(217,185,152);
  ellipse(330,251,21,35);
  ellipse(238,259,98,59);
  ellipse(159,151,62,36);
  ellipse(81,362,70,76);

//windowpane
  fill(173,215,237,63);
  noStroke();
  rect(0,0,296,456);
  fill(255,255,255,63);
  rect(0,0,305,456);



}

i call this piece: no escape from studio. pictured below (or above) is a design student (possibly me), trapped within the depths of margaret morrison

actually really enjoyed this project! i usually procrastinate until the last minute but once i started to work on the portrait i found it hard to stop.

Catherine Coyle – Project 01 – Face

catherineFace

// Catherine Coyle =)
// Section C
// ccoyle@andrew.cmu.edu
// Project 01 - self portrait!

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

function draw() {
    background(152, 157, 224);
    stroke(0);
    strokeWeight(0);
   
    // face
    fill(255, 215, 191);
    rect(150,100,200,200);
    quad(150,300,200,350,300,350,350,300);
    fill(255, 173, 170);
    ellipse(180,245,40,40);
    ellipse(320,245,40,40);
    
    // eyes and eyelashes
    fill(255, 250, 247);
    triangle(180,200,200,180,220,200);
    triangle(280,200,300,180,320,200);
    fill(153, 86, 59);
    triangle(180,200,186,200,183,205);
    triangle(186,200,192,200,189,205);
    triangle(320,200,314,200,317,205);
    triangle(314,200,308,200,311,205);
    
    // nose
    fill(237, 186, 161);
    triangle(250,200,220,250,280,250);
    fill(237, 173, 154);
    quad(220,250,240,260,260,260,280,250)
    fill(247, 214, 197);
    ellipse(250,245,35,10);
    fill(99, 89, 84);
    ellipse(240,255,10,10);
    ellipse(260,255,10,10);
    
    // mouth
    fill(0);
    rect(200,290,100,30);
    fill(255);
    quad(200,290,300,320,200,320,300,290);
    rect(208,292,84,26);
    fill(255, 173, 170);
    quad(200,320,220,330,280,330,300,320);
    fill(252, 155, 151);
    triangle(200,290,250,290,240,280);
    triangle(300,290,250,290,260,280);
    
    // hair and eyebrows
    fill(153, 86, 59);
    rect(180,160,40,12);
    rect(280,160,40,12)
    triangle(180,160,180,172,160,172);
    triangle(320,160,320,172,340,172);
    fill(119, 60, 35);
    triangle(220,100,350,100,350,200);
    triangle(150,100,220,100,150,200);
    triangle(350,100,350,350,425,350);
    triangle(150,100,150,350,75,350);
    quad(150,100,200,50,300,50,350,100)
    
    // other details (neck, shirt, tips of hair, etc)
    fill(237, 173, 154);
    rect(200,350,100,50);
    fill(244, 96, 85);
    rect(150,400,200,100);
    triangle(150,400,150,500,100,500);
    triangle(350,400,350,500,400,500);
    fill(255, 215, 191);
    rect(200,370,100,30);
    quad(200,400,225,425,275,425,300,400);
    fill(99, 36, 24);
    triangle(150,300,150,350,200,350);
    triangle(300,350,350,300,350,350)
    
    // freckles
    fill(142, 99, 71);
    ellipse(200,245,5,5);
    ellipse(180,225,5,5);
    ellipse(160,245,5,5);
    ellipse(280,270,5,5);
    
    // eyeballs MOVEMENT!!!
    fill(0);
    eyeX=250;
    eyeY=193;
    yMovement=mouseY;
    xMovement=mouseX;
    if (mouseX < 190) {
      eyeX =190
    }
    else if (mouseX > 320){
      eyeX = 205
    }
    else {
      eyeX=175 + xMovement/10;
    }
    if (mouseY<193){
      eyeY=eyeY-(190-yMovement)
    }
    ellipse(eyeX,(eyeY/30)+187,15,15);
    ellipse(eyeX+100,(eyeY/30)+187,15,15);

    // covering up the edges of the eyes
    fill(255, 215, 191);
    triangle(180,200,200,180,180,180);
    triangle(200,180,220,200,220,180);
    triangle(280,200,300,180,280,180);
    triangle(300,180,320,200,320,180)
}

This was so fun to make! I always like really block-y, geometric art styles, but I’ve never really tried to make anything in that way before so I thought this was a good chance to try it out! I drew a sketch on paper of how I generally wanted it to look and then got to experimenting in p5. I really wanted to get the eyes to follow your mouse around just to see if I could figure it out, and it was a challenge but I think it worked out okay. Overall this is not the cutest picture I’ve ever made, but I’m happy with it!