Category: Project Week 1

sketch

//Sarah Ransom
//Section C 
//sransom@andrew.cmu.edu
//Self Portrait


function setup() {
    createCanvas(600, 600);
    background(255,204,150);
}

function draw() {
	noStroke();
	fill("brown");
	ellipse(200,280,60,300); //ponytail in the background

	noStroke();
	fill(255, 240, 173);
	ellipse(200,250,200,220); //face
	
	noStroke();
	fill("brown");
	arc(200, 230, 200, 180, PI, TWO_PI, OPEN); //bangs

	noStroke();
	fill("brown");
	ellipse(200,140,50,50); //"ponytail bump"

	noStroke();
	fill('#222222');
	ellipse(160,250,20,30); // left eye

	noStroke();
	fill('#222222');
	ellipse(240,250,20,30); // right eye

	noStroke();
	fill("red");
	arc(200,280,30,40,0,PI); // nose

	noFill();
	stroke(0);
	strokeWeight(3);
	arc(210,320,30,10,0,HALF_PI); //mouth

	noFill();
	stroke(0);
	strokeWeight(2);
	arc(160,265,20,7,0,PI);

	noFill();
	stroke(0);
	strokeWeight(2);
	arc(240,265,20,7,0,PI);


}

 

This portrait went in a lot of different directions before I settled on the simplest idea. I tried to make it look like I had a ponytail in the background without going for a side angle but I’m not totally happy with how it looks. Finally, I gave myself a red nose and eye bags because I have really bad year-round allergies and I thought it would be a funny/honest depiction of me on a normal day.

sketch

//Jiyoung Ahn
//Section A (9:00-10:20AM)
//jiyounga@andrew.cmu.edu
//Self Portrait


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

function draw() {
    background(247, 146, 97); 

	
//hair down left
	strokeWeight(0);
	fill(0);
	rect(130,246,140,280);

//hair down right
	strokeWeight(0);
	fill(0);
	rect(335,246,140,280);

// hair 
	strokeWeight(0);
	fill(0);
	ellipse(300,250,350,350);

// left ear
	strokeWeight(0);
	fill(243,212,197);
	ellipse(147,300,24,38);

// right ear
	strokeWeight(0);
	fill(243,212,197);
	ellipse(450,300,24,38);

// face
	strokeWeight(0);
	fill(243,212,197);
	ellipse(width / 2, height / 2, 300,300);

//left eye
	strokeWeight(0);
	fill(88,79,75);
	ellipse(250,310,25,25);	
	

//right eye
	strokeWeight(0);
	fill(88,79,75);
	ellipse(400,310,25,25);

//eyebrow left/right
	noFill();
    stroke(3);
    strokeWeight(7);
    arc(250, 275, 30, 1, PI, 0);
    arc(400, 275, 30, 1, PI, 0);

//mouth
push();
	strokeWeight(7);
  fill(244,62,96);
  stroke (244,62,96);
  arc(330,375,50,20,0,PI);
  pop();

//bang
	fill(0);
	translate(210,210);
	rotate(40);
	ellipse(0,0,200,120);
	pop();

//hair end left
	strokeWeight(0);
	fill(247, 146, 97);
	ellipse(200,520,170,50);

//hair end right
	strokeWeight(0);
	fill(247, 146, 97);
	ellipse(400,520,170,50);


    
}

*click to see it move 🙂

sketch

//Grace Cha
//Section C (Tuesdays 1:30)
//heajinc@andrew.cmu.edu
//Self Portrait 

function setup() {
    createCanvas(600,600);
    background(170,216,176);
}

