Category: Project-01-Face

DeLuna-Portrait

//Jennifer DeLuna
//Section B
//jdeluna@andrew.cmu.edu
//Assignment 01
function setup() {
    createCanvas(600, 600);
    background(220);

}

function draw() {
  background(150, 218, 247)
  //hair
  fill(132, 45, 10);
  rect(187,190,221,275,100,50,20,20)

  //Shirt
  fill(73, 136, 237)
  rect(185,407,224,100,40)

  //neck
  strokeWeight(0)
  fill(225, 171, 137)
  ellipse(300,400,40,60);
  fill(182,93,47)
  ellipse(300,400,40,15)

  //ear
  fill(225, 171, 137)
  ellipse(250,250,20,20);

  //Face
  fill(225, 171, 137)
  strokeWeight(0);
  ellipse(width/2,height/2,200,200);

  //Hair in front of face
  fill(132, 45, 10);
  ellipseMode(40)
  ellipse(350,233,100,75);
  fill(132,45,10)
  rect(260,200,120,50,10,30,300);
  rect(220,210,50,30,100,10,100,10);
  ellipse(260,210,10,10);

  //Outer ear
  fill(225, 171, 137)
  ellipse(197,300,20,40)

  //Inner Ear
  fill(226, 144, 100)
  ellipse(197,300,12,30)

  //Earring
  fill(200)
  ellipse(195,317,10,10)

  //Eyes
  fill(226, 144, 100)
  ellipse(250,303,20,20);
  ellipse(350,303,20,20)
  fill(0)
  ellipse(250,300,20,20)
  ellipse(350,300,20,20);
  strokeWeight(2)
  fill(0)
  line(242,295,240,290)
  fill(0)
  line(358,295,360,290)

  //nose
  strokeWeight(0)
  fill(226, 144, 100)
  triangle(287,325,313,325,300,295);
  fill(182,93,47)
  triangle(300,325,313, 325, 300, 295)

  //mouth
  fill(175, 59, 43)
  ellipse(317,355,20,20)
















}

This was a fun project to get a better grasp on using these different shapes and bettering my understanding of this program. I enjoyed trying to simplify my facial features to shapes to create this little portrait.

face

/*
Robert Oh
Section C
rhoh@andrew.cmu.edu
Project-01
*/

function setup() {
  createCanvas(600, 600);
  background(68, 149, 255);
}

