Category: Project-01-Face

Paul Greenway – Project01 – Face

face

/*Paul Greenway
Section 1A
pgreenwa@andrew.cmu.edu
Assignment-01
*/


function setup() {
     createCanvas(400, 600);
     background(56,187,142);
}

function draw() {
  
     //body
     fill(127,186,197);
     rect(100,440,230,300);
  
     //hair
     fill(0,0,0);
     arc(215, 300, 350, 350, PI, TWO_PI);
  
     //hair
     fill(0,0,0);
     arc(200, 270, 340, 290, PI, PI + HALF_PI, OPEN);
  
     //hair
     fill(0,0,0);
     arc(230, 240, 340, 290, PI, 180 + HALF_PI, OPEN);
  
     //head
     fill(255,222,179);
     ellipse(200,300,300,300);
  
     //hair
     fill(0,0,0);
     arc(210, 220, 270, 150, PI, TWO_PI);
    
     //eyes
     fill(255,255,255);
     ellipse(270,270,50,40);
  
     //eyes
     fill(255,255,255);
     ellipse(130,270,50,40);
  
     //pupils
     fill(0,0,0);
     ellipse(270,270,10,10);
  
     //pupils
     fill(0,0,0);
     ellipse(130,270,10,10);
  
     //nose
     fill(210,183,147);
     rect(200,280,20,70);
  
     //mouth
     fill(0,0,0);
     ellipse(200,400,100,50);
  
     //tongue
     fill(187,7,11);
     ellipse(200,413,75,20);
    
}

When creating my self portrait I found it hard to create the exact shapes I was looking for so I ended up with a more abstract representation .

Become Ghalya’s Hair Stylist

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-01

function setup() {
    
    createCanvas(600, 600);
    background(200,160,200);
    angleMode(DEGREES);
    text('oh no! Ghalya is bald! Help draw her hair..', 200, 50);

    /*I originally created a canvas of 800x800,
    but had to rescale the protrait proportionally
    to fit the 600 constraint on WordPress*/
    scale(0.75);
    
    //neck
    strokeWeight(1);
    stroke(0);
    fill (175, 150, 130);
    rect(325, 600, 150, 200);

    //face
    fill (185, 150, 130);
    ellipse(400, 400, 500, 650);

    //eyeRight
    fill ("white");
    ellipse(300, 300, 100, 65);

    fill (130, 90, 60);
    circle(300, 300, 65);

    //eyeLeft
    fill ("white");
    ellipse(500, 300, 100, 65);

    fill (130, 90, 60);
    circle(500, 300, 65);

    //nose
    fill (175, 150, 130);
    triangle(400, 380, 450, 480, 350, 480);

    //mouth
    fill ("black");
    arc(400, 550, 200, 150, 0, 180, OPEN);


    //eyebrows
    noFill();
    strokeWeight (5);
    arc(300, 260, 100, 50, 200, 340, OPEN);
    arc(500, 260, 100, 50, 200, 340, OPEN);

    //pupils
    fill (0);
    strokeWeight(3);
    stroke(255);
    circle(300, 300, 30);
    circle(500, 300, 30);


}

function draw() {
    //hair 
    strokeWeight(1);
    stroke(0);
    a = random(200);
    fill(130, 90, 60, a);
    circle(mouseX, mouseY, 80);
}

Project 01 – Self-Portrait

For this project, we were asked to create a self portrait using p5.js. I chose to emphasize my curly hair because I believe it is a big part of who I am and how people perceive me.

Timothy Liu — Project01 — Face


I really enjoyed this project as it allowed me to take creative liberties in portraying a few aspects of who I am—an upbeat, fun-loving, Yankees/sports fan—through graphic fundamentals of P5. The coding process was tricky in how long it took to align each of the components I included on the grid system (especially the hat logo), but it was a really rewarding first project.

tcliu-self-portrait

//Timothy Liu
//15-104 Section C
//tcliu@andrew.cmu.edu
//SELF-PORTRAIT

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

