Category: Project-01-Face

Self Portrait

max-self portrait

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

function draw() {
    strokeWeight(0); //background color
    fill(199,216,199);
    rect(0,0,350,450);

    fill(243,185,143);       //face shape
    ellipse(175,225,180,220);
    fill(243,185,143);
    circle(175,150,180);

    fill(46,38,34);         //eyebrows
    ellipse(130,140,50,15);
    ellipse(108,147,15,20);
    ellipse(220,140,50,15);
    ellipse(240,147,15,20);


    stroke(243,234,185);
    strokeWeight(3);
    fill(64,63,65);    //glasses
    circle(130,175,65);
    fill(64,63,65);
    circle(220,175,65); 

    stroke(243,234,185);  //glasses bridge
    strokeWeight(3);
    point(165,175);
    point(170,172.5);
    point(175,172);
    point(180,172.5);
    point(185,175);


    strokeWeight(0);
    fill(243,185,143);    //ears
    ellipse(75,195,45,80);
    fill(243,185,143);
    ellipse(277,195,45,80);


    fill(46,38,34);
    rect(90,50,170,50); //hair
    circle(100,80,50);
    circle(100,95,40);
    ellipse(85,135,20,50);
    circle(90,100,30);
    circle(85,102,20);
    circle(135,95,50);
    circle(100,75,60);
    circle(120,70,60); 
    circle(150,60,70);
    circle(160,55,50);
    circle(175,60,70);
    circle(180,70,70);
    circle(190,60,60);
    circle(200,75,50);
    circle(210,70,60);
    circle(215,80,50);
    circle(225,70,60);
    circle(240,70,50);
    circle(225,52,50);
    circle(245,70,45);
    circle(245,65,50);
    circle(250,75,40);
    circle(250,85,30);
    circle(255,90,40);
    ellipse(265,120,20,50);
    circle(265,140,20);
    circle(265,145,15);
    circle(265,155,10);
    circle(265,120,30);
    circle(85,160,10);
    circle(85,120,30);
    circle(85,135,23);


    fill(46,38,34);
    ellipse(85,200,8,100);  //beard
    ellipse(265,200,8,100);
    circle(87,245,10);
    circle(87,247,13);
    circle(87,250,15);
    circle(85,240,10);
    circle(89,255,17);
    circle(91,260,18);
    circle(94,270,20);
    circle(95,275,22);
    circle(96,280,24);
    circle(98,285,26);
    circle(100,290,27);
    circle(101,295,27);
    circle(102,300,28);
    circle(105,305,28);
    circle(110,310,28);
    circle(112,315,29);
    circle(115,318,29);
    circle(120,322,30);
    circle(125,328,31);
    circle(128,335,31);
    circle(135,337,32);
    circle(140,338,32);
    circle(145,339,32);
    circle(150,340,33);
    circle(160,341,34);
    circle(165,342,34);
    circle(170,341,34);
    circle(175,341,33);
    circle(180,340,33);
    circle(185,339,33);
    circle(190,338,33);
    circle(195,336,32);
    circle(200,335,32);
    circle(205,332,32);
    circle(210,330,32);
    circle(215,328,32);
    circle(220,325,31);
    circle(225,320,31);
    circle(230,315,31);
    circle(235,310,34);
    circle(240,305,30);
    circle(235,300,28);
    circle(240,295,28);
    circle(245,290,28);
    circle(245,285,27);
    circle(246,280,27);
    circle(247,275,26);
    circle(248,270,24);
    circle(249,265,23);
    circle(250,260,22);
    circle(252,265,22);
    circle(253,260,22);
    circle(254,255,20);
    circle(255,250,19);
    circle(260,245,15);
    circle(258,240,15);
    circle(258,235,14);
    circle(259,230,12);
    circle(262,225,10);

    ellipse(145,260,40,13); //mustache
    ellipse(200,260,40,13);
    circle(159,258,13);
    circle(185,258,13);
    ellipse(127,268,10,20);
    ellipse(218,268,10,20);
    ellipse(172,300,8,20);
    circle(172,290,10);



    





















    
    

    






}

For this project, I spent a lot of time using trial and error to figure out how I wanted to create the hair. Overall, I’m happy with how it turned out, and I went for a more simplistic look.

Project 1: My Self-Portrait

luca-portrait

function setup() {
    createCanvas(1000, 1000);
    background(180);
}

