Category: Project-01-Face

Project 1 – Self Portrait

This is what I look like in code.

portrait
function setup() {
    createCanvas(600, 700);
    background(219, 246, 247);

}

function draw() {
    if(mouseX < 300 & mouseY < 350){
        background(180, 209, 211);
    }   else if (mouseX > 300 & mouseY < 350) {
        background(255, 231, 164);
    }  else if (mouseX < 300 & mouseY > 350){
        background(166, 126, 193);
    }   else {
        background(199, 71, 45);
    }

    noStroke();
    fill(0, 0, 2);  //hair
    ellipse(300, 400, 400, 600);

    fill(48, 82, 195);  //body
    ellipse(300, 700, 400, 600);

    fill(210, 170, 110);    //neck
    ellipse(300, 400, 200, 200);

    fill(0, 0, 0);  //hairline
    ellipse(300, 250, 300, 300);

    fill(235, 186, 123);    //skin
    ellipse(300, 300, 300, 350);

        fill(0, 0, 2);  //hairline
    ellipse(300, 250, 300, 300);

        fill(235, 186, 123);    //skin
    ellipse(300, 300, 250, 250);


    fill(0, 0, 0);      //eyes
    ellipse(230, 300, 40);
    ellipse(370, 300, 40);

    fill(255, 255, 255);
    ellipse(240, 290, 10);
    ellipse(380, 290, 10);

    fill(201, 153, 90);
    triangle(270, 370, 300, 300, 330, 370);     //nose

    fill(255, 150, 123);        //mouth
    arc(300, 400, 80, 80, TWO_PI, PI); 

    if (mouseIsPressed) {
        fill(235, 186, 123);      //eyes
    ellipse(230, 300, 50);
    ellipse(370, 300, 50);

    fill(0, 0, 0);
    rect(210, 300, 50, 5);
    rect(350, 300, 50, 5);

    }

    fill(46, 26, 2);
    rect(210, 250, 50, 10);
    rect(350, 250, 50, 10);

  

}

Project 1-Self Portrait

My self portrait! Got cut off though 🙁

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

function draw() {
	background(204, 234, 242)
	fill(255, 203, 87)
	noStroke();
	ellipse(600, 550, 898) // start hair
	fill(28, 13, 2)
	ellipse(600,428, 370)
	fill(40, 20, 3)
	rect(415, 428, 370, 303)
	fill(48, 23, 4)
	ellipse(600, 731, 370) // end hair
	
	fill(239, 192, 154) // start skin
	rect(385.5, 788, 429, 211)
	ellipse(600, 788.5, 428, 297)
	ellipse(600, 636, 112) 
	fill(244, 203, 166) // 
	rect(484.5, 417, 231, 43)
	ellipse(600, 427, 231, 218)
	ellipse(600, 518, 267) // end skin

	fill(0, 0, 0) // start eyes
	ellipse(545, 445, 35)
	ellipse(652, 445, 35)
	fill(244, 203, 166)
	ellipse(545, 460, 35)
	ellipse(652, 460, 35) // end eyes

	fill(224, 170, 148) // start nose
	ellipse(600, 518.5, 41, 15)
	fill(244, 203, 166)
	ellipse(600, 512, 41, 15)
	fill(249, 224, 205)
	ellipse(600, 507, 27, 14) // end nose

	fill(242, 181, 167) // start cheeks
	ellipse(516, 502, 69, 29)
	ellipse(682, 502, 69, 29) // end cheeks

	fill(255, 250, 240) // mouth
	ellipse(600, 568.5, 115, 73)
	fill(244, 203, 166)
	ellipse(600, 550, 136, 38) // mouth

	fill(255, 255, 255) // shirt
	rect(446.5, 761, 307, 238)
	rect(447, 678, 11, 90)
	rect(743, 678, 11, 90) 

	fill(239, 192, 154) // chest
	ellipse(600, 762, 289, 95)









}

Portrait

