Project-01-Face – Page 4 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 01 – Self Portrait

my smile~

//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-01

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

function draw() {

	//face
	noStroke();
	fill(241, 196, 163);
	ellipse(302, 266, 179, 257);

	//neck
	noStroke();
	fill(241, 196, 163);
	rect(272, 340, 70, 83);

	//mole
	noStroke();
	fill(39, 45, 44);
	ellipse(237, 227, 3, 3);

	//eyebrow 1
	noStroke();
	fill(39, 45, 44);
	beginShape();
	curveVertex(278, 232);
	curveVertex(278, 221);
	curveVertex(265, 217);
	curveVertex(251, 213);
	curveVertex(238, 211);
	curveVertex(230, 216);
	curveVertex(222, 227);
	curveVertex(233, 223);
	curveVertex(245, 220);
	curveVertex(256, 223);
	curveVertex(268, 228);
	curveVertex(278, 232);
	endShape();

	//eyebrow 2
	noStroke();
	fill(32, 45, 44);
	beginShape();
	curveVertex(305, 222);
	curveVertex(306, 231);
	curveVertex(319, 230);
	curveVertex(334, 229);
	curveVertex(349, 227);
	curveVertex(362, 227);
	curveVertex(370, 231);
	curveVertex(378, 235);
	curveVertex(375, 229);
	curveVertex(366, 222);
	curveVertex(356, 218);
	curveVertex(340, 218);
	curveVertex(327, 219);
	curveVertex(314, 221);
	curveVertex(305, 222);
	endShape();

	//eyes & eyelashes
	stroke(32, 45, 44);
	strokeWeight(4);
	noFill();
	arc(250, 250, 35, 20, TWO_PI, PI, OPEN);
	arc(340, 250, 45, 20, TWO_PI, PI, OPEN);


	//teeth
	noStroke();
	fill(255, 255, 255);
	beginShape();
	curveVertex(261, 331);
	curveVertex(268, 342);
	curveVertex(279, 350);
	curveVertex(291, 355);
	curveVertex(307, 355);
	curveVertex(318, 351);
	curveVertex(329, 346);
	curveVertex(341, 335);
	curveVertex(332, 336);
	curveVertex(318, 339);
	curveVertex(300, 341);
	curveVertex(286, 339);
	curveVertex(273, 336);
	curveVertex(261, 331);
	endShape();


	//upper lip
	noStroke();
	fill(170, 109, 98);
	beginShape();
	curveVertex(258, 328);
	curveVertex(262, 340);
	curveVertex(268, 351);
	curveVertex(275, 359);
	curveVertex(286, 366);
	curveVertex(303, 366);
	curveVertex(317, 361);
	curveVertex(330, 351);
	curveVertex(338, 344);
	curveVertex(343, 335);
	curveVertex(333, 341);
	curveVertex(320, 348);
	curveVertex(307, 352);
	curveVertex(294, 353);
	curveVertex(282, 349);
    curveVertex(271, 342);
    curveVertex(264, 335);
    curveVertex(258, 328);
    endShape();

    //bottom lip
    noStroke();
    fill(170, 109, 98);
    beginShape();
    curveVertex(258, 328);
    curveVertex(267, 334);
    curveVertex(278, 338);
    curveVertex(294, 341);
    curveVertex(308, 340);
    curveVertex(323, 339);
    curveVertex(334, 337);
    curveVertex(343, 335);
    curveVertex(338, 334);
    curveVertex(328, 336);
    curveVertex(316, 336);
    curveVertex(303, 335);
    curveVertex(293, 336);
    curveVertex(286, 334);
    curveVertex(274, 333);
    curveVertex(265, 331);
    curveVertex(258, 328);
    endShape();


	//hair
	noStroke();
	fill(39, 45, 44);
	beginShape();
	curveVertex(272, 101);
	curveVertex(226, 134);
	curveVertex(194, 187);
	curveVertex(180, 257);
	curveVertex(172, 306);
	curveVertex(158, 345);
	curveVertex(150, 391);
	curveVertex(168, 440);
	curveVertex(198, 508);
	curveVertex(218, 541);
	curveVertex(206, 585);
	curveVertex(247, 570);
	curveVertex(280, 541);
	curveVertex(288, 504);
	curveVertex(307, 464);
	curveVertex(288, 413);
	curveVertex(255, 375);
	curveVertex(234, 345);
	curveVertex(214, 292);
	curveVertex(214, 249);
	curveVertex(230, 195);
	curveVertex(263, 153);
	curveVertex(315, 138);
	curveVertex(360, 167);
	curveVertex(385, 226);
	curveVertex(389, 288);
	curveVertex(377, 337);
	curveVertex(356, 371);
	curveVertex(368, 421);
	curveVertex(411, 421);
	curveVertex(458, 405);
	curveVertex(419, 391);
	curveVertex(439, 349);
	curveVertex(434, 300);
	curveVertex(423, 253);
	curveVertex(426, 203);
	curveVertex(407, 157);
	curveVertex(372, 113);
	curveVertex(319, 97);
	curveVertex(272, 101);
	endShape();
}