function draw() {
    // Hair Top Part
    noStroke();
    fill(255,111,105);
    ellipse(315,245,284,264);
    // rightsidehair
    ellipse(374,275,192,264);
    // leftside
    ellipse(238,368,292,282);
    push();
    translate(162,300);
    rotate(-42);
    ellipse(0,0,186,82);
    pop();

    push();
    fill(170,216,176);
    translate(244,446);
    rotate(13);
    ellipse(0,0,224,125);
    pop();
    
    // head shape
    noStroke();
    fill(255,238,173);
    ellipse(315,274,234,234);
    
    // right ear
    ellipse(436,273,33,55);
    // left ear
    // left eyebrow
    push();
    translate(193,295);
    rotate(40);
    ellipse(0,0,42,49);
    pop();

    stroke(255,111,105);
    strokeWeight(8);
    line(322,219,343,199);
    line(343,199,370,204);
    // right eyebrow
    line(214,237,230,226);
    line(230,226,244,230);
    // bangs
    noStroke();
    fill(255,111,105);
    push();
    translate(276,171);
    rotate(110);
    ellipse(0,0,202,118);
    pop();
    // eyes shape
    stroke(124,171,129);
    strokeWeight(3);
    fill(255,238,173);
    ellipse(262,273,54,68); // left eye
    ellipse(364,256,54,68); // right eye
    
    // pupil
    noStroke();
    fill(124,171,129);
    ellipse(244,271,17,40);
    ellipse(346,255,17,40);
    noStroke();
    fill(124,171,129,90);
    // Rotate the nose ellipse.
    push();
    translate(317,308);
    rotate(12);
    ellipse(0,0,22,16);
    pop();
    
    // mouth
    stroke(255,111,105);
    strokeWeight(5);
    line(274,346,301,350);
    line(344,342,374,327);
    fill(255,111,105);
    // Lips
    push();
    translate(322,347);
    rotate(62.7);
    ellipse(0,0,59,17);
    pop();
    
    // MOVE THE EYES
    if (mouseIsPressed) { // watch the eyes move
        // mask the original pupil
        noStroke(); // deletes the original pupil
        fill(255,238,173);
        ellipse(244,271,17,40);
        ellipse(346,255,17,40);
        
        // eye stroke
        stroke(124,171,129);
        strokeWeight(3);
        fill(255,238,173);
        ellipse(262,273,54,68); // left eye
        ellipse(364,256,54,68); // right eye
        noStroke();
        fill(124,171,129);
        ellipse(279,270,17,40);
        ellipse(382,252,17,40);
    } 
}

---

Process Work

I originally started out with some preliminary sketches and translated that into Illustrator where I simplified it with some rotated ellipses and got the coordinate points.  I wanted to create a mischievous side face smile using a circular theme with muted colors. Using some extensions such as ‘translate();’ ‘push();’ ‘pop();’ and ‘rotate();’ (thanks to Professor Dannenberg correction).

click on me and I blink!

rhea portraitSimple p5.js Template

//Rhea Nayyar
//Section C (Tuesdays 1:30)
//rnayyar
//Self-Portrait

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

}

function draw(){
  background(193, 85, 174);
  fill(0);
  quad(160,155,350,170,395,470,145,470); //hair foundation
  fill(178, 138, 123); //neck color
  strokeWeight(0);
  rect(190,350,120,150); //neck
  ellipseMode(CORNERS);
  fill(202, 144, 104); //skin color
  strokeWeight(0);
  ellipse(150,150,350,450); //face
  fill(202, 144, 104);
  quad(180,400,324,400,265,465,235,465); //chin and jaw line
  ellipseMode(CORNERS);
  fill(217, 161, 113); //nose color
  ellipse(233,295,270,380); //nose bridge
  ellipse(230,350,273,374); //nostrils
  fill(172, 119, 115); //bottom lip color
  quad(223,415,285,415,265,430,245,430); //bottom lip
  fill(144, 83, 79); //top lip color
  quad(223,415,256,415,250,402,247,402); //top lips and cupid's bow
  quad(250,415,285,415,262,402,258,402);
  fill('black'); //regular eyes eyelashes
  ellipse(179,295,227,310); //eyelash
  ellipse(273,295,322,310); //eyelash
  fill(176, 136, 100); //eyelid color
  ellipse(235,258,270,275); //lid 1
  ellipse(245,263,267,271); //lid 2
  if (mouseIsPressed) { //blinking
    fill(0);
    ellipse(233,270,272,257); //third eye upper lashes
    fill(225);
    ellipse(235,258,270,275); //third eye
    fill(144, 106, 45);
    ellipse(245,260,260,272); //third eye iris

  } else {
    fill(0); //lower lash line 3rd eye
    ellipse(233,263,272,277);
    fill(176, 136, 100);
    ellipse(235,258,270,275); //third eye lid

}

  fill(0); //hair color
  ellipse(179,295,227,310); //eyelash
  ellipse(273,295,322,310); //eyelash
  quad(190,190,344,235,328,175,195,145); //quads are hair and eyebrows
  quad(175,165,360,310,335,160,225,140);
  quad(175,156,165,350,130,250,160,160);
  quad(350,165,365,178,400,190,350,430);
  quad(350,450,400,415,420,540,365,520);
  quad(140,400,175,430,200,520,130,530);
  quad(115,350,150,250,170,450,105,420);
  quad(100,250,200,160,150,400,145,460);
  quad(180,287,222,283,218,272,185,281);
  quad(287,272,322,287,318,281,285,285);
  quad(285,250,360,275,420,350,400,400);
  fill(176, 136, 100); //eyelid color
  ellipse(180,290,225,308); //eyelids
  ellipse(275,290,320,308);


}