Portrait LaurelDownload
//Laurel Rountree
//D
function setup() {
    createCanvas(600, 600);
    background(600);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(35, 32, 39);
	noStroke();
	fill(96, 57, 19); //dark brown hair
	ellipse(width/2, 342, 365.4, 616.5);
	ellipse(240.5, 92.5, 100);
	ellipse(364, 92.5, 100);
	ellipse(191.5, 138, 100);
	ellipse(413, 138, 100);
	ellipse(156.3, 205, 100);
	ellipse(448.3, 205, 100);
	ellipse(139.5, 287, 100);
	ellipse(465, 287, 100);
	ellipse(123, 372, 100);
	ellipse(481.5, 372, 100);
	ellipse(139.7, 427, 100);
	ellipse(465, 427, 100);
	fill(135, 179, 142); // green hair band
	ellipse(width/2, 169.8, 231.4, 247.4);
	fill(96, 57, 19); //dark brown hair
	ellipse(width/2, 219, 231.4, 293);
	fill(152, 112, 71); //med brown body
	rect(77.5, 486, 445, 114);
	ellipse(width/2, 489, 445, 233);
	rect(250, 300, 99, 136);
	ellipse(width/2, 473, 244, 124);
	fill(135, 179, 142); //green shirt
	rect(180, 470, 237, 138);
	fill(38, 34, 98);
	ellipse(width/2, 473, 244, 124);
	fill(152, 112, 71); //med brown body
	ellipse(width/2, 445, 244, 124);
	fill(38, 34, 98);
	rect(166.25, 387.5, 25, 214);
	rect(410.3, 387.5, 25, 214);
	fill(169, 124, 80); //light brown face
	ellipse(width/2, 316.2, 175, 104.5);
	ellipse(246.7, 229.2, 112,248.5);
	ellipse(353.3, 229.2, 112, 248.5);
	ellipse(width/2, 229.2, 112, 248.5);
	ellipse(width/2, 142, 177.3, 104.5);
	ellipse(188, 232, 44.7, 83.8);
	ellipse(415,232, 44.7, 83.8);
	fill(130, 94, 60); //med brown eyelids
	ellipse(246.5, 194.5, 51.7, 36.3);
	ellipse(362, 194.5, 51.7,36.3);
	fill(169, 124, 80); //light brown eyelids
	ellipse(362, 196, 54.5, 34.3);
	ellipse(246.65, 196, 54.5, 34.3);
	fill(96, 57, 19); //dark brown face
	ellipse(361, 163.3, 58, 18);
	ellipse(246.5, 163.3, 58, 18);
	ellipse(311, 293, 86, 73);
	ellipse(246.3, 200.2, 55.5, 39);
	ellipse(361, 200.2, 55.5, 39);
	fill(169, 124, 80);
	ellipse(width/2, 288.6, 109.3, 71.5);
	fill(96, 57, 19);
	ellipse(width/2, 272, 48.4, 30,7);
	fill(169, 124, 80);
	ellipse(width/2, 267.8, 48.4, 30,7);
	fill(230,231,232); // white eyes
	ellipse(247.5, 205.5, 52.4, 36.8);
	ellipse(360, 205.5, 52.4, 36.8);
	fill(96, 57, 19); //dark brown eyes
	ellipse(251.5, 202.2, 25.2, 34.5);
	ellipse(356, 202.2, 25.2, 34.5);
	noLoop();
	
}

Project 1 – Self Portrait

This is my self portrait project!

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

