Category: Project-01-Face

file

//Georgia Miller 
//Section D
function setup() {
    createCanvas(800,1000,);
    background(229,255,204);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    fill(204,102,0);
    strokeWeight(0);
    ellipse(315,490,480,720); //back of hair
    ellipse(340,340,440,430); //mid piece
    fill(255,229,191); 
    ellipse(500,525,240,200); //cheek
    ellipse(215,520,50,150); //ear
    ellipse(425,400,400,380); //forehead
    beginShape(QUADS); //chin and jaw
    vertex(255,580);
    vertex(320,695);
    vertex(530,720);
    vertex(555,710);
    endShape(CLOSE);
    beginShape(QUADS); //chin and jaw
    vertex(320,695);
    vertex(530,720);
    vertex(555,710);
    vertex(580,590);
    endShape(CLOSE);
    beginShape(QUADS); //chin and jaw
    vertex(230,460);
    vertex(255,580);
    vertex(500,690);
    vertex(525,570);
    endShape(CLOSE);

    fill(88,45,0);
    beginShape(); //eyebrows
    vertex(600,380)
    bezierVertex(480,330,540,365,510,357);
    bezierVertex(540,300,590,335,600,380);
    endShape();
    beginShape();
    vertex(480,370);
    bezierVertex(455,430,460,350,295,410);
    bezierVertex(330,350,435,346,480,370);
    endShape();

    fill(204,102,0); //bangs
    beginShape();
    vertex(450,155);
    bezierVertex(760,100,675,435,625,475);
    bezierVertex(560,230,610,345,450,155);
    endShape();
    beginShape();
    vertex(450,155);
    bezierVertex(645,100,610,380,570,430);
    bezierVertex(530,230,610,400,450,155);
    endShape();
    beginShape();
    vertex(450,155);
    bezierVertex(530,205,550,400,515,430);
    bezierVertex(500,200,530,345,450,155);
    endShape();
    beginShape();
    beginShape();
    vertex(400,200);
    bezierVertex(390,250,350,300,380,440);
    bezierVertex(340,350,315,234,400,200);
    endShape();
    beginShape();
    vertex(385,130);
    bezierVertex(320,360,230,100,330,490);
    bezierVertex(380,370,300,300,385,130);
    endShape();
    beginShape();
    fill(250)
    vertex(300,130);
    bezierVertex(260,360,170,100,240,490);
    bezierVertex(300,370,220,300,300,130);
    endShape();
    strokeWeight(0);


    fill(0) //eyeliner
    beginShape(QUADS);
    vertex(330,430);
    vertex(450,435);
    vertex(500,465);
    vertex(410,465);
    endShape();
    beginShape(QUADS);
    vertex(610,430);
    vertex(545,435);
    vertex(530,465);
    vertex(580,450);
    endShape();
    beginShape(TRIANGLES); //eyelashes
    vertex(395,465);
    vertex(400,470);
    vertex(380,475);
    endShape();
    beginShape(TRIANGLES);
    vertex(410,475);
    vertex(425,475);
    vertex(405,490);
    endShape();
    beginShape(TRIANGLES);
    vertex(580,470);
    vertex(585,470);
    vertex(590,465);
    endShape();
    beginShape(TRIANGLES);
    vertex(590,460);
    vertex(595,450);
    vertex(600,465);
    endShape();


    fill(250)
    ellipse(430,450,85,40) //white of eyes
    ellipse(560,450,60,40);
    stroke(0);
    strokeWeight(2);
    line(525,450,570,525); //nose bridge
    line(535,550,560,550);
    line(560,550,570,525);

    strokeWeight(0) //lips
    fill(243,176,176)
    beginShape();
    vertex(490,630);
    vertex(520,590);
    vertex(540,600);
    vertex(555,590);
    vertex(570,605);
    vertex(565,630);
    vertex(530,640);
    endShape();
 
    stroke(100) //cheekbone
    strokeWeight(1)
    line(250,520,405,590);
    line(405,590,450,665);

    strokeWeight(0);  //cheekbone
    fill(255,229,191); 
    beginShape();
    vertex(255,580);
    vertex(280,800);
    vertex(230,885);
    vertex(420,940);
    vertex(580,910);
    vertex(515,870);
    vertex(490,710);
    endShape();

    strokeWeight(2);//jawline
    stroke(0);
    line(530,720,555,710);
    line(320,695,530,720);
    line(555,710,580,590);
    line(230,460,255,580);
    line(255,580,320,695);

    ellipseMode(RADIUS); //eyeballs
    fill(171,228,242);
    strokeWeight(0)
    ellipse(425, 450, 20, 20); // Outer white ellipse
    ellipseMode(CENTER);
    fill(0);
    ellipse(425, 450, 18, 18); // Inner gray ellipse
    fill(171,228,242);
    ellipseMode(RADIUS); 
    ellipse(560, 450, 17, 17); // Outer white ellipse
    ellipseMode(CENTER);
    fill(0);
    ellipse(560, 450, 15, 15); // Inner gray ellipse

    fill(255,44,199,50); //blush
    ellipse(515,505,300,36);

    fill(255); //nose shine
    ellipse(550,520,20,20);
    noLoop();

}