function draw() {

    fill("#F5CB9A");
    noStroke();
    rect(260,270,80,50);
    //neck

    fill("#FFD3A1");
    noStroke();
    ellipse(300,200,160,180);
    fill("#FFD3A1");
    noStroke();
    ellipse(220,210,20,45);
    fill("#FFD3A1");
    noStroke();
    ellipse(380,210,20,45);
    //head

    fill("#23120B");
    noStroke();
    quad(218,170,235,170,230,195,218,195);
    fill("#23120B");
    noStroke();
    quad(380,170,365,170,370,195,382,195);
    fill("#23120B");
    noStroke();
    arc(310, 165, 80, 25, TWO_PI, PI, CHORD);
    //hair

    fill(255);
    noStroke();
    arc(270,200,30,25,PI,TWO_PI);
    fill(255);
    noStroke();
    arc(330,200,30,25,PI,TWO_PI);
    fill(0);
    noStroke();
    ellipse(270,193.5,12,12);
    fill(0);
    noStroke();
    ellipse(330,193.5,12,12);
    //eyes

    fill(255);
    noStroke();
    ellipse(270,190,3,3);
    fill(255);
    noStroke();
    ellipse(330,190,3,3);
    //pupils

    fill("#003366");
    noStroke();
    quad(200,320,400,320,410,height,190,height);
    fill("#1261A0");
    noStroke();
    quad(203,443,195,height,202,height,208,447);
    //shirt/body

    fill("#1261A0");
    noStroke();
    arc(300, 320, 95, 50, TWO_PI, PI, CHORD);
    fill("#F5CB9A");
    noStroke();
    arc(300, 320, 85, 40, TWO_PI, PI, CHORD);
    //collar area

    fill("#CAE9F5");
    noStroke();
    triangle(200,320,250,320,190,350);
    //Left shoulder

    fill("#CAE9F5");
    noStroke();
    triangle(400,320,350,320,410,350);
    //Right shoulder

    fill("#003366");
    noStroke();
    quad(105,450,110,500,200,440,200,345);
    fill("#003366");
    noStroke();
    quad(90,350,110,500,150,450,120,340);
    fill("#1261A0");
    noStroke();
    quad(140,415,138,420,200,360,200,349);
    fill("#1261A0");
    noStroke();
    quad(200,349,200,360,257,327,253,324);
    //Right arm

    fill("#003366");
    noStroke();
    quad(495,450,490,500,400,440,400,345);
    fill("#003366");
    noStroke();
    quad(490,500,470,height,430,height,450,400);
    //Left arm

    fill("#FFD3A1");
    noStroke();
    ellipse(105,340,60,55);
    fill("#FFD3A1");
    noStroke();
    quad(83,275,93,315,108,320,95,272);
    fill("#FFD3A1");
    noStroke();
    quad(120,273,108,315,118,330,132,276);
    fill("#FFD3A1");
    noStroke();
    triangle(73,322,77,350,120,308);
    fill("#F5CB9A");
    noStroke();
    quad(73,322,82,348,105,340,94,313);
    fill("#E4B98E");
    noStroke();
    quad(97,335,120,364,133,350,105,327);
    //Right hand (with peace sign)

    fill("#D39972");
    noStroke();
    arc(300,225,10,40,PI,TWO_PI);
    //nose

    fill(255,150,150);
    noStroke();
    arc(300, 235, 60, 60, TWO_PI, PI, CHORD);
    //mouth

    fill("#003366");
    noStroke();
    arc(300,170,165,180,PI,TWO_PI);
    fill("#003366");
    noStroke();
    rect(218,155,190,15);
    fill("#CAE9F5");
    noStroke();
    triangle(381,155,420,170,420,155);
    //hat

    fill(255);
    noStroke();
    rect(285,120,5,25);
    fill(255);
    noStroke();
    rect(310,120,5,25);
    fill(255);
    noStroke();
    quad(290,120,315,142,310,145,287,126);
    fill(255);
    noStroke();
    quad(290,105,300,118,300,123,287,111);
    fill(255);
    noStroke();
    quad(310,105,300,118,300,123,313,111);
    fill(255);
    noStroke();
    rect(297.5,120,5,28);
    //logo on hat
   
}

Emma Nicklas-Morris Project-01 Face

Emma’s self portrait

/* 
Emma Nicklas-Morris
Section B
enicklas@andrew.cmu.edu
Self-portrait
*/

function setup() {
	createCanvas(600,600);
	background('#ADD8E6');
	// Face shape
	strokeWeight(0);
	fill('#E0AC69');
	ellipse(300, 300, 280, 330); 
	// Mouth
	fill('#E77471');
	arc(300, 365, 120, 80, 0, PI); 
	// Nose 
	fill('#C58917');
	triangle(275, 325, 300, 275, 325, 325); 
	// White of eyes
	strokeWeight(2);
	fill('white');
	ellipse(240, 240, 50, 25);  
	ellipse(360, 240, 50, 25);
	// Pupils
	fill('black');
	ellipse(240, 240, 20, 20);  
	ellipse(360, 240, 20, 20);
	// Hair
	strokeWeight(0);
	arc(363, 225, 250, 230, PI + QUARTER_PI, TWO_PI + QUARTER_PI); 
	arc(320, 270, 340, 290, PI, PI + HALF_PI, OPEN);
	rect(420, 250, 65, 300);
	rect(140, 210, 45, 340);

}