function draw() {
	background(251,176,59);
	noStroke();
	//hairbuns
	fill(51,26,8); 
	ellipse(229.838,175.838,79.368);
	fill(51,26,8); 
	ellipse(517.838,175.838,79.368);
	//hairback
	fill(64,32,10);
	rect(205.565, 310.912, 347.604,382.583); 
	ellipse(379.838,326.838,365.093);
	//hair yellow triangle
	fill(251,176,59);
	triangle(187.838,699.838,327.838,613.838,327.838,699.838);
	triangle(423.838,612.838,426.838,693.838,563.838,697.838);
	//ears
	fill(226,119,113);
	ellipse(227.838,437.838,79.368);
	ellipse(525.838,437.838,79.368);
	//neck
	square(312.688,547.02,133.357);
	//face rectangle
	fill(238,168,136);
	rect(229.426,334.96,293.574,109.514);
	ellipse(375.838,443.838,292.949);
	ellipse(376.838,334.838,292.949);
	//bangs
	fill(64,32,10);
	arc(375.838, 327.838, 312, 312, PI, 0, CHORD);
	fill(238,168,136);
	triangle(303.838,334.838,373.838,201.838,445.838 ,334.838);
	fill(64,32,10)
	triangle(199.838,314.838,241.838,404.838,283.838 ,314.838);
	triangle(467.838,314.838,509.838,404.838,551.838,314.838);
	//mouth
	fill(226,119,113);
	arc(374.838, 443.838, 158.948, 158.948, 0, PI, CHORD);
	fill(199,86,94);
	ellipse(374.838,476.838,72.144,39.351 );
	//teeth
	fill(255,255,255);
	rect(314.874,444.269,118.054,18.731,0,0,9,9);
	//eyes
	fill(51,51,51);
	arc(303.838 , 381.838, 38.258, 38.258, PI, 0, CHORD);
	arc(445.838 , 381.838, 38.258, 38.258, PI, 0, CHORD);
	//nose
	fill(226,119,113);
	arc(375.838, 417.838, 44.817, 44.817, PI, 0, CHORD);
	//cheeks
	fill(226,134,129);
	ellipse(262.838,433.838,48.096);
	ellipse(487.838,433.838,48.096);
	//shirt
	fill(55,68,156);
	rect(306.129 ,623.536,146.474,19.676 );
	rect(306.129,658.515,146.474,69.958);
	fill(255,255,255);
	ellipse(377.838,684.838,17.489);
	//bunny base
	fill(255,255,255);
	rect(634.057,597.302,196.757,140);
	ellipse(732.838,588.838,196.757);
	rect(634.057,418.035,67.772,170.523);
	rect(763.042,418.035,67.772,170.523);
	ellipse(667.838,420.838,67.772);
	ellipse(796.838,420.838,67.772);
	//bunny eyes
	fill(51,51,51);
	ellipse(700.838 ,595.838,10.931);
	ellipse(770.838,595.838,10.931);
	//bunny nose
	fill(226,119,113);
	ellipse(736.838,615.838,26.234,15.303);
	ellipse(792.838,631.838,41.538);
	ellipse(674.838,631.838,41.538);










}

Project 1 – Self Portrait

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