janet-portrait

//Janet Lee
//Section C
//janetl2@andrew.cmu.edu
//Self Portrait




function setup() {
  createCanvas (600,600);
  background ("beige");


}

function draw() {
  noStroke()
  //hair
  fill ("gold");
  ellipse (300,300,490,550);
  //head
  fill (255,214,160);
  ellipse (300,250,400);
  //left eye
  fill(0);
  ellipse (200,300,50);
  //right eye
  fill(0);
  ellipse (400,300,50);
  //bangs
 push();
  fill ("gold");
  rotate (75);
  ellipse (150,250,400,210);
  pop();

  //right eyebrow
  fill(0);
  stroke (0);
  strokeWeight (3);
  ellipse(410,250,60,10);

  //mouth
  noFill();
  stroke (0);
  strokeWeight(3);
  arc(300,380,30,10,0,PI);





}

My process involved a great deal of trial and error, as I’m sure is true for most of the class. I found utilizing arcs to be very tricky, and my attempts at curves complete failures. Even with this post elements that showed up in my browser (such as the eyes) have disappeared and a handful of the features (the mouth and eyebrows) have been become yellow instead of black.
Still, it’s uncanny.

SEckert-face

//Stephen M. Eckert
//Section C
//SEckert@andrew.cmu.edu
//Project 01 Face


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

function draw() {
	background('grey');
  noStroke()
    fill ('black')
      rect (20, (height-100), 360, 150, 50) //body
    fill (255, 234, 196);
      arc (((width/2)-90), ((height/2)-50), 70, 70, 0, PI+PI/2, OPEN); //ears
      arc (((width/2)+90), ((height/2)-50), 70, 70, 80, PI, OPEN);
    fill (255, 211, 164);
      arc (((width/2)-85), ((height/2)-50), 65, 65, 0, PI+PI/2, OPEN); //ears shade
      arc (((width/2)+85), ((height/2)-50), 65, 65, 80, PI, OPEN);
    fill (255, 234, 196);
      ellipse ((width/2), ((height/2)-30), 220, 270); //chin
    fill ('black');
      ellipse (((width/2)-50), ((height/2)-50), 20, 20); //eyes
      ellipse (((width/2)+50), ((height/2)-50), 20, 20);
    fill (255, 211, 164);
      triangle (((width/2)-15), ((height/2)+10), (width/2), ((height/2)-30), ((width/2)+15), ((height/2)+10)); //nose
      ellipse ((width/2), ((height/2)+80), 40, 20);
    fill (255, 214, 68);
      rect (((width/2)-30), ((height/2)+15), 60, 20, 20, 20, 0, 0); //mustache
    stroke(4);
      ellipseMode (CENTER);  // poofy hair
      ellipse ((width/2+25), ((height/2)-145), 60, 60);
      ellipse ((width/2+30), ((height/2)-160), 80, 80);
      ellipse (((width/2)-20), ((height/2)-150), 70, 70);
      ellipse ((width/2), ((height/2)-170), 60, 60);
      ellipse ((width/2+20), ((height/2)-130), 40, 40);
      ellipse ((width/2-30), ((height/2)-165), 40, 40);
    fill ('black');
      rect (((width/2)-10), ((height/2)+40), 20, 5, 20); //mouth
      rect (((width/2)-65), ((height/2)-70), 30, 5) //eyebrows
      rect (((width/2)+35), ((height/2)-85), 30, 5)



      noLoop()
}