function draw() {
    background(171,130,130)
    text("Luca's portrait",15,20)

    //hoodie
    fill(61,64,91)
    ellipse(500,700,500,200)
    fill(229,229,229)
    ellipse(500,700,450,200)


    //body
    fill(244,241,222)
    rect(450,765,100,245)//shirt
    fill(61,64,91)
    rect(280,765,200,245)//bodyr
    fill(61,64,91)
    rect(550,765,200,245)//bodyl
    fill(61,64,91)
    ellipse(270,840,150,150)//shoulderr
    fill(61,64,91)
    ellipse(738,840,150,150)//shoulderl
    fill(61,64,91)
    rect(210,850,120,200)//armr
    fill(61,64,91)
    rect(730,780,190,120)//upperarm
    fill(61,64,91)
    rect(800,500,120,290)//arm
    fill(255,215,215)
    rect(800,400,100,100)//hand
    fill(34,19,17)
    rect(580,900,100,10)//pocket
    fill(224,122,95)
    rect(600,850,10,50)//pen

     //facefeatures
    fill(34,19,17)
    ellipse(500,420,500,400)//hair1
    fill(255,215,215)
    ellipse(500,520,450,470)//head
    fill(255,255,255)
    ellipse(400,525,100,50)//eyeright
    fill(34,19,17)
    ellipse(380,525,40,30)//pupilright
    fill(255,255,255)
    ellipse(600,525,100,50)//eyeleft    
    fill(34,19,17)
    ellipse(580,525,40,30)//pupilleft
    fill(34,19,17)
    rect(345,455,100,20)//browr
    fill(34,19,17)
    rect(550,440,100,20)//browl
    fill(255,210,218)
    rect(480,510,50,100)//noseb
    fill(255,210,218)
    ellipse(506,600,60,55)//nose

    fill(34,19,17)//hair
        ellipse(500,310,60,60)
        ellipse(480,330,60,60)
        ellipse(530,310,60,60)
        ellipse(560,320,60,60)
        ellipse(600,300,60,70)
        ellipse(460,300,60,60)
        ellipse(430,300,60,60)
        ellipse(400,310,60,60)
        ellipse(370,300,60,60)
        ellipse(320,360,60,60)
        ellipse(340,330,60,60)
        ellipse(600,330,60,60)
        ellipse(620,330,60,60)
        ellipse(630,340,60,60)
        ellipse(650,330,60,60)
        ellipse(680,350,60,60)
        ellipse(690,370,60,60)
        ellipse(700,400,60,60)
        ellipse(710,420,60,60)
        ellipse(300,400,60,60)

    fill(34,19,17)
    stroke(0)
    strokeWeight(5)
    line(450,700,550,700)
    noloop();

}

Locating and finding the right coordinates on the canvas was quite challenging for me. I also spent a lot of time trying to find the right lines of code when I was making changes. However, I made things easier when I used “//” to label each graphic element.

Also, I checked my HTML code used to embed p5.js, and the data-width and data-height match with my canvas size, but I don’t know why my self-portrait shows up like this in WordPress.

Project 1: My Self Portrait

camel_self_portrait

function setup() {
    createCanvas(670, 750);
    background(232,228,130);
}

function draw() {
    noStroke();

    fill(0,0,0);
    rect(70,50,450,480,200); //back hair

    fill(255,160,122);
    rect(140,150,310,350,150); //head

    fill(188,143,143);
    rect(0,550,600,800,150); //body

    fill(255,160,122);
    rect(255,450,90,150,80); // neck

    fill(0,0,0);
    rect(110,65,200,200,100); //left bang

    rect(280,65,200,200,100); //right bang

    rect(120,230,40,300,30); //left stroke

    rect(430,230,40,300,30); //right stroke

    rect(480,200,100,200,70); //clip

    ellipse(520,170,80); //clip piece

    ellipse(237,330,30); // left eye

    ellipse(355,328,30); // right eye

    fill(255,127,80);
    rect(280,330,30,70,30); //nose

    fill(220,20,60);
    ellipse(300,430,50); //mouth

    fill(255,160,122);
    rect(250,400,120,20);

    fill(240,128,128,100);
    ellipse(200,400,100); // left blush
    ellipse(395,400,100); // right blush

    fill(255,160,122);
    rect(500,510,150,160,50); //palm
    rect(542,600,80,210); //wrist
    //rect(450,590,80,40,50); //thumb
    rect(510,420,32,130,50); //index finger
    rect(550,410,32,130,50); //middle finger
    //rect(580,410,32,130,50); //ring finger
    //rect(615,450,32,100,50); //little finger


    strokeWeight(5);
    stroke(218,165,32);
    fill(255,255,255,50);
    ellipse(230,330,100); // left frame
    ellipse(365,328,100); // right frame
    line(280,330,310,330); // frame connector

    noLoop();
}