function draw() {
  // face
  strokeWeight(0);
  fill(0, 0, 0);
  ellipse(300, 300, 200, 240);
  fill(255, 230, 189);
  rect(288, 400, 25, 40)
  ellipse(300, 312, 200, 220);

  // hair
  fill(0,0,0);
  arc(312, 212, 105, 70, PI, 0)
  arc(301, 210, 60, 10, 0, PI)

  // eyes
  strokeWeight(0);
  fill(255, 255, 255);
  ellipse(260, 270, 35, 6);
  ellipse(330, 270, 35, 6);
  fill(0, 0, 0);
  ellipse(265, 268, 18, 8);
  ellipse(335, 268, 18, 8);
  ellipse(240, 285, 2, 2);
  arc(260, 275, 30, 1, 7*PI/4, PI);
  arc(331, 275, 30, 1, 7*PI/4, PI);
  fill(255,255,255);
  ellipse(268, 266, 6, 4);
  ellipse(338, 266, 6, 4);

  // eyebrows
  fill(0, 0, 0)
  quad(237, 254, 250, 240, 250, 246, 237, 255);
  quad(250, 240, 274, 242, 272, 245, 250, 246);
  quad(353, 254, 338, 240, 338, 246, 353, 255);
  quad(338, 240, 314, 242, 316, 245, 340, 246);

  // mouth
  arc(299, 360, 85, 70, -PI/32, PI - PI/32);
  fill(244, 66, 86);
  ellipse(300, 388, 40, 15);
  fill(0, 0, 0)
  arc(348, 360, 3, 10, 3*PI/2, PI/2);
  arc(250, 368, 3, 10, PI/2, 3*PI/2);
  fill(255, 255, 255);

  // teeth
  strokeWeight(0);
  arc(334, 356, 10, 15, -PI/32, PI - PI/32);
  arc(324, 357, 10, 15, -PI/32, PI - PI/32);
  arc(314, 358, 10, 15, -PI/32, PI - PI/32);
  arc(304, 359, 10, 16, -PI/32, PI - PI/32);
  arc(294, 360, 10, 15, -PI/32, PI - PI/32);
  arc(284, 361, 10, 15, -PI/32, PI - PI/32);
  arc(274, 362, 10, 15, -PI/32, PI - PI/32);
  arc(264, 363, 10, 15, -PI/32, PI - PI/32);

  // nose
  fill(255, 210, 96);
  quad(300, 305, 310, 315, 310, 320, 300, 320)
  //arc(300, 315, 20, 20, PI, 0)

  //body
  strokeWeight(0);
  fill(10, 15, 114);
  arc(300, 610, 200, 350, PI, 0);
  strokeWeight(1);
  fill(255, 255, 255);
  rect(258, 500, 85, 6)
  rect(258, 520, 85, 6)
  rect(258, 540, 85, 6)
  rect(258, 560, 85, 6)
  rect(258, 580, 85, 6)
  fill(68, 149, 255)
  noStroke();
  quad(258, 500, 240, 550, 230, 600, 258, 600)
  quad(343, 500, 361, 550, 371, 600, 343, 600)
  quad(258, 500, 260, 520, 262, 555, 258, 600)
  quad(343, 500, 341, 520, 339, 555, 343, 600)
}

When I first sat down and started thinking of ideas for this project, I wanted to be straight-forward and focus on my most prominent features. I’d say that one of my most unique traits is my laughing smile, since I love telling jokes and having fun. I was able to recreate this by adding in my wide, slightly-crooked smile, my squinched-up eyes, and my dimples.

Face sketch

//Sara Frankel
//9:30
//sfrankel@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 600);
    background(165,212,157);
}

function draw() {

	//head
	fill(77,47,23);
	arc(300, 500, 460, 770, PI, TWO_PI);
	fill('tan');
	ellipse(300,300,300,350);
	fill(77,47,23)
	arc(300, 180, 230, 110, PI, TWO_PI);
	
	//eyebrows
	fill(77,47,23);
	ellipse(230,220,90,10);
	ellipse(370,220,90,10);

	//glasses
	noFill();
	arc(300, 280, 20, 20, PI + QUARTER_PI, TWO_PI);
	fill('red');
	ellipse(235,280,120,120);
	fill('red');
	ellipse(365,280,120,120);

	fill('tan');
	ellipse(235,280,100,100);
	fill('tan');
	ellipse(365,280,100,100);

	//left eye
	fill('white')
	ellipse(235,270,60,40)

	//right eye
	fill('white');
	ellipse(365,270,60,40);
	//ellipse(mouseX,300,mouseX,395)

	//nose
	line(300,300,320,350);
	line(300,350,320,350); 

	//left eyeball
	fill('blue');
	ellipse(245,270,30,30);
	fill(51);
	ellipse(250,270,20,20);
	fill('white');
	ellipse(243,260,5,5);

	//right eyeball
	fill('blue');
	ellipse(375,270,30,30);
	fill(51);
	ellipse(380,270,20,20);
	fill('white');
	ellipse(373,260,5,5);

	//mouth
	noFill();
	arc(300,390,60,60,0,PI);





}

My process for this project was to first figure out what kind of aesthetic I wanted my portrait to be (i.e. more bubble character vs. a more lined out character).  I also had to figure out which shapes and coordinates I predominately wanted to use to replicate my face.

kzr-project01

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_01*/
function setup() {
    createCanvas(500, 525);
    background(50,50,50);
}