function draw() {
	background(230);

	strokeWeight(10);
	stroke(0);
	fill(208, 173, 167);
	rect(0, 0, 250, 250);
	fill(173, 106, 108);
	circle(125, 125, 250);
	fill(106, 123, 118);
	rect(250, 0, 250, 250);
	fill(58, 78, 72);
	circle(375, 125, 250);
	fill(106, 123, 118);
	rect(0, 250, 250, 250);
	fill(58, 78, 72);
	circle(125, 375, 250);
	fill(208, 173, 167);
	rect(250, 250, 250, 250);
	fill(173, 106, 108);
	circle(375, 375, 250);
	//background pattern

	strokeWeight(10);
	noFill();
	stroke(0);
	rect(0, 0, 500, 500);
	//border

	noStroke();
	fill(0);
	rect(117, 112, 266, 240);
	arc(250, 350, 266, 210, 0, PI);
	//face border

	noStroke();
	
	fill(232, 214, 203);
	rect(125, 120, 250, 230);
	fill(232, 214, 203);
	arc(250, 350, 250, 200, 0, PI);
	//face shape

	strokeWeight(8);
	stroke(0);
	fill(173, 160, 151);
	arc(375, 310, 70, 80, radians(270), HALF_PI);
	arc(125, 230, 70, 80, HALF_PI, radians(270));
	//ears

	fill(4, 3, 3);
	arc(193.5, 120, 145, 130, PI, 0);
	arc(338.5, 120, 145, 130, 0, PI);
	//hair

	line(117, 116, 415, 116);
	line(121, 112, 121, 270);
	line(379, 200, 379, 350);
	//hair border, ear border


	strokeWeight(8);
	stroke(0);
	strokeCap(SQUARE);
	line(250, 225, 250, 350);
	//nose line

	noFill();
	arc(200, 225, 100, 70, PI, 0);
	//eyebrows

	line(200, 385, 300, 385);
	//mouth

	strokeWeight(3);
	arc(250, 415, 30, 12, PI, 0);
	arc(195, 385, 10, 15, HALF_PI, radians(270));
	arc(305, 385, 10 ,15, radians(270), HALF_PI);
	//features

	fill(37, 23, 26);
	circle(190, 250, 25);
	triangle(250, 348.5, 215, 348.5, 250, 280);
	//left eye, nose

	noFill();
	strokeWeight(8);
	stroke(0);
	circle(310, 250, 25);
	//right eye








}

Project 1 – Self Portrait

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

function draw() {
	background(164,138,187);
	//shirt
	noStroke();
	fill(58,101,244);
	ellipse(500,1000,800, 600);
	//collar
	noStroke(); 
	fill(160,160,160);
	rect(450,700,100,450);
	//neck
	noStroke();
	fill(161,118,72);
	ellipse(500,700,300,350);
	//left ear
	noStroke();
	fill(216,160,107);
	ellipse(250,500,75,150);
	//right ear
	noStroke();
	fill(216,160,107);
	ellipse(750,500,75,150);
	//beard
	noStroke();
	fill(184,137,86);
	ellipse(500,500,500,600);
	//hair
	noStroke(); 
	fill(103,78,54);
	ellipse(500,400,500,400);
	//face
	noStroke();
	fill(216,160,107);
	ellipse(500,475,475,300);
	//nose
	noStroke(); 
	fill(196,143,93);
	rect(475,480,50,125);
	//lips
	noStroke();
	fill(185,94,75);
	ellipse(500,670,140,40);
	//left eybrow
	noStroke(); 
	fill(103,78,54);
	rect(360,445,100,25);
	//right eybrow
	noStroke(); 
	fill(103,78,54);
	rect(540,445,100,25);
	//left eye
	noStroke(); 
	fill(255,255,255);
	ellipse(410,505,65,23);
	//right eye
	noStroke(); 
	fill(255,255,255);
	ellipse(590,505,65,23);
	//left pupil
	noStroke(); 
	fill(58,101,244);
	ellipse(410,505,23,23);
	//right pupil
	noStroke(); 
	fill(58,101,244);
	ellipse(590,505,23,23);
}

Project 1 – Self Portrait

How I was feeling that week.

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

