Category: Project-01-Face

Project 1: My Self Portrait

My eyes blink 😉

jasmin-portrait
//jasmink
//face portrait

function setup() {
    createCanvas(500, 450);
    background(202,179,231);
}

function draw() {
  //hair
    noStroke();
    fill(24,14,46);                     //top hair
    arc(250,240, 195, 217, PI, TWO_PI); //top hair
    fill(24,14,46);                     //back long hair
    ellipse(250, 286, 220, 310);
    ellipse(250, 315, 230, 310);


  //ear
    noStroke();
    fill(67,47,144);                  //Ear purple
    ellipse(168,250,17,50);           //Left ear
    ellipse(333,250,17,50);           //right ear
    fill(137,122,184);                //Earing purple
    ellipse(170,275,30,30);           //Left earing
    ellipse(330,275,30,30);           //right earing

  //neck
    fill(77,63,150);
    noStroke();
    quad(230,324,274,324,283,380,216,380);

  //face
    fill(77,63,150);                  //face purple
    noStroke();
    ellipse(250,260,155,180);         //face
    fill(77,63,150);                  //hair line.middle purple
    rect(250,145,3,25);               // hair line

  //left eyebrows
    strokeWeight(4);
    stroke(24,14,46);                 //dark purple
    line(238, 220,208 ,217);
    line(208,217, 196,221);

  //right eyebrows
    strokeWeight(4);
    line(268, 220,298 ,217);
    line(298,217,310,221);

  //nose
    strokeWeight(2);
    arc(252, 270, 15, 15, 0+(PI*0.2), (PI*0.8));
    noFill();

  //eyes
    strokeWeight(3);
    arc(220, 245, 35, 15, 0, PI);
    arc(285, 245, 35, 15, 0, PI);
    noFill();
    if(mouseY<245){
        arc(220, 245, 35, 15, 0, TWO_PI);
        arc(285, 245, 35, 15, 0, TWO_PI);
        fill(24,14,46);             //dark purple 
        ellipse(220,245,15,15);     //eyes opening
        ellipse(285,245,15,15);
        fill(137,122,184);          //light purple
        ellipse(223,243,8,8);       //eye small circle
        ellipse(287,243,8,8);
    }

  //mouth
    fill(24,14,46);                 //dark purple
    noStroke();
    rect(225, 310, 55, 3);

  //body
    fill(77,63,150);                //face purple
    noStroke();
    ellipse(250,560,250,400);       //body


}

Project 1 – Self Portrait

This is me. 100% real-to-life, unedited, me.

my-true-portrait
/* Lance Yarlott
   Section D */

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

    licenseAgreement = false;
    lightsOn = false;
    eyeLocXL = (width / 2) - 90;
    eyeLocXR = (width / 2) + 90;
    eyeLocY = (height / 2) - 90;
}

// big sorry for magic numbers lol

