Category: 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!

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.

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!