The most challenging thing about this project was trying to find a way to create my bangs. I ended up using really long code.

Yash-self portrait

//Yash Mittal
// Section D
function setup() {
    createCanvas(600,700);
    background(255,196,206);
}

function draw() {
    noStroke();
    fill(34,10,11);
    ellipse(300,360,230,80); //shoulder
    fill(150,117,86);//neck
    quad(280,300,320,300,340,340,260,340); //neck
    ellipse(300,340,80,40); //neck ellipse
    fill(80,77,67);//shadow
    ellipse(315,325,33,10);
    quad(260,290,318,290,332,325,300,327);//shadow
    fill(150,117,86);
    ellipse((width/2),(height/2)-140,150,200); //face
    fill(34,10,11);
    rect(186,360,228,240);//main body
    fill(255,243,139);//belt
    rect(186,600,228,20);
    fill(81,192,248);//legs
    rect(186,620,85,200);
    rect(329,620,85,200);
    fill(34,10,11);//arms
    rotate(20/3.0);
    ellipse(320,388,60,300);
    rotate(20/3.0);
    ellipse(530,-120,63,300);
    fill(150,117,86); // hands
    ellipse(489,365,60,60); // left hand
    ellipse(530,-250,63,63)//right hand
    fill(35,42,51);//glasses
    stroke(255,243,139);
    strokeWeight(2);
    ellipse(325,-55,40,40);
    ellipse(365,-94,40,40);
    line(312,-40,291,-25);
    line(380,-110,395,-128);
    line(341,-71,350,-80)
    stroke(1,0,0);//mouth
    line(386,-10,415,-30);
    line(300,-74,320,-85);//eyebrows
    line(335,-100,350,-120);
    noStroke();//hat
    rotate(-40/3.0);
    fill(223,103,72);
    ellipse(300,128,180,30);//hat
    rect(250,70,100,70);
    ellipse(300,70,100,30)
    fill(211,213,216);//hat highlight
    arc(265,132,100,9,TWO_PI,PI);
    arc(274,110,50,6,TWO_PI,PI);
}
    

The most challenging part about this project was definitely trying to arrange the elements in their proper exact location. It took me a lot of attempts to get, for example the shadow, to line up perfectly with the rest of the elements.

Michelle-Self-Portrait

// Using p5.js, draw a self-portrait using at least 10 graphic elements, 
//such as lines, quads, ellipses, etc. You may use any graphical primitives you please,
// with the exception that you may not use drawing functions that require the loading of external assets (e.g. images, fonts). 
//Experiment with the use of at least 2 colors in addition to the background color.

function setup() {
    createCanvas(500, 550);
    background(150, 191, 215);
}