function draw() {
	background (130, 130, 130);
    noStroke();
    fill('#4d6a7b') //blue
    rect(random(0, 600), random(0, 600), 3, 40);    //rain
    rect(random(0, 600), random(0, 600), 3, 40);    //rain
    rect(random(0, 600), random(0, 600), 3, 20);    //rain
    rect(random(0, 600), random(0, 600), 3, 20);    //rain
    fill(255, 255, 255);
	ellipse(300, 184, 266, 211);   //hat
    triangle(182, 64, 185, 134, 227, 96);   //ear
    triangle(600-182, 64, 600-185, 134, 600-227, 96);   //ear
    fill('#000000');
    ellipse(300, 224, 174, 164);    //head
    rect(213, 227, 174, 144);   //hair
    fill('#ddb88d')
    rect(246, 206, 105, 112);   //face
    ellipse(299, 304, 127, 58); //cheeks
    rect(288, 325, 22, 35); //neck
    fill('#bb7522')
    ellipse(300, 449, 143, 203);    //shirt
    fill('#ddb88d')
    rect(230, 424, 25, 124);    //left arm
    rect(345, 424, 25, 124);    //right arm
    fill('#000000');
    triangle(239, 205, 363, 182, 363, 242);     //fringe
    ellipse(273, 269, 9, 21);   //left eye
    ellipse(325, 269, 9, 21);   //right eye
    stroke(0, 0, 0);
    strokeWeight(3);
    line(288, 300, 310, 300);   //mouth
    noStroke();
    fill('#f69180');
    ellipse(259, 295, 21, 10);  //deimple1
    ellipse(336, 295, 21, 10);  //deimple2
    fill('#752516');    //red
    triangle(288, 428, 318, 428, 300, 460);     //fox pattern1
    triangle(288, 428, 285, 418, 298, 428);     //fox pattern2
    triangle(306, 428, 321, 418, 318, 428);     //fox pattern3
    fill('#4d6a7b') //blue
    rect(0,517, 600, 83);   //puddle




}

Project 1 – Self Portrait

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

function draw() {
	
	noStroke();
	fill(0);
	ellipse(400, 300, 500); //hair circle
	
	rect(150, 300, 500, 300); //hair box

	fill(255, 242, 230);
	ellipse(400, 350, 400, 450); //face

	fill(0);
	triangle(410, 115, 210, 145, 195, 350);
	triangle(390, 115, 590, 145, 605, 350);
	
	stroke(0);
	strokeWeight(4);
	fill(243, 118, 86);
	ellipse(400, 450, 130, 130); //mouth

	noStroke();
	fill(255, 242, 230); 
	rect(325, 380, 150, 70); //mouth cover

	stroke(0);
	line(335, 450, 465, 450); //mouth line

	line(390, 380, 390, 390); //nose lines
	line(410, 380, 410, 390);

	fill(255);
	//ellipse(315, 330, 75, 35);
	//ellipse(485, 330, 75, 35);
	fill(0);
	circle(315, 330, 20); //eyes
	circle(485, 330, 20);
	strokeWeight(20);
	line(340, 300, 300, 285);
	line(460, 300, 500, 285); //eyebrows

	noStroke();
	fill(249,185,169);
	ellipse(300, 382, 75, 32);
	ellipse(500, 382, 75, 32);
	
}

Project-01-Self Portrait

Self-Portrait Attempt!

project-01-portrait
function setup() {
    createCanvas(500, 700);
    background(225, 65, 86);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    stroke(0);
    strokeWeight(4);
    fill(255, 85, 171);
    ellipse(250, 350, 378, 554);
    strokeWeight(1);
    fill(255, 255, 51);
    square(100, 170, 100);
    strokeWeight(5);
    fill(10, 154, 250);
    circle(349, 304, 156);
    strokeWeight(2);
    fill(153, 255, 51);
    rect(274, 120, 56, 400);
    strokeWeight(6);
    fill(204, 255, 255);
    quad(130, 256, 318, 105, 250, 478, 109, 284);
    strokeWeight(3);
    fill(68, 253, 62);
    rect(150, 110, 132, 146);
    strokeWeight(3);
    fill(178, 255, 102);
    ellipse(250, 500, 300, 140);
    strokeWeight(1);
    fill(247, 255, 0);
    triangle(154, 428, 336, 350, 297, 543);
    strokeWeight(4);
    fill(54, 229, 255);
    circle(130, 380, 150);
    noFill();
    line(210, 627, 290, 627);
    line(101, 530, 210, 627);
    line(290, 627, 399, 530);
    line(70, 325, 101, 530);
    line(430, 325, 399, 530);
    line(76, 255, 70, 325);
    line(424, 255, 430, 325);
    arc(250, 400, 56, 10, 210, 0);
    fill(255);
    ellipse(150, 300, 79, 65);
    ellipse(350, 300, 79, 65);
    fill(0, 26, 154);
    circle(150, 300, 65);
    circle(350, 300, 65);
    fill(225, 65, 86);
    triangle(150, 73, 250, 73, 120, 255);
    triangle(350, 73, 250, 73, 400, 255);
    triangle(145, 90, 20, 325, 120, 255);
    triangle(355, 90, 480, 325, 380, 255);
    strokeWeight(7);
    noFill();
    arc(150, 245, 85, 15, 0, 160);
    arc(350, 255, 85, 25, 30, 0);
    strokeWeight(4);
    arc(250, 465, 110, 5, 0, 160);
}