function draw() {
    //ears
    fill(183,128,100);
    arc(395,260,40,80,PI+HALF_PI,HALF_PI,PIE);
    arc(105,260,40,80,HALF_PI,PI+HALF_PI,PIE);
    //face
    fill(219,182,156);
    strokeWeight(1);
    quad(100,150,400,150,390,430,110,430);
    //neck and body
    rect(200,430,100,95);
    stroke(0);
    line(200,430,300,430);
    //hair
    fill(79,48,35);
    noStroke();
    quad(100,150, 250,90,440,78,420,150);
    triangle(100,150,420,150,100,170);
    stroke(0);
    //nose
    noStroke();
    fill(183,128,100);
    triangle(250,240,275,320,225,320);
    arc(250,320,60,50,PI,2*PI,PIE);
    //mouth
    stroke(0);
    strokeWeight(1);
    fill(255);
    arc(250, 350, 160, 80, 0, PI, PIE);
    line(170,350,330,350);
    //eyebrows
    stroke(79,48,35);
    strokeWeight(3);
    line(150,200,200,205);
    line(300,205,350,200);
    //eyes
    stroke(0);
    strokeWeight(2);
    ellipse(175,230,50,20);
    ellipse(325,230,50,20);
    noStroke();
    fill(0);
    ellipse(175,230,20,20);
    ellipse(325,230,20,20);
}

I have never written code before, so this was pretty hard for me, but by the time I finished I felt much more comfortable with how to add shapes, and what order to write stuff in.

sketch-169.js

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project-01 */

function setup() {
    createCanvas(500, 600);
    background(1,92,180);
}

function draw() {
    noStroke();
    // face and neck
    fill(217,174,90);
    rect(58,400,100,50);
    ellipse(110,260,240,310);
    // eyes (white)
    fill(244,242,230);
    arc(60,250,80,80,0,PI,OPEN);
    arc(160,250,80,80,0,PI,OPEN);
    // eyes (black)
    fill(10,10,10);
    arc(66,250,40,40,0,PI,OPEN);
    arc(155,250,40,40,0,PI,OPEN);
    // eyes (small dots)
    fill(150);
    ellipse(68,255,10,10);
    ellipse(160,255,10,10);
    // mouth
    fill(219,37,26);
    ellipse(110,367,97,20);
    // nose
    fill(166,127,44);
    rect(115,280,4,50);
    // hair
    fill(223,195,114);
    arc(50,130,250,250,0,PI);
    ellipse(110,130,240,120);
    arc(180,130,200,200,0,PI+QUARTER_PI,PIE);
    // shirt
    fill(129,204,235);
    quad(58,450,158,450,230,500,-20,500);
    rect(-10,560,238,50);
    fill(220,220,220);
    rect(-10,500,238,60);
}

It was my first time programming and I thought it was impossible to draw a face using codes. Figuring out the coordinates and color parameters, I slowly understood how programming works, and the portrait turned out better than I expected.

sketch

function setup() {
    createCanvas(600, 600);
    background(232, 232, 229);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
	createCanvas(600, 600);
	background(245);
    

   
    //background
   strokeWeight(0);
    fill(0,42,178);
    ellipse(300,200,500,500);
    



    //hair
    stroke(244,176,163);
    line(264,212,264,230);
    noSmooth();
    fill(10);
    stroke(10);
    rect(225,210,110,155,150,40,10,10);
    noSmooth();
    fill(10);
    rect(235,200,140,165,150,150,10,10);
  


    
    //Ears
    fill(244,176,163);
    strokeWeight(0);
    ellipse(235,305,18,23);
    ellipse(365,305,18,23);
    fill(231,98,83);
    ellipse(235,305,13,18);
    ellipse(365,305,13,18);


   //arms
   fill(244,176,163);
   strokeWeight(0);
   rect(220,507,165,200);


   //body
   noSmooth();
   strokeWeight(0);
   fill(255);
   rect(233,365,140,300,55,55,130,130);
   triangle(236,400,202,507,235,507);
   triangle(370,400,406,507,372,507);
  
    
   
    //face
    noSmooth();
    strokeWeight(0);
    fill(244,176,163);
    rect(235,220,130,135,90,90,130,130);
    rect(290,350,20,20);
    arc(300,370,20,20,0,PI,OPEN);
    fill(10);
    triangle(265,230,240,231,236,278);
    fill(10);
    arc(267,287,22,22,0,PI,OPEN);
    strokeWeight(4)
    stroke(10);
   strokeWeight(0);
    arc(335,287,22,22,0,PI,OPEN);
    fill(270);
    arc(267,287,10,10,0,PI,OPEN);
    arc(335,287,10,10,0,PI,OPEN);



    //Mouth
    fill(231,98,83);
    ellipse(300,320,15,7);







    
    





}