Project 1: Self-Portrait.

I did this before we went over “width/2” and “height/2”, so trying to guess and predict individual points was very tedious and difficult!

my-portrait

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

function draw() {
    background('#F2857D');
    fill('#ED5145');
    noStroke();
    circle(width/2,height/2,190);
    noFill();
    stroke('#FDE74C');
    strokeWeight(15);
    circle(width/2, height/2,250);
    fill('#D4A25B');
    stroke('#D4A25B');
    strokeWeight(1);
    quad(172,225,129,225,123,130,178,130);

    fill('#163905');
    stroke('#163905');
    quad(172,220,129,220,50,250,250,250);
    rect(48,251,204,100);

    fill('#33830B');
    stroke('#33830B');
    quad(173,210,150,220,155,230,184,224);
    quad(127,210,150,220,145,230,116,224);

    fill('#F1C280');
    stroke('#F1C280');
    ellipse(150,129,87,84);
    quad(167,195,134,195,111,148,189,148);

    fill('#C28146');
    circle(150,147,20);

    fill('#CB6618');
    stroke('#CB6618');
    triangle(148,172,145,166,138,172);
    triangle(152,172,155,166,162,172);
    circle(150,168,10);

    fill('#F1C280');
    stroke('#F1C280');
    circle(150,135,35);
    ellipse(150,164,8);

    fill('#C28146');
    stroke('#C28146');
    quad(145,180,143,177,157,177,155,180);
    ellipse(150,180,10,6);

    fill('#FDF6ED');
    stroke('#FDF6ED');
    ellipse(133,142,23,8);
    ellipse(167,142,23,8);
    quad(145,142,121,142,119,132,146,132);
    quad(179,142,155,142,154,132,181,132);

    fill(40);
    stroke(40);
    ellipse(132,131,28,4);
    ellipse(168,131,28,4);

    fill('#FDF6ED');
    stroke('#FDF6ED');
    ellipse(132,134,25,4);
    ellipse(168,134,25,4);

    fill(40);
    stroke(40);
    quad(97,83,188,89,190,110,105,110);
    rect(104,107,8,35);
    rect(186,107,8,35);
    triangle(105,143,112,143,113,153);
    triangle(186,143,194,143,188,153)
}

Project 01 – Self-Portrait

My default pose:)

Self-Portrait

function setup() {
    createCanvas(600,600);
    background(155, 154, 255, 255)
}