function draw() {


    strokeWeight(0);

    fill(31, 29, 19);
    rect(110, 150, 130, 350, 800, 20, 70, 40); //left hair
    rect(255,150, 130, 350, 800, 70, 40, 70); // right hair

    fill (218, 197, 150);
    rect(150, 100, 200, 250, 20, 30, 80,80); //head

    fill(31, 29, 19);
    rect(100, 50, 150, 180, 800, 70, 80, 40); // left bang
    rect(250, 50, 150, 180, 800, 70, 40, 80); // right bang
    arc(200, 250, 40, 30, PI, 0); // left eye
    arc(300, 250, 40, 30, PI, 0); // right eye
    rect(158, 50, 185, 95); //top hair


    fill (218, 197, 150);
    ellipse(200, 255, 40, 20); // left eye skin color
    ellipse(300, 255, 40, 20); //right eye skin color

    fill (255, 176, 222, 80);
    ellipse(170, 280, 90, 90); //left blush
    ellipse(325, 280, 90, 90); // right blush

    fill(200, 100, 73); 
    ellipse(250, 280, 40, 20); //nose

    fill (218, 197, 150);
    rect(220, 310, 60, 100); // neck

    fill(225);
    rect(150, 380, 200, 250, 80, 80, 0,0); // shirt


    fill (218, 197, 150);
    ellipse(250, 375, 60, 60); //neckline


    fill(0);
    arc(250, 300, 50, 50, 0, PI); //smile!



    strokeWeight(3); // necklace
    stroke(192, 169, 70);
    line(220, 380, 250, 420); 
    line(280, 380, 250, 420); 

    noStroke();
    fill(120, 190, 0);
    ellipse(250, 430, 10, 20); // jade





    noLoop();







}

I struggled most with finding the intended location of functions on the x and y axis. I did a lot of guess and checking until I was satisfied with the position, but I hope I can be more intentional in future projects.

chapman_SelfPortrait

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

function draw() {
    noLoop();
    noStroke();
    
    //hair back
    fill(90,39,14);     //brown
    ellipse(140,180,80);
    ellipse(360,180,80);
    ellipse(130,220,90);
    ellipse(370,220,90);
    fill(255,193,87);   //blonde
    rect(150,100,200,400,80,80,80,80);
    rect(130,150,35,400,80,80,80,80);
    rect(335,150,35,400,80,80,80,80);    
    
    //body
    fill(21,13,3);
    rect(137.5,400,225,300,80,80,80,80);

    //shoulder hair
    fill(90,39,14);
    rect(110,140,50,390,80,80,80,80);
    rect(340,140,50,390,80,80,80,80);
    rect(85,200,50,310,80,80,80,80);
    rect(365,200,50,310,80,80,80,80);
    rect(75,260,50,210,80,80,80,80);    //outermost hair
    rect(65,310,50,160,80,80,80,80);
    rect(375,260,50,210,80,80,80,80);   //outermost hair
    rect(385,310,50,160,80,80,80,80);
    //hair strands
    fill(255,193,87);
    rect(185,300,35,175,80,80,80,80);
    rect(285,300,35,175,80,80,80,80);

     //head
    fill(255,211,155);
    rect(150,100,200,250,80,80,80,80);
    rect(227.5,300,50,100,20,20,80,80); //neck 
    fill(225,162,0);
    rect(215,370,75,75,20,20,80,80);
    fill(21,13,3); 
    rect(215,360,75,75,20,20,80,80);   //turtleneck

    //hair front
    fill(90,39,14);
    rect(150,100,200,50,80,80,80,80);   //top hair
    rect(165,90,90,50,80,20,20,80);    //partL
    rect(250,90,90,50,20,80,80,20);    //partR
    rect(145,110,25,125,80,80,80,80);    //sideburnsL
    rect(330,110,25,125,80,80,80,80);    //sideburnsL
    rect(120,110,125,75,150,80,150,80);    //bangsL
    ellipse(170,125,50);
    rect(260,110,125,75,150,80,150,80);    //bangsR
    ellipse(330,125,50);

    //ears
    fill(255,211,155);
    rect(120,200,45,75,80,80,80,80);
    rect(340,200,45,75,80,80,80,80);
    //earrings
    fill(225,162,0);
    rect(135,260,10,40,80,80,80,80);
    rect(360,260,10,40,80,80,80,80);

    //eyes
    fill(45,139,81);
    ellipse(210,240,30);
    ellipse(290,240,30);

    //blush
    fill(255,146,146,90);
    ellipse(185,280,80);
    ellipse(315,280,80);

    //glasses
    strokeWeight(5);
    stroke(160,160,160)
    fill(300,300,300,70)
    ellipse(200,240,70);
    ellipse(300,240,70);
    line(235,240,265,240);

    //smile
    noStroke();
    fill(255,146,146);
    ellipse(250,275,30);
    fill(255,211,155);
    rect(235,260,30,15);
}