function draw() {
    if (licenseAgreement === false) {
        background(0);
        textAlign(CENTER);
        fill(255);
        textSize(20);
        text("Do you agree to the EULA? Press any key to continue.", 300, 300);
        if (keyIsPressed === true) licenseAgreement = true;
    } else {
        if (mouseIsPressed) {
            if (mouseButton === LEFT) lightsOn = true;
            if (mouseButton === CENTER) lightsOn = false;
        }

        /* I tried to bound mX and mY with the circumference of the eye and 
        failed miserably because p5 calculates the angles in a weird way? */ 
        
        mX = mouseX + 1 < 600 ? mouseX + 1 : 600;
        mY = mouseY + 1 < 600 ? mouseY + 1 : 600;
        
        mX = ((mX / 600) * 36) - 18;
        mY = ((mY / 600) * 36) - 18;

        if (lightsOn) {
            background(255, 244, 176); // light yellow

            strokeWeight(2);
            stroke(0);

            fill(0, 255, 0); // green
            triangle(width / 2, height / 3 + 140, 0, 600, 600, 600);
            fill(0);
            text("i am trgl", width / 2, 500);

            fill(245, 205, 149); // sort of a tan-ish color
            ellipse(width / 2, height / 3, 360, 360); // head shape

            fill(255); // eye whites
            arc(eyeLocXL, eyeLocY, 80, 80, 
                0, PI + QUARTER_PI, CHORD); // taken from p5 ref site
            arc(eyeLocXR, eyeLocY, 80, 80, 
                -QUARTER_PI, PI, CHORD);

            fill(77, 54, 21); // irises
            ellipse(eyeLocXL + mX, eyeLocY + mY, 40, 40);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 40, 40);

            fill(0); // pupils
            ellipse(eyeLocXL + mX, eyeLocY + mY, 20, 20);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 20, 20);

            strokeWeight(40);
            stroke(245, 205, 149);
            noFill();
            ellipse(eyeLocXL, eyeLocY, 120, 120);
            ellipse(eyeLocXR, eyeLocY, 120, 120);
            strokeWeight(2);

            fill(245, 205, 149); // lids
            noStroke();
            arc(eyeLocXL, eyeLocY, 82, 82, 
                PI + QUARTER_PI, 0, CHORD);
            arc(eyeLocXR, eyeLocY, 82, 82, 
                PI, -QUARTER_PI, CHORD);

            fill(77, 54, 21);
            arc(width / 2, height / 3, 360, 360, -PI + QUARTER_PI, -QUARTER_PI);

            fill(0);
            triangle(width / 2, eyeLocY + 30, width / 2 - 25, eyeLocY + 80, 
                     width / 2 + 25, eyeLocY + 80);

            stroke(0);
            strokeWeight(10);
            line(eyeLocXL, height / 3 + 120, eyeLocXR, height / 3 + 120);
            strokeWeight(2);

        } else {
            background(0);
            textAlign(CENTER);
        fill(255);
        textSize(20);
        text("Click, friend.", 300, 300);

            fill(255); // eye whites
            ellipse(eyeLocXL, eyeLocY, 80, 80); 
            ellipse(eyeLocXR, eyeLocY, 80, 80);

            fill(0); // irises
            ellipse(eyeLocXL + mX, eyeLocY + mY, 40, 40);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 40, 40);

            strokeWeight(40);
            stroke(0);
            noFill();
            ellipse(eyeLocXL, eyeLocY, 120, 120);
            ellipse(eyeLocXR, eyeLocY, 120, 120);
            strokeWeight(2);
        }
    }
}

One difficulty was trying to get the eye tracking working. JS calculates angles in an odd way, so moving in a circular motion was mostly impossible to get right for the time being.

Project 1 – Self Portrait

portrait 
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
// Project-01

function setup() {
    createCanvas(500,500);
    background(212,207,232);
    }