function draw() {
    //backhair
    fill(0);
    noStroke();
    rect(257, 362, 149, 237, 0, 105, 0, 0);

    noFill();
    stroke(255, 242, 165);
    strokeWeight(2);
    rect(260, 358, 151, 242, 0, 106, 0, 0);

    //shirt
    fill(255, 64, 34);
    noStroke();
    rect(96, 419, 292, 181, 0, 81, 0, 0);

    fill(244, 64, 34);
    noStroke();
    rect(438, 528, 83, 72, 0, 20, 0, 0);

    //neck
    fill(255,216,195);
    noStroke();
    rect(170,274,92,181);

    fill(255,216,195);
    noStroke();
    rect( 151, 419, 156, 81, 0, 0, 55, 0);

    //face
    strokeWeight(2);
    stroke(0);
    fill(255, 247, 227);
    rect(195, 222.5, 120, 170, 0, 0, 0, 400);

    fill(255, 247, 227);
    noStroke();
    ellipse(278, 223, 258);

        //coverface
        fill(155, 154, 255, 255);
        noStroke();
        rect(369, 162, 47, 160);

        //chin
        noStroke();
        fill(255, 247, 227);
        ellipse (312, 366.5, 52);


    //black long hair
    noStroke();
    fill(0);
    rect(86, 208, 112, 135);

    noStroke();
    fill(0);
    rect(29, 327, 169, 273, 106, 0, 0, 0);

    //blonde long hair
    fill(255, 242, 165);
    noStroke();
    rect(161, 208, 38, 399, 0, 0, 0, 37);

    noFill();
    stroke(255, 242, 165);
    strokeWeight(2);
    rect(157, 212, 42, 400, 0, 0, 0, 41)

    //eyes
        //white
        noStroke();
        fill(255);
        rect(245, 235, 29, 20, 0, 0, 0, 15);

        noStroke();
        fill(255);
        rect(356, 237, 13, 13, 0, 0, 0, 8);

        //pupil
        noStroke();
        fill(0);
        ellipse(275, 243, 26);

        noStroke();
        fill(0);
        ellipse(369, 243, 16);

        //eyeliner
        stroke(0);
        strokeWeight(3);
        line(248, 229, 273, 232);

        stroke(0);
        strokeWeight(3);
        line(369, 237, 387, 235);

        //eyebrow
        stroke(0);
        strokeWeight(3);
        line(220, 191, 289, 215);

        stroke(0);
        strokeWeight(2);
        line(326, 200, 390, 200);
        

    //nose
    noStroke();
    fill(0);
    ellipse(310, 300, 5);

    stroke(0);
    strokeWeight(2);
    noFill();
    arc(335, 297, 12, 12, 7*PI/4, PI/4);

    strokeWeight(2);
    line(326, 294, 326, 200);

    //lips
    noStroke();
    fill(255, 216, 195);
    ellipse(333, 345, 27);

    noStroke();
    fill(255, 151, 135);
    arc(333, 338, 47, 47, PI, 2*PI);

    noStroke();
    fill(255, 247, 227);
    ellipse(333, 315, 23);

    //cheek
    noStroke();
    fill(255, 151, 135, 120);
    ellipse(198, 311, 106);

    noStroke();
    fill(255, 151, 135, 120);
    ellipse(369, 280, 44);

    //bangs
        //right
        noStroke();
        fill(255, 242, 165);
        rect(311, 78, 91, 104, 0, 70, 0, 70);

        noStroke();
        fill(0);
        rect(311, 74, 91, 104, 0, 70, 0, 70);

        //left
        noStroke();
        fill(255, 242, 165);
        rect(86, 54, 253, 163, 142, 0, 146, 0);

        noStroke();
        fill(0);
        rect(86, 35, 260, 167, 145, 0, 150, 0);

    //hand
        //pointer
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(437, 405, 458, 486);

        //middle
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(496, 405, 471, 486);


    fill(255, 215, 195);
    noStroke();
    rect(438, 474, 83, 82, 23, 0, 36, 0);

        //4thfinger
        fill(255, 247, 227);
        noStroke();
        rect(487, 467, 20, 61, 10);

        //pinkie
        fill(255, 247, 227);
        noStroke();
        rect(504, 470, 20, 47, 10);

        //thumb
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(471, 486, 471, 540);

    fill(255, 247, 227);
    noStroke();
    rect(438, 496, 50, 59, 0, 46, 0, 0);

noLoop();

}

After sketching out different poses, I went into Illustrator to create my self-portrait so I could reference the dimensions and color codes of my shapes without as much guess-and-check. Translating the shapes into p5.js still took longer than expected, but it was pretty gratifying to see myself slowly building up a finished painting. Along the way, I realized that I was unable to replicate some rounded rectangles from Illustrator because p5.js does not recognize a radius as large as Illustrator does. This was frustrating but I came to enjoy the limitations of the program and my final result. I also wasn’t able to figure out how to rotate an object, so I ended up making my fingers out of strokes with a heavy stroke-weight– it worked!

Project 01 – Self Portrait

This is what I look like in the morning

hayoonc

function setup() {
    createCanvas(500, 600);
    background(251, 242, 255);
}