The hardest challenge for me besides not being able to get a more accurate depiction of myself with only using about 10 shapes was figuring out how to use arc. Specifically the parameters start and end.

Face Project

ikaneko face project

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

    noStroke();

    fill(250, 130, 170);
    ellipse(300, 300, 600, 600);

    fill(240, 220, 100);
    ellipse(300, 300, 500, 100);

    ellipse(300, 300, 100, 500);

    ellipse(120, 120, 100, 25);
    ellipse(120, 120, 25, 100);

    ellipse(480, 120, 100, 25);
    ellipse(480, 120, 25, 100);

    ellipse(120, 480, 100, 25);
    ellipse(120, 480, 25, 100);

    ellipse(480, 480, 100, 25);
    ellipse(480, 480, 25, 100);

    fill(250, 235, 213);
    ellipse(300, 300, 200, 220);

    fill(140, 185, 220);
    arc(300, 300, 200, 220, PI, 0);

    fill(240, 240, 200);
    arc(300, 300, 100, 100, PI, 0, CHORD);

    fill(140, 185, 220);
    rect(250, 285, 100, 15);

    fill(0);
    ellipse(265, 320, 15, 10);
    ellipse(335, 320, 15, 10);

    stroke(0);
    strokeWeight(3);
    line(270, 365, 330, 365);
   


   }

For this project, I quickly realized that I didn’t have the experience to be able to make anything very detailed or accurate. I decided to go for more of a cartoonish south park style self portrait.

Steven Fei-Project01- Face


sketch

function setup() {
    createCanvas(600, 600);
    background(147,201,149);
   
}

function draw() {
    
    //body
    fill(120,29,29);
    strokeWeight(1);
    rect(110,445,420,400,95,80);
    strokeWeight(1)
    fill(225,183,129);
    triangle(230,450,330,700,430,450);
    strokeWeight(0);
    fill(242,206,160);
    triangle(240,450,330,650,415,450);
    
    fill(255);
    arc(200,550,40,40,0.5*PI,PI+0.5*PI,CHORD);
    fill(0);
    arc(200,550,40,40,PI+0.5*PI,0.5*PI,CHORD);
    fill(255);
    arc(200,540,20,20,PI+0.5*PI,0.5*PI,CHORD);
    fill(0);
    arc(200,560,20,20,0.5*PI,PI+0.5*PI,CHORD);
    fill(255);
    ellipse(200,560,5,5);
    fill(0);
    ellipse(200,540,5,5);
    
    //ear
    strokeWeight(0);
    fill(255,220,169);
    ellipse(130,294,50,60);
    ellipse(505,294,50,60);
    //noStroke();
    //face
    strokeWeight(1);
    stroke(0);
    fill(255,222,171);
    ellipse(322,280,340,453);
    
    //nose
    noFill();
    strokeWeight(1);
    stroke(34,34,34);
    line(320,240,350,333);
    
    stroke(0);
    line(350,333,330,345);
    strokeWeight(1.5);
    stroke(0);
    line(330,345,315,348);
    
    //mouth
    arc(327,380,80,20,0-0.1*PI,PI,OPEN);
    
    //eyes
    stroke(0.5);
    fill(255);
    arc(242,230,100,40,PI,TWO_PI,OPEN);
    stroke(1);
    noFill();
    arc(242,230,100,40,0,QUARTER_PI,OPEN);
    noStroke();
    fill(255,222,171);
    ellipse(242,230,95,35);
    fill(0);
    ellipse(260,230,16,16);
    
    noStroke();
    fill(255);
    arc(390,230,100,40,PI,TWO_PI,OPEN);
    stroke(1);
    noFill();
    arc(390,230,100,40,PI,PI-QUARTER_PI,OPEN);
    noStroke();
    fill(255,222,171);
    ellipse(390,230,95,35);
    fill(0);
    ellipse(360,230,16,16);
    
    //hair
    fill(0);
    quad(137,157,127,260,150,297,170,200);
    
    //hat
    strokeWeight(1);
    fill(71,74,90);
    arc(290,140,350,250,PI-0.19*PI,TWO_PI,PIE);
    strokeWeight(9);
    stroke(7,15,55);
    fill(255,222,171);
    arc(360,160,200,120,PI,TWO_PI,OPEN);
    
    //eyebrow
    stroke(0)
    strokeWeight(8);
    line(215,180,306,175);
    line(345,179,430,175);
    
    
    
    
    
}

Siwei Xie-Project-01-Face

sketch

//Siwei Xie
//Section 1-B
//sxie1@andrew.cmu.edu
//Project-01-self portrait

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