function draw() {
	
	//sideface
	noStroke()
	fill(255);
	point(440,142);
	point(436,161);
	point(435,173);
	point(444,185);
	point(434,188);
	point(434,201);
	point(418,217);
	point(384,198);
	point(395,155);
	point(395,127);
	point(417,113);
	point(434,129);
	point(440,141);
	point(439,153);

	fill(255);
	beginShape();
	curveVertex(440,142);
	curveVertex(436,161);
	curveVertex(435,173);
	curveVertex(444,185);
	curveVertex(434,188);
	curveVertex(432,201);
	curveVertex(418,217);
	curveVertex(384,198);
	curveVertex(395,155);
	curveVertex(395,127);
	curveVertex(417,113);
	curveVertex(434,129);
	curveVertex(440,141);
	curveVertex(439,153);
	endShape();

	//sharpness in nose
	triangle(430,190,446,185,433,177);

	//sharpness in chin
	triangle(422,220,397,210,427,212);

	//right eye
	strokeWeight(1);
	stroke(0);
	curve(426,172, 426,172,423,163,407,167);
	curve(426,172,423,163,407,167,418,172);
	curve(423,163,407,167,418,172,418,172);
	
	fill(0);
	ellipse(419,168,8,9);

	strokeWeight(1);
	line(426,172,417,172);

    //twinkle in the eye
 	fill(255);
 	circle(418,165,2);

 	//eyeliner
 	noFill();
 	arc(407,166,4,2,HALF_PI,PI);

	//body from neck to shoulder
	noStroke()
	fill(255);
	point(375,208);
	point(378,196);
	point(395,204);
	point(385,250);
	point(430,287);
	point(422,313);
	point(332,313);
	point(350,230);
	point(381,196);

	fill(255);
	beginShape();
	curveVertex(375,208);
	curveVertex(378,196);
	curveVertex(395,204);
	curveVertex(385,250);
	curveVertex(430,287);
	curveVertex(422,313);
	curveVertex(332,313);
	curveVertex(350,230);
	curveVertex(381,196);
	endShape(close);

	//body shoulder to waist
	fill(255);
	quad(434,306,353,436,293,436,335,287);

	//hair
	strokeWeight(1);
	point(436,117);
	point(440,139);
	point(435,115);
	point(423,97);
	point(395,87);
	point(350,92);
	point(310,136);
	point(198,325);
	point(174,477);
	point(273,456);
	point(324,373);
	point(350,250);
	point(382,200);
	point(398,153);
	point(402,126);
	point(417,113);
	point(430,123);
	point(440,141);
	strokeWeight(1);

	fill(0);
	beginShape();
	curveVertex(436,117);
	curveVertex(440,139);
	curveVertex(435,115);
	curveVertex(423,97);
	curveVertex(395,87);
	curveVertex(350,92);
	curveVertex(310,136);
	curveVertex(198,325);
	curveVertex(174,477);
	curveVertex(273,456);
	curveVertex(324,373);
	curveVertex(350,250);
	curveVertex(382,200);
	curveVertex(398,153);
	curveVertex(402,126);
	curveVertex(417,113);
	curveVertex(430,123);
	curveVertex(440,141);
	endShape();
}

Project 1: My Self Portrait