function draw() {
    //Hair 1
    noStroke();
    fill(80)
    ellipse(215, 140, 190, 170);
    beginShape();
        vertex(131, 100);
        vertex(75, 245);
        vertex(80, 240);
        vertex(88, 255);
        vertex(93, 260);
        vertex(100, 255);
        vertex(105, 265);
        vertex(140, 270);
        vertex(190, 100);
    endShape();

    //Body
    fill(142, 133, 160);
    rect(95, 260, 390, 500, 140)
  
    //Head
    noStroke();
    fill(255, 237, 225);
    ellipse(240, 210, 260, 240);
  
    //Shadow
    fill(235, 184, 146)
    ellipse(170, 205, 27, 14);
    ellipse(280, 205, 30, 14);
    triangle(215, 210, 208, 220, 200, 240);
    triangle(250, 210, 260, 225, 265, 240);
    fill(252, 218, 192);
    beginShape();
        vertex(200, 296);
        bezierVertex(200, 295, 240, 320, 260, 295);
    endShape();
  
    //eyes
    strokeWeight(1);
    stroke(0);
    fill(254, 246, 246);
    ellipse(170, 200, 27, 12);
    ellipse(280, 200, 30, 10);

    //Pupils 
    fill(0);
    ellipse(172, 200, 7, 7);
    ellipse(282, 200, 5, 6)

    //nose
    noFill();
    arc(240, 220, 15, 10, 175, 70);
    arc(220, 220, 13, 11, 90, 180);
    push();
        translate(230,223);
        rotate(125.9);
        arc(0, 0, 15, 10, 170, 90);
    pop();
    arc(220, 220, 14, 10, 20, 360);
    arc(240, 220, 14, 10, 20, 360);

    //Mouth
    fill(249,134, 128);
    arc(220, 242, 13, 13, PI, 0);
    arc(233, 242, 13, 13, PI, 0);
    arc(227, 242, 26, 15, 0, PI);
    stroke(0);
    strokeWeight(0.8);
    line(214, 243, 238, 243);

    //Hair 2
    noStroke();
    fill(80);
    push();
        translate(125,90);
        rotate(-0.25);
        rect(0, 0, 160, 70, 140)
    pop();
    triangle(170, 150, 100, 250, 123, 127);
    push();
    translate(320, 110);
    rotate(0.5);
    ellipse(0, 0, 160, 70)
    pop();
    beginShape();
        vertex(300, 100);
        vertex(360, 289);
        vertex(370, 285);
        vertex(375, 280);
        vertex(380, 285);
        vertex(388, 277);
        vertex(395, 280);
        vertex(405, 272);
        vertex(410, 277);
        vertex(417, 265);
        vertex(425, 272);
        vertex(435, 265);
        vertex(445, 270);
        vertex(393, 140);
    endShape();
  
    //Eyebrows
    ellipse(170, 180, 15, 5);
    ellipse(275, 180, 17, 5);
  
    //Flower
    noFill();
    stroke(125, 206, 160);
    strokeWeight(5);
    beginShape();
        vertex(230, 550);
        bezierVertex(260, 450, 230, 305, 180, 400);
    endShape();
    noStroke();
    fill(255, 230, 69);
    ellipse(160, 360, 30, 50);
    push();
        translate(195,370)
        rotate(0.8);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(210,400)
        rotate(1.5);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(200,430)
        rotate(1.9);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(155,435)
        rotate(3.7);
        ellipse(0, 0, 35, 50)
    pop();  
    ellipse(130, 400, 50, 35);
    fill(216, 162, 98);
    ellipse(170, 400, 60, 60)

  
  //Arm
    strokeWeight(0);
    fill(255, 237, 225);
    ellipse(410, 360, 120, 110);
    push();
        translate(470, 370);
        rotate(2);
        rect(0, 0, 160, 100, 140)
    pop();
    push();
        translate(220, 450);
        rotate(-0.2);
        rect(0, 0, 200, 80, 170);
    pop();
      rect(195, 428, 85, 100, 100);
      rect(180, 428, 60, 30, 70);
      rect(175, 455, 60, 30, 70);
      rect(183, 482, 60, 30, 70);
      rect(193, 505, 50, 25, 70);
  
    //Flower face
    strokeWeight(1);
    stroke(0);
    fill(254, 246, 246);
    ellipse(150, 400, 12, 7);
    ellipse(180, 400, 11, 7);
    line(160, 400, 157, 410);
    line(157, 410, 159, 412);
    noStroke();
    fill(247, 84, 84);
    ellipse(162, 417, 10, 3);
    ellipse(162, 420, 10, 3);
    fill(0);
    ellipse(150.5, 398, 4, 4)
    ellipse(180.5, 398, 4, 4)
  
  //Blush
    if (mouseIsPressed) {
        fill(255, 186, 186);
    } else {
        fill(255, 237, 225);
    }
    ellipse(160, 227, 40, 20);
    ellipse(295, 227, 40, 20);
}