/*'Thank you to Michelle Dang for helping me with the
rounded rectangle corners, guiding the style for the
portait.*/
//black (21,13,3)
//brown hair (90,39,14)
//blonde hair (255,193,87)
//skin (255,211,155)
//eyes (45,139,81)
//glasses (220,220,220)
//purple bkg (195,159,220)
//gold (225,162,0)
//blush (255,146,146)

I found it most challenging to correctly place all “strands” of my hair.

sketch

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

function draw() {
    background(255, 192, 203);
    fill(59,25,7);
    rect(64,95,75,100); //hair
    fill(241, 194, 125);
    rect(90,135,20,20); //neck
    fill(255,235,238);
    rect(50,150,100,100); //body
    fill(241, 194, 125);
    ellipse(100, 100, 80, 80); //head
    fill(59,25,7);
    arc(62, 55, 60, 60, 0, PI / 2.0); //left bang
    fill(59,25,7);
    rect(92,56, 50,20); //right bang
    fill(59,25,7);
    rect(132,76,10,74); //strand
    fill(255,255,255);
    ellipse(75, 100, 30, 30); //left eye
    fill(255,255,255);
    ellipse(115, 100, 30, 30); //right eye
    fill(0,0,0);
    ellipse(75, 100, 10, 10); //left pupil
    fill(0,0,0);
    ellipse(115, 100, 10, 10); //right pupil
    stroke(0,0,0);
    fill(236,170,70);
    triangle(95,110,90,120,100,120); //nose
    noFill();
    arc(100, 110, 40, 40, 0, PI / 2.0); //mouth
}

I found it difficult to figure out arcs. My self-portrait is ugly-cute.

selfportrait

function setup() {
    createCanvas(500, 600);
    background(234,224,213);
    
}

function draw() {
    noStroke();

    fill(104,131,186)
    ellipse(250,300,400,400)

    fill(34,51,59)
    rect(60,400,380,400,170) // shirt

    fill(228, 194, 149)
    ellipse(250,400,120,100) //neck 1

    fill(228, 194, 149)
    rect(190,300,120,100) //neck 2

    fill(255,219,172)
    ellipse(250,280,180,250) //face

    fill(0)
    ellipse(250,190,200,110) // hair bottom

    fill(0)
    ellipse(320,190,80,90) //right hair

    fill(0)
    ellipse(165,230,40,60) //hair

    fill(0)
    ellipse(338,220,40,60) //hair

    fill(0)
    rect(150,220,30,85) //sideburn left

    fill(0)
    rect(320,200,30,80) //sideburn right

    fill(0)
    ellipse(165,200,50,70) // hair and sideburn connection

    fill(255,219,172)
    ellipse(160,300,45,70) //left ear

    fill(255,219,172)
    ellipse(340,300,45,70) //right ear

    fill(217,164,144)
    ellipse(340,300,35,50) //inner ear R

    fill(255,219,172)
    ellipse(338,303,35,50) //inner ear 2 R

    fill(217,164,144) 
    ellipse(160,300,35,50) //inner ear L

    fill(255,219,172)
    ellipse(162,302,35,48) //inner ear 2 L

    fill(255,219,172)
    ellipse(155,308,25,48) //inner ear 2 L

    fill(0)
    rect(195,270,34,10,10) // left eyebrow

    fill(0)
    rect(273,270,34,10,10) // right eyebrow

    fill(0)
    ellipse(213,297,14,14) //left eye

    fill(0)
    ellipse(290,297,14,14) //right eye

    fill(255)
    ellipse(250,345,80,70) // white smile

    fill(255,219,172)
    rect(200,305,100,50) //smile rectangle

    fill(203,168,123)
    ellipse(250,325,30,25) // nose

    fill(255,219,172)
    ellipse(250,320,30,25) //nose
    
    fill(254,212,208,200)
    ellipse(195,330,40,40)

    fill(254,212,208,200)
    ellipse(305,330,40,40)

}

The most challenging part about this project was creating the hair because that was the most unsymmetrical part and I wanted it to not just be one shape so I had to think about the shapes I wanted to use to create a “full” look to my hair.