dconnoll-01

// Diana Connolly
// Section C, Tuesdays at 1:30
// dconnoll@andrew.cmu.edu
// Project-01

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

function draw() {
	background(187,245,180);
	


	//Hair
	fill(102, 64, 46);  
	noStroke();  
	rect(150, 40, 300, 400, 150, 150, 0, 0);

	//Face
	fill(220, 154, 122);  
	noStroke();  
	ellipse(300, 237, 255,325);

	//Right Bang
	fill(102, 64, 46);  
	noStroke();  
	arc(450, 59, 260, 320, PI/2.0, PI, OPEN);
	fill(102, 64, 46);  
	noStroke();  
	arc(320, 180, 240, 240, PI+PI/2.2, PI/8.6, OPEN);

	//Left Bang
	fill(102, 64, 46);  
	noStroke();  
	arc(150, 59, 345, 320, 0, PI/2.0, OPEN);
	fill(102, 64, 46);  
	noStroke();  
	arc(289, 180, 240, 240, PI-PI/9.8, PI+PI/1.6, OPEN);

	//Ears
	fill(220, 154, 122);  
	noStroke();  
	ellipse(167, 245, 60,60);
	fill(220, 154, 122);  
	noStroke();  
	ellipse(432, 245, 60,60);

	//Nose
	fill(205, 138, 107);  
	noStroke();  
	ellipse(300, 257, 25,75);
	fill(205, 138, 107);  
	noStroke();  
	ellipse(300, 287, 45,23);

	//Mouth
	fill(181,83,70);
	arc(300, 330, 80, 40, TWO_PI, PI, OPEN);

	//Eyes
	fill(0);  
	noStroke();  
	ellipse(230, 237, 25,35);
	ellipse(370, 237, 25,35);




}

For this piece, I wanted to mimic flat design with simple shapes and blocks of color. I began with the head and hair, and added in more feature details as I went along.

kdlee-project01

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

function draw() {

    noStroke();
//CIRCLE
//    fill('#BCE8F9'); TEST BLUE
//    fill('#A5C8F1'); TEST BLUE
    fill('#CDE9F3'); //BLUE VIGNETTE
    ellipseMode(CENTER);
    ellipse(300,300,300,300);

//HAIR
    fill(0);
    ellipseMode(CORNER);
    ellipse(270,200,80,70);
    ellipse(250,240,30,30);
//HAIR STRAND
    noFill();
    stroke(0);
    strokeWeight(1.5);
    arc(267, 200, 10, 40, HALF_PI, 0+PI);
    arc(250, 234, 20, 20,HALF_PI+PI,0);


    noStroke();
//NECK
    fill('#D1A773');//DARK SKIN TONE
    rect(285,350,30,50);

//FACE
    fill('#F0C084');//SKIN TONE
    ellipseMode(CENTER);
    ellipse(width / 2,height / 2,100,150);

//EARS
    fill('#F0C084');//SKIN TONE
    ellipseMode(CENTER);
    ellipse(250,300,10,30);
    ellipse(350,300,10,30);

//SHIRT
    fill('#354053');//BLUE
    arc(300, 405, 75, 50, PI, 0);
//BUTTONS
    fill(240);
    ellipse(300,385,3,3);
    ellipse(300,395,3,3);

//MOUTH
    noFill();
    stroke(1);
    strokeWeight(4);
    arc(300, 335, 25, 12, 0, PI);

//EYES
    noFill();
    stroke(1);
    strokeWeight(4);
    arc(315, 285, 10, 2, PI, 0);
    arc(285, 285, 10, 2, PI, 0);

    noloop()
}

Since I currently only have a basic vocabulary of code to create shapes and draw, I spent a lot of time abstracting the form of the face to be as simple as possible. I tried to look at what basic features of the face (and mine in particular) make the drawing recognizable as a human face belonging to me.

sketch

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