self-portrait
//Jessie Chen
//Section D
function setup() {
    createCanvas(1000, 1000);
    background(252, 247, 135);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //shirt
    noStroke();
    fill(250, 221, 187);
    rect(200, 700, 600, 600, 150);
    fill(128, 36, 25);
    rect(650, 700, 40, 300);
    rect(360, 700, 40, 300);
    arc(600, 1000, 150, 100, -PI, 0);
    arc(450, 1000, 150, 100, -PI, 0);
    //hair
    fill(49, 29, 22);
    rect(230, 190, 530, 650, 300, 280, 50, 50);
    //face
    noStroke();
    fill(250, 221, 187);
    beginShape();
        curveVertex(400, 480);
        curveVertex(400, 480);
        curveVertex(430, 600);
        curveVertex(525, 672);
        curveVertex(610, 680);
        curveVertex(685, 610);
        curveVertex(705, 470);
        curveVertex(680, 360);
        curveVertex(625, 285);
        curveVertex(550, 295);
        curveVertex(485, 400);
        curveVertex(400, 450);
        curveVertex(400, 480); 
        endShape();
    //ear
    fill(250, 221, 187);
    ellipse(375, 475, 55, 100);
    ellipse(372, 525, 30, 40);
    quad(350, 490, 380, 560, 420, 580, 700, 435);
    //neck
    fill(49, 29, 35);
    rect(400, 425, 30, 100, 50);
    fill(250, 221, 187);
    rect(440, 580, 155, 400, 0, 50, 50, 50);
    stroke(49, 29, 22);
    strokeWeight(23);
    strokeJoin(ROUND);
    line(345, 517, 405, 573);
    line(405, 573, 446, 645);
    line(446, 645, 445, 829);
    //eyebrow
    noFill();
    stroke(49, 29, 22);
    strokeWeight(7);
    strokeJoin(BEVEL);
    line(635, 400, 685, 393);
    line(685, 393, 720, 405);
    line(560, 400, 515, 390);
    line(515, 390, 480, 405);
    //eyes
    noStroke();
    fill(255);
    ellipse(672, 455, 53, 25);
    ellipse(657, 455, 53, 28);
    stroke(49, 29, 22);
    strokeWeight(5);
    line(695, 460, 680, 469);
    line(694, 462, 699, 466);
    line(685, 466, 690, 471);
    line(676, 471, 679, 476);
    strokeWeight(7);
    strokeJoin(ROUND);
    line(635, 450, 655, 442);
    line(655, 442, 660, 442);
    line(660, 442, 700, 452);
    fill(255);
    fill(49, 29, 22);
    ellipse(658, 455, 20, 20); //iris
    noFill();
    noStroke();
    fill(255);
    ellipse(530, 455, 55, 28);
    ellipse(515, 460, 60, 28);
    strokeWeight(5)
    stroke(49, 29, 22);
    line(480, 460, 500, 470);
    line(481, 462, 476, 466);
    line(490, 466, 485, 470);
    line(499, 470, 496, 474);
    strokeWeight(7);
    strokeJoin(ROUND);
    line(560, 451, 532, 442);
    line(525, 442, 528, 442);
    line(528, 442, 480, 452);
    fill(49, 29, 22);
    ellipse(528, 455, 20, 20); //iris
    //face shadow
    stroke(221, 132, 101);
    line(628, 425, 615, 450);
    line(615, 462, 615, 480);
    fill(221, 132, 101);
    noStroke();
    ellipse(645, 422, 35, 25);
    ellipse(555, 422, 35, 25);
    arc(375, 470, 30, 50, PI, PI / 6, CHORD);
    ellipse( 385, 480, 10, 55);
    fill(128, 36, 25);
    ellipse(640, 425, 15, 10);
    ellipse(560, 425, 15, 10);
    stroke(221, 132, 101);
    line(459, 648, 490, 665);
    line(587, 688, 563, 685);
    //nose
    noStroke();
    fill(221, 132, 101);
    ellipse(605, 520, 25, 25);
    fill(49, 29, 22);
    ellipse(618, 535, 15, 10);
    ellipse(585, 535, 15, 10);
    //mouth
    fill(221, 132, 101);
    ellipse(600, 585, 55, 25);
    ellipse(600, 605, 50, 35);
    stroke(49, 29, 22);
    line(570, 593, 623, 593);
    line(623, 593, 628, 595);
    noStroke();
    fill(128, 36, 25);
    ellipse(605, 588, 30, 5);
    //face highlight
    noStroke();
    fill(255);
    ellipse(595, 520, 10, 5);
    ellipse(600, 573, 25, 5);
    ellipse(586, 600, 25, 5);
    ellipse(610, 463, 5, 40);
    //glasses
    noFill();
    stroke(128, 36, 25);
    ellipse(520, 465, 135, 120);
    ellipse(685, 465, 135, 120);
    line(585, 440, 623, 440);
    line(456, 440, 403, 455);
    line(745, 440, 708, 455);
    stroke(255);
    arc(515, 465, 120, 100, 0, QUARTER_PI);
    arc(680, 465, 120, 100, 0, QUARTER_PI);
    //earrings
    line(375, 520, 375, 600)
    noStroke();
    fill(255);
    ellipse(375, 600, 30, 30);
    noLoop();
}

It was very hard to figure out how to translate and rotate shapes and I ran out of time so I had to scratch that idea. But overall this project was really fun : D

Project 1: Self Portrait

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