Project 1 – Self Portrait

This is what I look like when I am sad…

sad-portrait 
let r;
    g;
    b;

function setup() {
    createCanvas(600, 600);
     background(255,245,200);
     //pixelDensity(5);
 }

function draw() {
 background(100,245,150);
   

    //face
    noStroke();
    fill(255);
    ellipse(288,225,130,140);
   
    //hat
    strokeWeight(0);
    fill(0);
    rectMode(CENTER);
    rect(270,185,150,30,209,144,144,144);
    arc(290, 185, 100, 100,-PI, 0);

    // left eye
    strokeWeight(2);
    stroke(0);
    fill(255);
    ellipse(250, 235, 30, 40);
    
    noStroke();
    r = random(111, 218);
    g = random(72, 47);
    b = random(209, 67);
    fill(r, g, b);
    beginShape();
    vertex(235, 235);
    vertex(245, 229);
    vertex(250, 215);
    vertex(255, 229);
    vertex(265, 235);
    vertex(255, 242);
    vertex(250, 255);
    vertex(245, 242);


    endShape(CLOSE);   

    // right eye
    strokeWeight(2);
    stroke(0);
    fill(255);
    ellipse(300, 235, 30, 40);
    noStroke();
    r = random(111, 218);
    g = random(72, 47);
    b = random(209, 67);
    fill(r, g, b);
    
    beginShape();
    vertex(285, 235);
    vertex(295, 229);
    vertex(300, 215);
    vertex(305, 229);
    vertex(315, 235);
    vertex(305, 242);
    vertex(300, 255);
    vertex(295, 242);
    endShape(CLOSE);

  

    //left wing

    stroke(0);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(250, 290);
    curveVertex(250, 290);
    curveVertex(190,250);
    curveVertex(130,235);
    curveVertex(90, 255);
    curveVertex(80,290);
    curveVertex(120, 320);
    curveVertex(160, 340);
    curveVertex(120, 380);
    curveVertex(115, 455);
    curveVertex(195, 410);
    curveVertex(235, 370);
    endShape();

   //right wing

    stroke(2);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(355, 292);
    curveVertex(355,292);
    curveVertex(395,225);
    curveVertex(455,190);
    curveVertex(530,197);
    curveVertex(555,250);
    curveVertex(545,292);
    curveVertex(520,325);
    curveVertex(475,342);
    curveVertex(427,350);
    curveVertex(385,345);
    curveVertex(438,372);
    curveVertex(457,407);
    curveVertex(400,413);
    curveVertex(385,390);
    curveVertex(385,390);

    
    endShape();


    //mouth
    //ellipse(280,275,10,7);
    arc(280, 275, 10, 10, PI, 0);


    //body
    fill(255);
    noStroke();
    ellipse(300, 600, 100, 600);

    //tear
    fill(0,0,230);
    ellipse(310, 265, 8, 10);
    ellipse(315, 285, 11, 13);
    ellipse(247,260, 8,10);
    ellipse(245, 277, 11, 13);
  
//background
    fill(255);
 beginShape();
    vertex(85, 235);
    vertex(95, 229);
    vertex(100, 215);
    vertex(105, 229);
    vertex(115, 235);
    vertex(105, 242);
    vertex(100, 255);
    vertex(95, 242);
    endShape(CLOSE);

  
    

}