Project 1: My Self Portrait

Self-Portrait Code

function setup() {
    createCanvas(600, 700);
    background(245);
}
function draw() {
//hair
     strokeWeight(0);
    fill(226, 194, 121);
    ellipse(300, 230, 310, 285);
    rect(145, 230, 310, 500);    
//head
    fill(245, 224, 204);
    ellipse(300, 290, 290, 340);
//cheeks
    fill(238, 158, 158);
    ellipse(225, 300, 80, 43);
    ellipse(375, 300, 80, 43);
//nose
   fill(245, 189, 173);
   circle(300, 310, 30);
   fill(245, 224, 204);
   rect(270, 280, 60, 30);
//eyes
    noFill();
    strokeWeight(5);
    stroke(100)
    arc(230, 255, 55, 30, PI, 0);
    arc(370, 255, 55, 30, PI, 0);
//mouth
    arc(300, 370, 45, 30, 0, PI);
    strokeWeight(0);
//shirt
    //(how the cords of quad ordered) top left, top right, bottom right, bottom left
    fill(187, 209, 153);
    quad(90, 540, 250, 510, 250, height, 90, height);
    rect(250, 510, 100, 240);
    quad(350, 510, 510, 540, 510, height, 350, height);
//neck
    fill(245, 224, 204);
    rect(250, 440, 100, 70);
    circle(300, 500, 100);
}

What was most challenging was just planning out the drawing and deciding what coordinates I wanted and how I wanted to approach the code.

Project-01-My Self Portrait

handin-01_heejins-01-project_sketch

//Heejin Son Section D
function setup() {
    angleMode(DEGREES); //set up the code to work in degrees
    createCanvas(910, 717);
    background(96, 96, 96);
}

function draw() {
    strokeWeight(1);
    fill(173, 195, 232); //murky blue
    rect(245, 293, 466, 426); //smaller background rectangle
    ellipse(280, 506, 405, 323); //background ellipse left
    ellipse(667, 506, 405, 323); //background ellpise right
    ellipse(457, 538, 252, 161); //ellipse for the face
    fill(36, 26, 26); //brown
    ellipse(419, 524, 11, 25); //left eye
    ellipse(485, 524, 11, 25); // ight eye
    fill(150, 22, 22); //red
    ellipse(451, 539, 10, 10); // nose
    ellipse(416, 626, 35, 46); //left hand
    ellipse(502, 624, 35, 46); //right hand
    ellipse(389, 640, 12, 12); //paws for left hand
    ellipse(410, 660, 13, 13); //paws for left hand
    ellipse(440, 650, 12, 12); //paws for left hand
    ellipse(476, 641, 12, 12); //paws for right hand
    ellipse(499, 660, 14, 14); //paws for right hand
    ellipse(526, 652, 10, 10); //paws for right hand
    line(292, 506, 376, 536); //left whiskers
    line(299, 582, 379,554); //left whiskers
    line(520, 537, 627, 478); //right whiskers
    line(518, 554, 629, 575); //right whiskers
    rect(414, 401, 44, 56); //rectangle for the hat
    fill(24, 159, 10); //green
    triangle(458, 401, 489, 354, 512, 406); //triangle for the hat
    fill(150, 22, 22); //red
    triangle(512, 406, 552, 409, 535, 445); //end triangle for the hat
    ellipse(343, 489, 42, 42); //circle for the bubbles
    fill(196, 177, 50); //yellow
    ellipse(347, 447, 20, 20); //circle for the bubbles
    fill(31, 50, 85); //navy
    ellipse(319, 418, 24, 24); //circle for the bubbles
    fill(181, 85, 21); //orange
    ellipse(106, 350, 40, 40); //outer bubbles
    fill(31, 85, 48); //green
    ellipse(79, 266, 70, 70); // outer bubbles
    fill(196, 177, 50);
    ellipse(139, 192, 40, 40); // outer bubbles
    fill(31, 85, 48);
    ellipse(627, 116, 50, 40); //butterfly
    fill(31, 50, 85);
    ellipse(645, 172, 70, 60); //butterfly
    fill(150, 22, 22);
    ellipse(682, 105, 30, 20); //butterfly
    fill(181, 85, 21);
    ellipse(717, 147, 70, 60); //butterflys
    line(653, 95, 635, 72); //butterfly
    line(660, 95, 667, 58); //butterfly
    fill(31, 85, 48);
    fill(31, 50, 85);
    rect(350, 208, 160, 102); //house
    fill(150, 22, 22); //red
    triangle(325, 210, 530, 210, 432, 140); //house
    rect(0,700, 910, 20); //bottom rectangle




    
}