Project 01 – Self Portrait

self-portrait.js

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

function draw() {
    stroke(198,213,204);
    strokeWeight(100);
    line(-20,-20,619,619);
    line(0,427,600,480);
    noStroke();
    fill(234,219,192);
    ellipse(550,350,400,600);
    fill(183,172,157,140);
    triangle(550,460,520,360,580,360);
    ellipse(450,300,100,80);
    ellipse(635,300,100,80);
    stroke(0,0,0);
    strokeWeight(55);
    line(0,300,570,300);
    strokeWeight(35);
    line(350,450,650,450);
    line(0,520,545,520);
    noStroke();
    fill(255,255,255,70);
    circle(450,300,42);
    circle(450,300,20);
}

Project 01 – Self Portrait

This is my self portrait, that changes color when you move your mouse around

self-portrait

/*
*Alyssa Song
*agsong@andrew.cmu.edu
*Section C
*
*This program draws a self-protrait. It takes a little bit of time to load!
*/

function setup() {
    createCanvas(800, 800);
    //background(255, 255, 255);
}
   

function draw() {
	stroke(0);
	strokeWeight(5);
	//background changes color when mouse is on left or right side of screen
	 if (mouseX < 0.5*width) {
    	background(228, 228, 253); //light purple background
    } else {
    	background(198, 226, 249); //light blue background
    }

	//hair in the back and face
	fill(0, 0, 0);
	quad(0.25*width, 0.25*height, 0.125*width, 0.875*height, 0.875*width, 0.875*height, 0.75*width, 0.25*height) //back hair
	fill(227, 180, 171); //skin color
	ellipse(0.5*width, 0.5*height, 0.5*width, 0.7*height); //face

    //eyebrows
    fill(0, 0, 0);
    quad(0.4375*width, 0.40625*height, 0.4375*width, 0.4375*height, 0.3125*width, 0.4375*height, 0.3125*width, 0.40625*height); //left eyebrow
    quad(0.6875*width, 0.40625*height, 0.6875*width, 0.4375*height, 0.5625*width, 0.4375*height, 0.5625*width, 0.40625*height); //right eyebrow

    //hair in front of face
    quad(0.25*width, 0.25*height, 0.25*width, 0.5*height, 0.5*width,0.25*height, 0.5*width, 0.125*height) //left side hair
    fill(0, 0, 0);
    quad(0.75*width, 0.25*height, 0.75*width, 0.5*height, 0.5*width, 0.25*height, 0.5*width, 0.125*height) //right side hair
    fill(0, 0, 0);

    //eyes
    fill(255, 255, 255); //white
    ellipse(0.375*width, 0.5*height, 0.125*width, 0.0625*height); //left eye
    //change left eye color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(149,85,73); //light brown
    } else {
    	fill(104, 47, 48); //brown
    }
    ellipse(0.375*width, 0.5*height, 0.0625*width); //left iris
    fill(0, 0, 0); //black
    ellipse(0.375*width, 0.5*height, 0.02*width); //left pupil
    fill(255, 255, 255); //white
    ellipse (0.38*width, 0.49*height, 0.02*width); //left shine
    fill(255, 255, 255); //white
    ellipse(0.625*width, 0.5*height, 0.125*width, 0.0625*height); //right eye
    //change right eye color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(149,85,73); //light brown
    } else {
    	fill(104, 47, 48); //brown
    }
    ellipse(0.625*width, 0.5*height, 0.0625*width); //right pupil
    fill(0, 0, 0) //black
    ellipse(0.625*width, 0.5*height, 0.02*width); //right pupil
    fill(255, 255, 255); //white
    ellipse(0.635*width, 0.49*height, 0.02*width); //right shine

    //nose 
    line(0.5*width, 0.5*height, 0.5*width, 0.5625*height); 
    line(0.5*width, 0.5625*height, 0.5625*width, 0.625*height);
    line(0.5*width, 0.625*height, 0.5625*width, 0.625*height);

    //mouth
    //change lip color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(160, 95, 120); //nude lip
    } else {
    	fill(152, 41, 41); //red lip
    }
    quad(0.4375*width, 0.71875*height, 0.46875*width, 0.6875*height, 0.53125*width, 0.6875*height, 0.5625*width, 0.7185*height); //upper lip
    quad(0.4375*width, 0.71875*height, 0.46875*width, 0.75*height, 0.53125*width, 0.75*height, 0.5625*width, 0.7185*height); //lower lip
    
    //blush
    if (mouseX < 0.5*width) {
    	fill(241, 212, 230); //nude lip
    } else {
    	fill(229, 142, 196); //red lip
    }
    ellipse(0.625*width, 0.625*height, 0.0625*width); //right cheek
    ellipse(0.375*width, 0.625*height, 0.0625*width); //left cheek

}