function draw() {
	background(245,198,213);
    fill(202,148,92);
    stroke(202,148,92);
    strokeWeight(3);
    rect(136.3,246,170,300); //hair rectangle left
    ellipse(250,235,227,220); //hair blob left
    rect(300,271,172,300); //hair rectangle right
    ellipse(338,255,270,300); //hair blob right
    
    fill(255,72,100);
    stroke(255,72,100);
    strokeWeight(5);
    rect(230,450,138,200); //neck
    rect(89.7,555,421.7,100); //main shoulder block
    ellipse(200,550,219,100); //shoulder hump left
    ellipse(403,551.4,218,100); //shoulder hump right
	fill(255,226,206);
	stroke(255,226,206); //outline for all circles in face
	strokeWeight(4);
    ellipse(300,300,275,350);
    fill(255,226,206); //ear fill
    ellipse(162,300,50,75); //left ear
    ellipse(440,300,50,75); //right ear
    fill(255,193,193); //cheek color
    ellipse(226,340,90,90); //left cheek
    ellipse(375,340,90,90); //right cheek
    fill(255,226,206); //chin color - same as skintone
    ellipse(300,425,115,115); //chin circle
    
    fill(202,148,92);
    quad(200,245,215,230,260,230,280,245);
    quad(320,245,345,230,390,230,402,245);
    fill(202,148,92);
    stroke(202,148,92);
    strokeWeight(3);
    triangle(274,126,360,111,455,265);
    triangle(155,179,163,258,268,127);
    fill(255); //eyeball white fill
    stroke(255);
    strokeWeight(4);
    ellipse(240,268,50,25);
    ellipse(360,268,50,25);
    fill(83,75,44); //eye line
    stroke(255,226,206);
    strokeWeight(.5);
    ellipse(240,284,60,17);
    ellipse(360,284,60,17);
    stroke(0,129,172);
    strokeWeight(4);
    ellipse(241,270,20,20); //eye circle little
    ellipse(360,270,20,20);
    fill(255,226,206);
    stroke(255,226,206);
    strokeWeight(3);
    ellipse(240,287,60,10);
    ellipse(360,287,60,10);
    fill(202,148,92);
    stroke(202,148,92);
    strokeWeight(3);
    
    fill(255,196,170);
    stroke(255,196,170);
    strokeWeight(3);
    triangle(280,375,300,300,320,375); //nose
    fill(202,148,118); //nostril fill
    stroke(255,196,170);
    strokeWeight(6);
    ellipse(315,370,14,14); //right nostril
    ellipse(285,370,14,14); //left nostril
    fill(255,70,105);
    stroke(255,70,105);
    strokeWeight(3);
    ellipse(285,410,33,25); //lip bud
    ellipse(315,410,33,25); //lip bud
    fill(250,124,139);
    stroke(250,124,139);
    strokeWeight(3);
    quad(268,410,275,425,325,425,332,410); //bottom lip
    
    fill(232,172,96);
    stroke(232,172,96);
    strokeWeight(3);
    ellipse(200,350,5,5);
    ellipse(215,330,5,5);
    ellipse(205,320,5,5);
    ellipse(220,360,5,5);
    ellipse(243,318,5,5);
    ellipse(233,330,5,5);
    ellipse(227,310,5,5);
    ellipse(400,350,5,5);
    ellipse(390,340,5,5);
    ellipse(360,320,5,5);
    ellipse(370,345,5,5);
    ellipse(395,323,5,5);
    ellipse(405,329,5,5);
    
    fill(165,116,77);
    stroke(165,116,77);
    strokeWeight(5);
    line(462,360,462,505); //start of right dark hair lines
    line(450,385,450,501);
    line(435,420,435,498);
    line(420,435,420,498);
    line(405,445,405,497);
    line(390,455,390,497);
    line(378,465,378,497);
    line(145,360,145,503); //start of left dark hair lines
    line(156,385,156,500);
    line(170,420,170,496);
    line(185,435,185,495);
    line(198,445,198,495);
    line(210,455,210,495);
    line(220,465,220,496);

    noLoop();
}

My goal from the beginning was to use the basic shapes in a way that would be interesting, rather than just boringly simple. I tried to stay within a color family of neutrals and pinks, and I mainly used ellipses for consistently round edges. My process was building upwards from the hair at the very back layer, to the face and the facial features, and finally some of the last detail elements like freckles and strands within the hair.