Project 1: Self Portrait

project-01

project-01

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

function draw() {
    background(2, 3, 200);
    fill(255);
    triangle(400, 650, 475, 850, 325, 850);
    rect(50, 50, 500, 600);
    stroke(0);
    strokeWeight(5);
    noFill();
    triangle(400, 850, 450, 900, 350, 900);
    curve(70, 220, 100, 170, 250, 165,  280, 222);
    curve(270, 222, 300, 165, 450, 170,  480, 220);
    fill(0);
    arc(150, 170, 60, 40, 0, 3);
    arc(350, 170, 60, 40, 0, 3);
    fill(255);
    arc(150, 170, 60, 40, .5, 1);
    arc(350, 170, 60, 40, .5, 1);
    fill(255, 173, 226);
    noStroke();
    ellipse(175, 300, 50, 100);
    ellipse(375, 300, 50, 100);
    fill(250, 160, 210);
    ellipse(175, 300, 40, 40);
    ellipse(375, 300, 40, 40);
    stroke(0);
    strokeWeight(5);
    fill(0);
    curve(200, mouseY/2, 225, 400, 325, 400,  350, mouseY/2);
    noFill();
    curve(70, 100-(mouseY/2), 120, 100, 220, 100,  280, 100+(mouseY/2));
    curve(270, 100+(mouseY/2), 320, 100, 420, 100,  480, 100-(mouseY/2));

}

Tweaking the numbers to get object into the right place on the canvas was pretty tedious and unintuitive at first, but once I had a couple shapes down for reference it got much easier.

Project 1: My Self Portrait

renee-portrait

function setup() {
    createCanvas(975, 1133);
}

function draw() {
    background(0);
    fill(59, 84, 106);
    rect(0, 0, 975, 1133);
    fill(236, 229, 215);
    circle(893, 592, 738);
    fill(98, 118, 108);
    rect(736, 433, 213, 31);
    fill(198, 132, 47);
    rect(739, 464, 210, 68);
    fill(98, 118, 108);
    rect(947, 435, 30, 286);
    fill(98, 118, 108);
    rect(446, 335, 219, 795)
    fill(241, 209, 195);
    circle(727, 699, 199);
    fill(98, 118, 108);
    rect(448, 96, 526, 237);
    fill(241, 209, 195);
    rect(0, 0, 120, 1133);
    fill(221, 165, 111);
    rect(120, 0, 64, 1130);
}

(the portrait is cut off because the dimensions of the canvas does not fit word space)

This project was interesting because it was the first time I made a self portrait out of shapes, so it was fun to get creative.

Project 1: My Self Portrait

sketch
function setup() {
    createCanvas(400, 600);
  }
  