Project 01 – Self Portrait

This is what I wish I looked like.

Self-Portrait Download

function setup() {
    createCanvas(800, 800);
    background(250);
}

function draw() {
//German Flag background
    fill(0, 0, 0);
    rect(0, 0, 800, 800/3);   //creates the black portion
    fill(218, 41, 28);
    rect(0, 800/3, 800, 1600/3);    //creates the red portion
    fill(255, 205, 0);
    rect(0, 1600/3, 800, 800);    //creates the yellow portion
//left face line
    line(250, 250, 250, 500);
//right face line
    line(550, 250, 550, 500);
//hat
    strokeWeight(3);
    fill(155, 175, 220);
    arc(400, 250, 300, 225, PI, 0, CHORD);   //creates the hat itself
    fill(255, 233, 220);
    arc(400, 230, 90, 60, PI, 0, CHORD);    //provides the skin color underneath
    arc(340, 300, 50, 15);    //provides the smaller arc within the hat
//left jawline
    line(250, 500, 370, 570);
//right jawline
    line(550, 500, 430, 570);
//chin
    strokeWeight(2);
    arc(400, 570, 60, 20, 0, PI);    //physical chin
    strokeWeight(0);
    rect(250, 250, 300, 250);   //the following chin commands are all to color that portion of the face
    fill(255, 233, 220);
    rect(370, 470, 60, 100);
    triangle(250, 500, 370, 500, 370, 570);
    triangle(550, 500, 430, 570, 430, 500);
    strokeWeight(1);
//eyebrows
    strokeWeight(4);
    fill(0, 0, 0);
    quad(370, 280, 370, 290, 300, 295, 305, 285);   //left eyebrow
    strokeWeight(5);
    noFill();
    arc(460, 290, 55, 30, PI, 0);   //right eyebrow
//nose
    fill(255, 233, 220);
    strokeWeight(3);
    arc(400, 395, 30, 25, 0, PI);
    arc(385, 395, 15, 15, 1/2*PI, 3/2*PI);    //left nostril
    arc(415, 395, 15, 15, 3/2*PI, 1/2*PI);    //right nostril
//mouth
    fill(250, 250, 250);
    arc(400, 450, 100, 100, 0, PI, CHORD);

//eyes
    ellipse(340, 310, 50, 25);    //left eye
    ellipse(460, 310, 50, 25);    //right eye
    fill(100, 41, 19);
    ellipse(340, 310, 30, 25);    //left iris
    ellipse(460, 310, 30, 25);    //right iris
    fill(0, 0, 0);
    circle(340, 310, 15);   //left pupil
    circle(460, 310, 15);   //right pupil

}

Project 01- Self Portrait

This is what i look like everyday.

sketch Download

function setup() {
    createCanvas(500, 500);
    background(250);
}