function draw() {
    background(50, 31, 23);
    strokeWeight(0);
    fill(215, 188, 185);
    rect(150, 400, 300, 300);
    fill(230, 188, 180);
    circle(303, 150, 400);
    quad(125, 380, 480, 380, 500, 125, 105, 125);
    quad(125, 380, 480, 380, 350, 490, 255, 490);
    fill(230, 178, 175);
    quad(290, 195, 265, 340, 340, 340, 315, 195);
    triangle(265, 340, 250, 320, 300, 320);
    triangle(340, 340, 355, 320, 300, 320);
    triangle(225, 385, 263, 370, 300, 385);
    triangle(300, 385, 337, 370, 375, 385);
    fill(50, 31, 23);
    triangle(125, 195, 210, 180, 250, 195);
    triangle(350, 195, 390, 180, 480, 195);
    fill(250, 250, 250);
    ellipse(200, 225, 100, 50);
    ellipse(400, 225, 100, 50);
    fill(50, 31, 23);
    rect(25, 0, 600, 80);
    triangle(300, 90, 325, 80, 275, 80);    
    fill (50, 31, 23);
    circle (200, 225, 40);
    circle(400, 225, 40);
    fill(0, 0, 0);
    quad(150, 450, 210, 600, 0, 600, 0, 500);
    quad(450, 450, 390, 600, 600, 600, 600, 500);
    arc(300, 395, 150, 120, 0, PI);
    circle(200, 225, 15);
    circle(400, 225, 15);
    fill(250, 250, 250);
    rect(225, 385, 150, 15);
    //fill(250, 0, 0)
    //arc(300, 415, 150, 100, 0, PI)
} 

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

function draw() {
    background(50, 31, 23);
    strokeWeight(0);
    fill(215, 188, 185);
    rect(150, 400, 300, 300);
    fill(230, 188, 180);
    circle(303, 150, 400);
    quad(125, 380, 480, 380, 500, 125, 105, 125);
    quad(125, 380, 480, 380, 350, 490, 255, 490);
    fill(230, 178, 175);
    quad(290, 195, 265, 340, 340, 340, 315, 195);
    triangle(265, 340, 250, 320, 300, 320);
    triangle(340, 340, 355, 320, 300, 320);
    triangle(225, 385, 263, 370, 300, 385);
    triangle(300, 385, 337, 370, 375, 385);
    fill(50, 31, 23);
    triangle(125, 195, 210, 180, 250, 195);
    triangle(350, 195, 390, 180, 480, 195);
    fill(250, 250, 250);
    ellipse(200, 225, 100, 50);
    ellipse(400, 225, 100, 50);
    fill(50, 31, 23);
    rect(25, 0, 600, 80);
    triangle(300, 90, 325, 80, 275, 80);    
    fill (50, 31, 23);
    circle (200, 225, 40);
    circle(400, 225, 40);
    fill(0, 0, 0);
    quad(150, 450, 210, 600, 0, 600, 0, 500);
    quad(450, 450, 390, 600, 600, 600, 600, 500);
    arc(300, 395, 150, 120, 0, PI);
    circle(200, 225, 15);
    circle(400, 225, 15);
    fill(250, 250, 250);
    rect(225, 385, 150, 15);
    ellipse((width / 2), (height / 2), 60, 60);
    //fill(250, 0, 0)
    //arc(300, 415, 150, 100, 0, PI)
}

Project 01 – My Self-Portrait

My (abstract) self portrait.

myselfportrait

function setup() {
    createCanvas(600, 600);
    background(229, 204, 205) //muted pink
}

function draw() {
    fill(150, 72, 75) //mauve
    strokeWeight(0)
    ellipse (365,330,400,475) //face shape
    noFill();
    strokeWeight(5)
    stroke(207, 230, 145); // neon green line
    bezier(150, 0, 10, 80, 120, 60, 0, 120); // hair
    bezier(250, 0, 10, 80, 120, 60, 0, 220);
    strokeWeight(2);
    bezier(200,250,250,300,300,250,300,250); //eye
    line(210,260,200,270); //eyelashes
    line(230, 270, 225, 285);
    line (250, 272, 250, 290);
    arc(350,450,50,30,PI,0); // left top lip
    arc(400,450,50,30,PI,0); // right top lip
    arc(375,450,100,40,0,PI,CHORD); // bottom lip
    bezier(175,200,375,175,375,250,365,350); // brow bone 
    bezier(365,350,330,360,370,400,390,365); // nose
    bezier(150,150,150,550,280,500,390,540); // jawline
}