I have never coded before in my life and as a architecture student my understandings for coding was always just the skeleton beneath the software we use to create art and design, not like something that can be the tool itself to create art pieces. Creating my self portrait helped me look at coding from a complete different angle.

Project 01

/*Carley Johnson
Section E
cbjohnso
Project 01
*/

function setup() {
    createCanvas(600, 600);
    background(166, 210, 251);
    
}

function draw() {
	
	var c = color(47, 96, 163); 
	fill(c)
	stroke(75, 107, 168)
    strokeWeight(7)
	rect(120, 100, 350, 320, 300, 300, 100, 100) //back hair
	
	var c = color(255, 230, 220); 
	fill(c)
	stroke(255, 218, 221)
    strokeWeight(10)
	rect(175, 200, 250, 200, 0, 0, 300, 300) //face

	var c = color(255, 213, 226)
	fill(c)
	noStroke()
	ellipse(222, 290, 95, 95) //left cheek

	var c = color(255, 213, 226)
	fill(c)
	noStroke()
	ellipse(377, 290, 95, 95) //right cheek

	var c = color(47, 96, 163); 
	fill(c)
	stroke(color(47, 71, 118));
	strokeWeight(2)
	rect(150, 100, 300, 170, 300, 300, 300, 0) //Bangs

	var c = color(97, 61, 44); 
	fill(c)
	stroke(97, 61, 44);
	bezier(210, 250, 240, 225, 260, 225, 270, 240) //left eyebrow

	stroke(110, 41, 33)
	line(210, 250, 270, 240)

	var c = color(97, 61, 44); 
	fill(c)
	stroke(97, 61, 44);
	bezier(330, 240, 340, 225, 360, 225, 390, 250) //right eyebrow
	
	stroke(110, 41, 33)
	line(330, 240, 390, 250)

	var c = color(0, 130, 201); 
	fill(c)
	ellipse(250, 270, 40, 40); //outer eye left

	var c = color(0, 130, 201); 
	fill(c)
	ellipse(350, 270, 40, 40); //outer eye right

	var c = color(41, 41, 35); 
	fill(c)
	ellipse(250, 270, 20, 20) //inner eye left

	var c = color(41, 41, 35); 
	fill(c)
	ellipse(350, 270, 20, 20) //inner eye right

	var c = color(255, 213, 226); 
	fill(c)
	noStroke()
	ellipse(250, 290, 40, 25) //under eye left

	var c = color(255, 213, 226); 
	fill(c)
	noStroke()
	ellipse(350, 290, 40, 30); //under eye right

	var c = color(255, 166, 169)
	fill(c)
	noStroke()
	ellipse(289, 305, 10, 10) //nose left

	var c = color(255, 166, 169)
	fill(c)
	noStroke()
	ellipse(311, 305, 10, 10) //nose right


	var c = color(255, 227, 221)
	fill(c)
	stroke(255, 166, 169)
	ellipse(300, 305, 20, 15) //nose bridge

	var c = color(255, 166, 169); 
	fill(c)
	stroke(255, 166, 169);
	bezier(300, 350, 310, 365, 315, 365, 370, 330) //Lower lip

	var c = color(255, 119, 151); 
	fill(c)
	stroke(255, 119, 151);
	line(300, 350, 370, 330) //upper lip

	var c = color(255, 119, 151); 
	fill(c)
	stroke(255, 119, 151);
	line(301, 352, 370, 330) //middle upper lip

	var c = color(255, 119, 151); 
	fill(c)
	stroke(255, 119, 151);
	line(303, 353, 370, 330) //lower upper lip

	var c = color(40, 41, 35)
	fill(c)
	stroke(40, 41, 35)
	line(230, 265, 225, 260) //left eyelash 1
	
	var c = color(40, 41, 35)
	fill(c)
	stroke(40, 41, 35)
	line(235, 257, 230, 252) //left eyelash 2

	var c = color(40, 41, 35)
	fill(c)
	stroke(40, 41, 35)
	line(242, 252, 237, 247) //left eyelash 3

	var c = color(40, 41, 35)
	fill(c)
	stroke(40, 41, 35)
	line(370, 265, 375, 260) //right eyelash 1

	var c = color(40, 41, 35)
	fill(c)
	stroke(40, 41, 35)
	line(367, 257, 372, 253) //right eyelash 2

	var c = color(40, 41, 35)
	fill(c)
	stroke(40, 41, 35)
	line(360, 252, 365, 247) //right eyelash 3

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(375, 280, 2, 2) //begin freckles

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(305, 289, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(299, 287, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(294, 293, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(287, 289, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(280, 295, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(274, 297, 2, 2) //where I stopped

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(260, 289, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(321, 289, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(358, 295, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(389, 292, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(337, 290, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(343, 283, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(350, 289, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(350, 300, 2, 2)

	var c = color(114, 62, 36)
	fill(c)
	stroke(114, 62, 36)
	ellipse(363, 289, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(370, 289, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(375, 292, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(250, 285, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(235, 289, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(247, 289, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(242, 298, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(255, 296, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(229, 289, 2, 2)


    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(225, 291, 2, 2)

    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(305, 280, 2, 2)

    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(291, 283, 2, 2)

    var c = color(114, 62, 36)
    fill(c)
    stroke(114, 62, 36)
    ellipse(275, 291, 2, 2) //end freckles

    noFill()
    stroke(125, 126, 126)
    bezier(307, 298, 314, 298, 315, 312, 308, 312) //nose ring

    var c = color(52, 92, 56)
    fill(c)
    stroke(42, 67, 40)
    rect(180, 405, 190, 195, 0, 0, 0, 0) //undershirt

    var c = color(255, 210, 226)
    fill(c)
    stroke(42, 67, 40)
    strokeWeight(4)
    bezier(263, 406, 290, 440, 330, 440, 340, 406) //throat

    stroke(255, 165, 170)
    strokeWeight(3)
    line(264, 404, 338, 404) //throat

    var c = color(52, 92, 56)
    fill(c)
    stroke(42, 67, 40)
    strokeWeight(5)
    rect(170, 390, 75, 207, 100, 100, 0, 0) //left arm
    
    var c = color(52, 92, 56)
    fill(c)
    stroke(42, 67, 40)
    strokeWeight(5)
    rect(350, 375, 70, 180, 100, 100, 0, 0) //upper right arm

    var c = color(66, 119, 73)
    fill(c)
    stroke(52, 92, 56)
    bezier(330, 600, 375, 480, 455, 480, 410, 600) //right forearm






}

I’m glad I started this project early, because fiddling with where things fell on the grid was the toughest part of the project. I’m self-conscious about my skill level, and am excited but nervous to see everyone else’s, and pleased that I feel as if I actually know why I am inputing certain things and why those things are outputting what they are. I wish there was a grid so I could track exact points instead of trial-and-error with scootching one number at a time.