function draw() {
  //background
  strokeWeight(0);
  fill(255,0,0);
  rect(0,0, 167,500);
  fill(255,255,255);
  rect(167,0, 166,500);
  fill(0,255,0);
  rect(333,0, 167,500);
  //face color
  fill(191, 128, 111);
  //face shape
  ellipse(250, 250, 210, 272);
  //nose
  strokeWeight(1);
  stroke(0,0,0);
  arc(240,270, 10, 10, 1/2*PI, 3/2*PI);
  arc(260,270, 10, 10, 3/2*PI, 1/2*PI);
  arc(250,275, 20, 10, 0,PI);
  line(240,265, 242,240);
  //lips
  arc(235,298,30,7,PI,0);
  arc(265,298,30,7,PI,0);
  //eyebrows
  strokeWeight(0)
  fill(0,0,0);
  quad(225,197, 228,203, 185,202, 185,200);
  quad(275,203, 278,197, 315,200, 315,202);
  fill(191,128,111);
  //smile
  fill(150,0,0);
  arc(250, 300, 60, 60, 0, PI);
  //eye white
  fill(255, 255, 255);
  //eyes
  ellipse(205,225, 40, 30);
  ellipse(295,225, 40, 30);
  //eye color
  fill(95,44,22);
  ellipse(205,225, 25, 25);
  ellipse(295,225, 25, 25);
  //pupils
  fill(0,0,0);
  circle(205,225, 10);
  circle(295,225, 10);
  //sombrero
  fill(249,230,204);
  ellipse(250,145, 300,100);
  arc(250,150, 100,250,PI, 0);
  //pokeball
  fill(255,0,0);
  arc(250, 100, 75, 75, PI, 0);
  fill(255,255,255);
  arc(250,100, 75,75,0,PI,CHORD);
  fill(0,0,0);
  ellipse(250,100,30,30);
  fill(255,255,255);
  ellipse(250,100,15,15);
  //teeth
  fill(255,255,255);
  arc(225,300,10,10,0,PI);
  arc(235,300,10,10,0,PI);
  arc(245,300,10,10,0,PI);
  arc(255,300,10,10,0,PI);
  arc(265,300,10,10,0,PI);
  arc(275,300,10,10,0,PI);
  //pizza slice
  fill(255,222,111);
  triangle(250,320, 395,305, 395,390);
  fill(242,186,120);
  ellipse(395,347.5, 9,85);
  fill(155,41,23);
  circle(290,330,7);
  circle(270,325,7);
  circle(305,320,7);
  circle(325,345,7);
  circle(335,323,7);
  circle(355,344,7);
  circle(363,332,7);
  circle(378,365,7);
  circle(375,320,7);
  //lines
  strokeWeight(3);
  if(mouseIsPressed==true){
    stroke(255,255,255);
    line(0,0, mouseX,mouseY);
    stroke(0,255,0);
    line(0,500,mouseX,mouseY);
    stroke(255,0,0);
    line(500,0, mouseX,mouseY);
    stroke(255,255,255);
    line(500,500, mouseX,mouseY);
  } else {
    stroke(0,255,0);
    line(0,0, mouseX,mouseY);
    stroke(255,255,255);
    line(0,500,mouseX,mouseY);
    line(500,0, mouseX,mouseY);
    stroke(255,0,0);
    line(500,500, mouseX,mouseY);
  }
}

Project 01 – Self Portrait

This is what I look like in the morning.

morning-portrait

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

function draw() {
	background(204);
	ellipse(50, 50, 80, 80);
}

Project 01 – Self Portrait

portrait

function setup() {
    createCanvas(500, 1000);
    background(100);
}

function draw(){
//ears
circle(90,490,50);
circle(408,490,50);

//long hair 
fill(34,25,8);
rect(106,350,288,600);

//colored shirt 
fill(0,204,204); 
rect(70,800,370,200); 

//arm lines on shirt 
line(150,920,150,1000);
line(360,920,360,1000);

//neck
fill(242,194,153);
triangle(200,830,250,700,300,830);

//face shape 
fill(242,194,153);
ellipse(250,500,325,500);

//hair - front bangs 
fill(34,25,8);
arc(250,390,300,280,311,0);
noStroke(); 
fill(242,194,153);
triangle(230,400,250,360,270,400);
stroke(0,0,0);
strokeWeight(3); 

//bigger circles for eyes
fill(43,27,9); 
circle(175, 470, 60);
fill(43,27,9); 
circle(325,470,60); 

//nose 
fill(188,159,176); 
triangle(220,550,250,500,280,550)

//mini circles for pupils 
fill(255,255,255); 
circle(185, 476, 30);
fill(255,255,255); 
circle(315,476,30); 

//eyebrows 
fill(65,53,19);
rect(140,405,70,20);
fill(65,53,19); 
rect(295, 405,70,20); 

//mouth 
fill(242,194,153);
arc(255,650,120,70,0,90);

stroke(0,0,0);
strokeWeight(3); 
}