Project 01-Self Portrait

This is what I look like in the winter

sketch
function setup() {
    createCanvas(600,500);
    background(220);
   
}

function draw() {
	fill(94, 137, 230);
    circle(300,60,70);//binnie tail
	fill(94, 137, 230 );
    ellipse(300,150,170,200);//binne
    fill(238, 226, 201);
    rect(255, 330, 85, 95);//neck
	fill(238, 226, 201); 
	circle(300,250,200);//face
	fill(0,0,0)
	rect(230,190,50,10);//left eyebrow
	fill(0,0,0)
	rect(325,190,50,10);//right eyebrow
	fill(0, 0, 0);
	circle(256,224,30);//left eye
	fill(0, 0, 0);
	circle(347,222,30);//right eye
	fill(232, 206, 149);
    triangle(275, 275, 303, 220, 331, 275)//nose
    fill(238, 118, 214 );
    ellipse(300, 315, 65, 55);//mouth
    fill(245, 129, 75 );
    ellipse(300,500,350,250);//body
   


    
    
 

}

PROJECT01 – Self Portrait

rdrice_por
//Robert Rice
//Section C

function setup() {
    createCanvas(400, 400);
    background(75);
    
    fill(255);
    text("rdrice. p5.js vers 0.9.0", 10, 15);  //ver+author text
}

function draw() {
    noStroke();

    fill(255, 255, 0);
    triangle(200,-280, 350,400, 50,400);

    fill(170, 50, 50);
    rect(240, 290, 30, 110);
    fill(180, 70, 70);
    circle(255, 290, 30);   //left sleeve

    fill(180, 50, 50);
    rect(135, 290, 120, 110);
    fill(190, 60, 60);
    circle(195, 290, 120);
    fill(245, 205, 155);
    circle(195, 260, 60);   //body

    fill(170, 50, 50);
    rect(120, 290, 30, 110);
    fill(180, 70, 70);
    circle(135, 290, 30);   //right sleeve

    fill(230, 190, 145);
    quad(180,195, 180,240, 200,240, 210,195);   //neck

    fill(245, 205, 155);
    rect(155, 65, 90, 130); //head

    fill(185, 145, 95);
    rect(200, 181, 47, 2); //mouth

    fill(110, 85, 55);
    triangle(245,80, 269,83, 245,95);
    fill(170, 130, 80);
    triangle(155,130, 155,65, 135,62);
    fill(155, 120, 75);
    triangle(155,65, 270,85, 200,50);
    fill(135, 105, 65);
    triangle(230,65, 245,65, 270,85);   //hair

    fill(230, 180, 120);
    triangle(242-2,165, 262-2,160, 242-2,110);    //nose

    fill(230, 180, 120);
    circle(155, 130, 20);   //ear

    fill(150,0,150);
    circle(190,113, 10);
    circle(260,113, 10);    //eye bags

    fill(0);
    circle(190,110,10);
    circle(260,110,10);     //eyes

    strokeWeight(1);
    stroke(185, 145, 95);
    line(200,113,197,123);
    line(250,113,253,123);  //wrinkles

    noFill();
    stroke(0);
    arc(194, -101, 413, 413, 1.345998, 1.614255);
    arc(264, -101, 413, 413, 1.345998, 1.614255);   //eyebrows

    noLoop();
}

-Robert

Project 01 – Self Portrait

this is my portrait

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

function draw() {
  background(255,95,148);
  fill(255,255,255);
  noStroke();
  ellipse(138,115,116);
  ellipse(379,211,171);
  fill(62,255,57);
  ellipse(139,125,50);
  ellipse(402,187,60);
  triangle(222,193,149,214,219,380);
  fill(255,210,21);
  rect(92,400,287,123);
  stroke(232,0,95);
  strokeWeight(5);
  line(95,32,170,32);
  line(324,100,424,100);
  arc(545,307,90,90,PI+QUARTER_PI ,QUARTER_PI );
}