function draw() {
	//hair
	fill(0);
	rect(115,120,270,300);

	//clothes
	fill(122,35,76);
	noStroke();
	quad(150, 391, 345, 390, 450, 500,100, 500);

	//face
	fill(232,196,131);
	noStroke();
	ellipse(250,250,250,300);

	//left eye
	fill(3,3,3);
	ellipse(200,250,40,20);

	//right eye
	fill(3,3,3);
	ellipse(300,250,40,20);

	//nose
	fill(179,149,85);
	triangle(250,260,240,300,260,300);

	//mouth
	fill(208,68,61);
	ellipse(250,345,35,15);

	//eyebrow
	stroke(0);
    push();
    strokeWeight(5)
    line(180, 230, 215, 230);
    line(320, 230, 280, 230);
    pop();

	// left eye white
	fill(255)
	noStroke();
	square(195, 245, 8);

	// right eye white
	fill(255)
	noStroke();
	square(295, 245, 8);

	// right earring
	fill(128,194,233);
	arc(370, 300, 60, 60, 15, HALF_PI);

	// left earring
	fill(128,194,233);
	arc(120, 300, 60, 60, 15, HALF_PI);

	//hat
	fill(0,0,196);
	ellipse(250,135,285,125);

	
}

I think my sketch captures my facial features. Although I don’t have an artistic background, it was fun to add accessories such as hat & earrings to my portrait.

Project-01-Face

Project-01 Face

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Assignment-01
*/

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

function draw() {
	//head
    fill(245,222,179);
    ellipse(200,300,300,400);
    //eyes
    fill(255,250,205);
    ellipse(130,300,30,30);
    ellipse(270, 300, 30, 30);
    fill(70,120,180);
    ellipse(130, 300, 20,20);
    ellipse(270, 300, 20,20);
    //eyebrows
    fill(2040,128,128);
    rect(110,250,50,7);
    rect(240, 250, 50, 7);
    //nose
    fill(173,216,230);
    rect(195, 325, 10, 30);
    //mouth
    fill(255,255,255);
    triangle(250,400,150,400,200,440);
    //hair
    strokeWeight(0);
    fill(0);
    rect(50, 170, 35, 400);
    rect(315, 170, 35,400);
    triangle(50, 170, 200, 80, 350, 170);
    

}

This product took me a long time to figure out coordinates for shapes and colors. However, I am happy I figured it out.

Margot Gersing – Project – 01

This project was a really good way for me to get more comfortable in p5js. I enjoyed the challenge of creating a simple face made from a limited selection of graphic elements. I also enjoyed using playful colors. Lastly, I decided to include a simple mouse interaction that we learned in class on Friday to add another level of interest and introduce more colors.

margot-project01



function setup() {
    createCanvas(700,700);
    // background(255,200,0);
}

function draw() {

	// background
	noStroke();
	fill('#f4cf92');
    if(mouseIsPressed){
    	fill('#6f968e');
    }else {
    	fill('#f4cf92');
    }
	rect(0,0,700,700);

	// face
	noStroke();
	fill('#d5541a');
	if(mouseIsPressed){
    	fill('#e2babf');
    }else {
    	fill('#d5541a');
    }
    ellipse(350,350,650,650);

    // left eye
    noFill();
	stroke('#e2babf');
	if(mouseIsPressed){
    	stroke('#d5541a');
    }else {
    	stroke('#e2babf');
    }
	strokeWeight(6);
    arc(200, 250, 110, 70, PI, TWO_PI);
    fill('#e2babf');
    if(mouseIsPressed){
    	fill('#d5541a');
    }else {
    	fill('#e2babf');
    }
    ellipse(200,240,50,50);

    // left eyelashes
    strokeWeight(4);
    line(150,260,135,270);
    line(160,270,150,280);
    line(170,275,165,285);

    // right eye
    noFill();
	stroke('#e2babf');
	if(mouseIsPressed){
    	stroke('#d5541a');
    }else {
    	stroke('#e2babf');
    }
	strokeWeight(6);
    arc(500, 250, 110, 70, PI, TWO_PI);
    fill('#e2babf');
    if(mouseIsPressed){
    	fill('#d5541a');
    }else {
    	fill('#e2babf');
    }
    ellipse(500,240,50,50);

    // left eyelashes
    strokeWeight(4);
    line(550,260,565,270);
    line(540,270,550,280);
    line(530,275,535,285);

    // eyebrows
    strokeWeight(8);
    line(130,150,300,150);
    line(400,150,570,150);

    // nose
    line(300,150,300,400);
    noFill();
    arc(350,400, 100, 100, QUARTER_PI, PI);

    // mouth
    strokeWeight(10);
    line(270,560,370,560);
    arc(345,560,150,70,PI,TWO_PI);    
}