function draw() {
    
    background(54, 47, 117);
    
    // print(mouseX, mouseY);
    
    // hair
    beginShape();
    
    strokeWeight(2);
    stroke(0)
    fill(0);
    curveVertex(40, 600);
    curveVertex(40, 600);
    curveVertex(63, 358);
    curveVertex(108, 255);
    curveVertex(198, 216);
    curveVertex(288, 255);
    curveVertex(334, 358);
    curveVertex(360, 600);
    curveVertex(360, 600);
    
    endShape();
    
    
    
    // shoulder and neck
    beginShape();
    
    strokeWeight(2);
    stroke(0)
    fill(253, 236, 231);
    curveVertex(92, 600);
    curveVertex(92, 600);
    curveVertex(114, 555);
    curveVertex(147, 534);
    curveVertex(173, 521);
    curveVertex(184, 490);
    curveVertex(216, 490);
    curveVertex(227, 521);
    curveVertex(253, 534);
    curveVertex(286, 555);
    curveVertex(308, 600);
    curveVertex(308, 600);
    
    endShape();
    
    
    
    // face
    beginShape();
    
    strokeWeight(4);
    stroke(0)
    curveVertex(199, 500);
    curveVertex(199, 500);
    curveVertex(135, 466);
    curveVertex(120, 369);
    curveVertex(159, 334);
    curveVertex(198, 300);
    curveVertex(218, 334);
    curveVertex(280, 369);
    curveVertex(265, 466);
    
    curveVertex(199, 500);
    curveVertex(199, 500);
    
    endShape();
    
    
    
    // clothes
    beginShape();
    
    fill(253, 151, 156);
    curveVertex(92, 600);
    curveVertex(92, 600);
    curveVertex(114, 555);
    curveVertex(147, 534);
    curveVertex(173, 521);
    curveVertex(201, 546);
    curveVertex(227, 521);
    curveVertex(253, 534);
    curveVertex(286, 555);
    curveVertex(308, 600);
    curveVertex(308, 600);
    
    endShape();
    
    
    
    // eyes
    fill(0);
    circle(160, 400, 26);
    circle(240, 400, 26);
    
    
    
    // eyelids
    strokeWeight(8);
    noFill();
    arc(160, 393, 34, 16, PI + PI/24, - PI/6);
    arc(240, 393, 34, 16, PI + PI/6, - PI/24);
    
    
    
    // eyebrows
    arc(160, 380, 52, 20, PI + PI/16, - PI/6);
    arc(240, 380, 52, 20, PI + PI/6, - PI/16);
    
    
    
    // mouth
    strokeWeight(8);
    stroke(0)
    line(192, 450, 210, 450);
    
    
    
    // nose
    arc(201, 430, 14, 8, PI + PI / 10, TWO_PI - PI / 10);
    
    
    
    // stars
    noStroke();
    fill(251, 255, 5);
    
    triangle(112, 54, 120, 24, 128, 54);
    triangle(112, 56, 120, 86, 128, 56);
    triangle(90, 56, 120, 48, 120, 64);
    triangle(120, 48, 120, 64, 150, 56);
    
    triangle(312, 154, 320, 124, 328, 154);
    triangle(312, 156, 320, 186, 328, 156);
    triangle(290, 156, 320, 148, 320, 164);
    triangle(320, 148, 320, 164, 350, 156);
    
    circle(50, 80, 8);
    circle(170, 150, 16);
    circle(230, 50, 12);
    circle(360, 100, 12);
    
    
    
    /* when mouse is on canvas, 
    the circle stars will start blinking, 
    and the character will open her mouth */
    
    if ((mouseX > 0) & (mouseX < width) &&
        (mouseY > 0) && (mouseY < height)) {
      
      // add rings for blinking effect
      let starR1 = random(8, 16);
      let starR2 = random(16, 24);
      let starR3 = random(12, 18);
      noFill();
      strokeWeight(1);
      stroke(251, 255, 5)
      circle(50, 80, starR1);
      circle(170, 150, starR2);
      circle(230, 50, starR3);
      circle(360, 100, starR3);
      
      // open mouse
      strokeWeight(6);
      stroke(0);
      fill(254, 97, 97);
      arc(201, 451, 22, 30, 0, PI);
  
    } 
      
    
  }

Project 1: My Self Portrait

Aysha Portrait

function setup() {
    createCanvas(350, 500);
    background(215, 167, 119)
}

function draw() {
    strokeWeight(0);
    fill(107, 70, 27) // eyes
    ellipse(100, 140, 50);
    ellipse(250, 140, 50);
    fill(252, 226, 215, 150); // pupils
    ellipse(105, 145, 30); 
    ellipse(255, 145, 30);
    fill(107, 70, 27); // eyelids
    triangle(75, 139, 70, 115, 107, 116);
    triangle(275, 139, 280, 115, 243, 116);
    noFill(); // nose
    strokeWeight(5);
    stroke(107, 70, 27);
    arc(175, 240, 80, 80, PI/4, 3/4 * PI);
    stroke(107, 70, 27); // mouth
    strokeWeight(0);
    fill(157, 117, 74);
   // ellipse(175, 405, 110, 60);
    fill(215, 167, 119);
    rect(110, 370, 120, 40);
    fill(144, 93, 37);
    ellipse(175, 410, 110, 40);
    fill(215, 167, 119);
    rect(110, 410, 120, 30);
    strokeWeight(0); // white plaid
    fill(252, 226, 215, 100);
    rect(25, 0, 35, 500);
    rect(290, 0, 35, 500);
    rect(157, 0, 35, 500);
    rect(0, 60, 350, 35);
    rect(0, 190, 350, 35);
    rect(0, 320, 350, 35);
    rect(0, 450, 350, 35);
    fill(107, 70, 27, 35); // brown plaid
    rect(90, 0, 35, 500);
    rect(225, 0, 35, 500);
    rect(0, 0, 350, 30)
    rect(0, 125, 350, 35);
    rect(0, 255, 350, 35);
    rect(0, 385, 350, 35);

    noLoop();
}

I’m not a very visual thinker, and it was more difficult than I expected to translate my idea into simple shapes.