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

Project 01: Portrait

// Emily Franco
// Section C
//Graphic elements used: ellipse,cicle,line,point,rect,square,tri,arc
var y_ref_pos = 150;
var x=0;
function setup() {
    createCanvas(500, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	//background
	strokeWeight(0);
	fill(random(100,200),random (100,200),random(100,200));
	rect(x,0,10,height);
	fill(217,245,228);
	rect(x+10,0,30,height);
	x=x+30;
	//--------HAIR-------
	//back hair
	fill (104, 66, 17); //dark brown
	ellipse (width/2, y_ref_pos+28,130,200);

	//--------CLOTHES-------
	fill (220, 96, 46); //orange
	arc((width/2)-16+22,y_ref_pos+79,140,35,Math.PI,0);
	//shirt 
	rect((width/2)-43.5,y_ref_pos+70,90.5,90);

	//------FACE-----
	strokeWeight (.25);
	//base ears 
	fill (238, 217, 197); //beige
	ellipse ((width/2)-53,y_ref_pos,16,30);
	ellipse ((width/2)+53,y_ref_pos,16,30);
	//neck 
	fill (238, 217, 197);//beige
	ellipse((width/2)-22+22.5, y_ref_pos+45+20,45,30);
	strokeWeight (0);
	rect((width/2)-22, y_ref_pos+45,45,20);
	//base face
	strokeWeight (.25);
	ellipse (width/2,y_ref_pos,100,116);
	//nose 
	fill (229, 155, 99); //orange
	triangle (width/2,y_ref_pos-10,240,y_ref_pos+15,250,y_ref_pos+18);
	//eyes 
	fill (58,37,22); //dark brown
	ellipse ((width/2)-22,y_ref_pos-10,8,12);
	ellipse ((width/2)+22,y_ref_pos-10,8,12);
	//eyebrows 
	stroke(58,37,22);
	strokeWeight (.75);
	noFill();
	arc((width/2)-22,y_ref_pos-17,10,7,-3,-0.5);
	arc((width/2)+22,y_ref_pos-17,10,7,-2.5,0);
	//smile
	arc(width/2,y_ref_pos+33,10,7,0,3);
	//cheeks
	fill (233, 161, 135); //pink
	strokeWeight (0);
	circle((width/2)+22,y_ref_pos+15,20);
	circle((width/2)-25,y_ref_pos+15,20);

	//------BODY-----
	//shoulders
	fill (238, 217, 197); //beige
	circle((width/2)-60, y_ref_pos+90,40);
	circle((width/2)+63, y_ref_pos+90,40);
	//arms
	rect((width/2)-80,y_ref_pos+90,40,70);
	rect((width/2)+43,y_ref_pos+90,40,70);

	//-----DETAILS----
	//earings
	fill (111, 115, 210); //purple
	square ((width/2)-57,y_ref_pos+15,8); 
	square ((width/2)+50,y_ref_pos+15,8);
	//bangs
	push();
	strokeWeight(0);
	fill (104, 66, 17); //brown 
	rotate (-0.9);
	ellipse (width/2-165, y_ref_pos+135,20,75);
	rotate (1.7);
	ellipse (width/2-14, y_ref_pos-238,20,75);
	pop();
	//hairclip 
	//random color generated in first loop and only changes when page is reloaded
	if (x==30) {
		stroke(r=random(100,200),g=random (100,200),b=random(100,200));
	}else{
		stroke(r,g,b);
	}
	strokeWeight(4);
	line(width/2+25,y_ref_pos-30,(width/2)+40,y_ref_pos-40);
	//shirt details
	stroke(172,146,166);
	point(width/2, y_ref_pos+120);
	point(width/2, y_ref_pos+100);
	point(width/2, y_ref_pos+140);

	//reset stroke attribute
	strokeWeight(0);

}

Project 01

This is my project of my self portrait.

sketch

//Tracy Meng
//Section B

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

function draw() {
    //BACKGROUND
    background(225,246,255);        // light blue sky

    //CLOUDS
    noStroke();
    fill(255);                      // cloud color (white)
    circle(200,90,70);              // cloud 1
    circle(150,70,100);
    circle(100,90,80);
    circle(50,90,60);

    circle(340,180,80);             // cloud 2
    circle(400,160,120);
    circle(450,180,100);
    circle(500,180,90);
    circle(550,180,50);

    //HILLS
    fill(186,245,190);              // light green
    circle(150,550,300);            // hill 1
    circle(0,520,100);              // hill 2
    circle(450,520,200);            // hill 3
    circle(550,570,150);            // hill 4

    //TREES
    fill(104,193,110);              // dark green
    ellipse(50,500,70,300);         // tree 1
    ellipse(145,400,90,height);      // tree 2
    ellipse(480,500,70,500);        // tree 3

    //SHRUBS
    fill(77,235,87);                // light green 2
    ellipse(85,550,60,200);         // shrub 1
    ellipse(530,550,70,360);        // shrub 2

    //BACK OF HAIR
    fill(102,58,14);                // hair color (dark brown)
    rect(185,308,230,height);       

    //HAIR HIGHLIGHTS
    stroke(166,111,0);              // light brown
    strokeWeight(3);                // highlight thickness
    line(200,308,200,height);  
    line(240,308,240,height);
    line(225,308,225,432); 
    line(380,400,380,height);
    line(400,308,400,height);   

    //HEAD SHAPE
    noStroke();
    fill(255,220,177);              // skin color (nude)
    ellipse(width/2,height/2,220,250); // head shape & location

    //EARS
    fill(255,220,177);              // skin color (nude)
    ellipse(190,308,30,50);         // left ear
    ellipse(410,308,30,50);         // right ear

    //BODY
    //SHIRT
    fill(243,18,153);               // shirt color (hot pink)
    ellipse(width/2,490,250,100);   // shoulders
    quad(175,485,125,height,475,height,425,485); // rest of tshirt

    //SHIRT COLLAR
    noFill();                       
    stroke(255);                    // collar color (white)
    strokeWeight(10);
    arc(width/2,450,80,80,0,PI);

    //NECK
    noStroke();
    fill(255,220,177);              // skin color (nude)

    rect(260,410,80,35);  
    ellipse(width/2,450,80,80);     // neckline    

    //EAR HOLES
    noFill();
    strokeWeight(2);
    stroke(230,145,20);             // brown ear stroke
    arc(190,308,10,30,PI/2,PI/2+PI); // left hole
    arc(410,308,10,30,-PI/2,PI/2);   // right hole

    //CHIN DEFINITION
    arc(width/2,422,20,10,0,PI);

    //EARRINGS
    //LEFT TRIANGLE EARRING 
    strokeWeight(2);
    stroke(255,157,58);             // orange outline
    fill(255,239,0);                // gold 
    triangle(180,333,200,333,190,350);

    //RIGHT TRIANGLE EARRING
    triangle(400,333,420,333,410,350);

    //LEFT EARRING DANGLES 1
    strokeWeight(4);                // thicker orange outline
    fill(185,63,255);               // purple
    quad(190,350,170,365,190,385,210,365); 

    //RIGHT EARRING DANGLES 1
    quad(410,350,390,365,410,385,430,365); 

    //LEFT EARRING DANGLE 2
    noFill();
    stroke(0,233,194);              // teal dangle outline
    quad(190,385,180,395,190,410,200,395); 

    //RIGHT EARRING DANGLE 2
    quad(410,385,400,395,410,410,420,395); 

    //SUNGLASSES
    //FRAME + LENSES
    stroke(250,145,164);            // rim color (pink)
    strokeWeight(8);                // rim thickness
    fill(28,28,28);                 // lenses color (dark grey)
    rect(220,260,65,65,10);         // rectangle lense 1 (left)
    rect(315,260,65,65,10);         // rectangle lense 2 (right)

    line(285,295,315,295);          // connect rims
    line(220,295,195,295);          // left band
    line(380,295,405,295);          // right band

    //PEARLS
    strokeWeight(4);                // thickness of point
    stroke(255);                    // pearl color (white)
    point(230,260);                 // top left rim
    point(240,260);
    point(250,260);
    point(260,260);
    point(270,260);

    point(230,325);                 // bottom - left rim
    point(240,325);
    point(250,325);
    point(260,325);
    point(270,325);

    point(220,275);                 // left - left rim
    point(220,285);
    point(220,295);
    point(220,305);
    point(220,315);

    point(285,275);                 // right - left rim
    point(285,285);
    point(285,295);
    point(285,305);
    point(285,315);

    point(330,260);                 // top - right rim
    point(340,260);
    point(350,260);
    point(360,260);
    point(370,260);

    point(330,325);                 // bottom - right rim
    point(340,325);
    point(350,325);
    point(360,325);
    point(370,325);

    point(315,275);                 // left - right rim
    point(315,285);
    point(315,295);
    point(315,305);
    point(315,315);

    point(380,275);                 // right - right rim
    point(380,285);
    point(380,295);
    point(380,305);
    point(380,315);

    //GLARE LINES
    stroke(238,238,255);            // glare color (grey - white)
    strokeWeight(3);                // glare thickness
    line(242,304,264,282);          // glare left
    line(337,304,359,282);          // glare right

    //NOSE
    noFill();
    stroke(230,145,20);             // brown nose stroke
    strokeWeight(2);                // nose stroke weight
 
    arc(290,350,20,20,PI/2,PI/2+PI) // arc left: PI = Half of a circle
    arc(310,350,20,20,-PI/2,PI/2);  // arc right: PI = Half of a circle

    line(290,340,290,322);          // nose line left
    line(310,340,310,322);          // nose line right

    //NOSTRILS
    noStroke();
    fill(222,171,95);               // light brown
    ellipse(292,353,10,5);          // left nostril
    ellipse(308,353,10,5);          // right nostril

    //LIPS
    //BOTTOM LIP
    stroke(255,122,162);            // lip liner color
    fill(255,132,168);              // lip color (light red)

    ellipse(width/2,390,25,15);

    //TOP LIP
    noStroke();
    fill(255,78,132);               // lip color (deep red)


    ellipse(292,385,27,13);         // left side
    ellipse(308,385,27,13);         // right side

    //MAKEUP HIGHLIGHT
    //LIP SPARKLE
    stroke(255,238,210);            // sparkle color
    strokeWeight(5);                // sparkle thickness
    point(width/2,376);             // top sparkle
    point(width/2,402);             // bottom sparkle

    //NOSE SPARKLE
    line(width/2,340,width/2,322);

    //ROSY CHEEKS
    noStroke();
    fill(255,200,228);              // rose
    ellipse(245,340,60,20);         // blush left
    ellipse(355,340,60,20);         // blush right
      
    //HAIR BANGS
    stroke(166,111,0);              // light brown stroke (match highlight)
    strokeWeight(3);
    fill(102,58,14);                // bangs color (dark brown)  
    point(220,220);                 // left
    point(380,220);                 // right

    bezier(300,175,120,180,250,300,150,430); // left bangs
    bezier(300,175,480,180,350,300,450,430); // right bangs   

    //HIGHLIGHT BANGS
    //LEFT
    bezier(280,195,150,200,260,320,170,400);

    //RIGHT
    bezier(320,195,450,200,340,320,430,400);


 

}

Project 01: Self Portrait

self portrait

sketch

The most challenging part of this project was figuring out which new components go on which coordinates (this part took quite a lot of trial and error).

// Kathy Lee, Section D function setup() { createCanvas(500, 500); background(230); text(“My Self Portrait”, 10, 15); } function draw() { //my hair fill(0); ellipse(250, 245, 200, 270); fill(0); rect(152, 220, 75, 200); fill(0); rect(273, 220, 75, 200); //face fill(223, 172, 107); ellipse(275-25, 275-25, 150, 225); //neck fill(223, 172, 107); rect(200+12.5, 300, 75, 125); fill(223, 172, 107); ellipse() //my rectangular shirt noStroke() fill(255); rect(100, 400, 300, 300, 50); //front hair that flows down past the shirt fill(0); rect(151, 375, 62, 100); fill(0); rect(287, 375, 62, 100); //eyes fill(0); ellipse(223, 220, 30, 20); // left eye (full pupil) fill(0); ellipse(277, 220, 30, 20); // right eye (full pupil) fill(223, 172, 107); ellipse(223, 225, 30, 20); // left eye skin tone fill(223, 172, 107); ellipse(277, 225, 30, 20); // right eye skin tone //nose fill(208, 161, 101); triangle(250, 250, 230, 280, 270, 280); //mouth fill(203, 117, 100); ellipse(250, 300, 50, 25); // pink lip color fill(223, 172, 107); ellipse(250, 290, 50, 20); // skin tone to highlight smiling mouth //ears fill(223, 172, 107); ellipse(180, 250, 40, 50); // left ear fill(15, 126, 47); ellipse(170, 275, 15, 15); // earring fill(223, 172, 107); ellipse(320, 250, 40, 50); // right ear fill(15, 126, 47); ellipse(330, 275, 15, 15); // earring //eyebrows fill(208, 161, 101); rect(210,190, 30, 7); // left eyebrow // I wanted to make the eyebrows with lines and change the strokeweight but then all the shapes get outlined? // Not sure exactly what’s going on so I will stick to rectangles for now fill(208, 161, 101); rect(260, 190, 30, 7); // right eyebrow }

// Kathy Lee, Section D

function setup() {
    createCanvas(500, 500);
    background(230);
    text("My Self Portrait", 10, 15);
}

function draw() {
    //my hair
    fill(0);
    ellipse(250, 245, 200, 270);
    fill(0);
    rect(152, 220, 75, 200);
    fill(0);
    rect(273, 220, 75, 200);
    
    //face
    fill(223, 172, 107);
    ellipse(275-25, 275-25, 150, 225);
    
    //neck
    fill(223, 172, 107);
    rect(200+12.5, 300, 75, 125);
    fill(223, 172, 107);
    ellipse()

    //my rectangular shirt
    noStroke()
    fill(255);
    rect(100, 400, 300, 300, 50);

    //front hair that flows down past the shirt
    fill(0);
    rect(151, 375, 62, 100);
    fill(0);
    rect(287, 375, 62, 100);

    //eyes
    fill(0);
    ellipse(223, 220, 30, 20); // left eye (full pupil)
    fill(0);
    ellipse(277, 220, 30, 20); // right eye (full pupil)
    fill(223, 172, 107);
    ellipse(223, 225, 30, 20); // left eye skin tone
    fill(223, 172, 107);
    ellipse(277, 225, 30, 20); // right eye skin tone 

    //nose
    fill(208, 161, 101);
    triangle(250, 250, 230, 280, 270, 280);

    //mouth
    fill(203, 117, 100);
    ellipse(250, 300, 50, 25); // pink lip color
    fill(223, 172, 107);
    ellipse(250, 290, 50, 20); // skin tone to highlight smiling mouth

    //ears
    fill(223, 172, 107);
    ellipse(180, 250, 40, 50); // left ear
    fill(15, 126, 47);
    ellipse(170, 275, 15, 15); // earring
    fill(223, 172, 107);
    ellipse(320, 250, 40, 50); // right ear
    fill(15, 126, 47);
    ellipse(330, 275, 15, 15); // earring


    //eyebrows
    fill(208, 161, 101);
    rect(210,190, 30, 7); // left eyebrow
    // I wanted to make the eyebrows with lines and change the strokeweight but then all the shapes get outlined? 
    // Not sure exactly what's going on so I will stick to rectangles for now
    fill(208, 161, 101);
    rect(260, 190, 30, 7); // right eyebrow

}

Project 1: My Self Portrait

sketch

// Evan Stuhlfire
// estuhlfi@andrew.cmu.edu
// Section B 
// 01-project self portrait 

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

function draw() {
    let circleX = width/2;
    let circleY = height/3;
    let diameter = width/2.5;
    let rectX = circleX - (diameter/2);
    let rectY = circleY + (diameter/2);

    // Set background
    background(144, 195, 209);

    // Draw face
    stroke(25);
    strokeWeight(5);
    fill(141, 186, 153);
    circle(circleX, circleY, diameter);

    fill(207, 117, 54, 200);
    rect(rectX, circleY, diameter, diameter/2);

    fill(39, 62, 176);
    quad(rectX, rectY, rectX + diameter/4, rectY + diameter/2, rectX + diameter*.75, rectY + diameter/2, rectX + diameter, rectY);

    // Draw eyes
    fill(237, 124, 114);
    ellipse(rectX + diameter/3, circleY + 20, diameter/5, diameter/6);
    fill(201, 201, 153);
    ellipse(rectX + diameter*.67, circleY +20, diameter/5, diameter/6);

    // Draw nose
    fill(245, 245, 98);
    triangle(circleX, circleY + 20, rectX + diameter/3, rectY, rectX + diameter*.67, rectY);

    // Draw chin and mouth
    fill(148, 150, 214);
    rect(rectX + diameter/4, rectY, diameter*.5, diameter/2);
    fill(207, 117, 54);
    rect(rectX + diameter/3, rectY + diameter/5.5, diameter/3, 10);



    // Create frame
    noFill();
    stroke(25);
    strokeWeight(20);
    rect(0, 0, 500, 500);

    noLoop();
    
}

I found posting the sketch to be the most difficult part of this exercise.

Project 01 – Self Portrait – srauch

A portrait of Sam Rauch!

sketch

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

function draw() {
    background(231, 203, 62);

    //temporary guidelines
    //strokeWeight(2);
    //line(300, 0, 300, 600);
    //line(0, 300, 600, 300);

    //shirt
    strokeWeight(0);
    fill(114, 193, 189);
    rect(120, 500, 360, 100);
    triangle(120, 500, 300, 460, 300, 500);
    triangle(300, 500, 300, 460, 480, 500);
    fill(75, 161, 156);
    triangle(120, 500, 120, 600, 60, 600);
    triangle(480, 500, 480, 600, 540, 600);
    ellipse(300, 505, 200, 60);

    //neck
    fill(244, 233, 217); //light skin
    rect(225, 339, 150, 170);
    ellipse(300, 510, 150, 30);

    fill(199, 169, 127); //shadow skin
    ellipse(300, 400, 150, 150);
    rect(225, 339, 150, 67);

    //head
    fill(244, 233, 217); //light skin
    ellipse(300, 285, 260, 320);

    //ears
    ellipse(170, 295, 50, 80);
    ellipse(430, 295, 50, 80);
    triangle(160, 332, 180, 335, 185, 350);
    triangle(440, 332, 420, 335, 415, 350);

    //hair base
    noFill();
    stroke(173, 94, 93); //hair dark
    strokeWeight(20);
    arc(300, 285, 240, 300, 3.39, 6.03);

    fill(173, 94, 93);
    strokeWeight(0);
    arc(300, 210, 220, 130, 3.15, 6.30);

    triangle(192, 250, 200, 200, 260, 200);
    triangle((600-192), 250, (600-200), 200, (600-260), 200);

    //sideburns?
    fill(173, 94, 93) //hair dark
    strokeWeight(0);
    rect(172, 255, 20, 60, 0, 0, 20, 20);
    rect(408, 255, 20, 60, 0, 0, 20, 20);

    //mouth
    fill(61, 32, 31); //mouth pink
    arc(300, 375, 100, 90, 6.30, 3.15);

    stroke(61, 32, 31); //mouth pink
    strokeWeight(10);
    strokeCap(ROUND); //case sensitive: SQUARE and ROUND
    line(255, 375, 345, 375);

    //teeth
    stroke(247, 246, 232); //teeth color
    strokeWeight(10);
    line(262, 382, 338, 382);

    //nose
    stroke(199, 168, 127);
    strokeWeight(18);
    line(305, 300, 305, 345);

    //playing with whites of eyes
    //fill(247, 246, 232);
    //strokeWeight(0);
    //ellipse(245,300, 50, 40);
    //ellipse(355,300, 50, 40);
    //arc(245,300, 50, 40, 3.3, 6.15);
    //arc(355,300, 50, 40, 3.3, 6.15);

    //eye arcs
    stroke(69, 74, 69); //eye color
    strokeWeight(5);
    noFill();
    arc(245,300, 50, 40, 3.3, 6.15);
    arc(355,300, 50, 40, 3.3, 6.15);

    //eye fill
    strokeWeight(0);
    fill(69, 74, 69);
    ellipse(245, 295, 25, 25);
    ellipse(355, 295, 25, 25);

    //eyebrows
    stroke(87, 68, 44); //eyebrow color
    strokeWeight(10);
    line(240, 260, 270, 262); //flat
    line(220, 270, 240, 260); //corner
    line((600-240), 260, (600-270), 262); //flat
    line((600-220), 270, (600-240), 260); //corner


    //angleMode(DEGREES);

    //spikes!
    fill(237, 141, 141); //hair light
    strokeWeight(0);

    triangle(380, 80, 350, 200, 240, 160);
    triangle(310, 70, 380, 200, 270, 200);
    triangle(190, 220, 300, 160, 220, 100);
    triangle(220, 190, 315, 160, 270, 90);
    triangle(200, 230, 230, 180, 190, 160);

    //bangs
    triangle(230, 200, 290, 200, 270, 240);
    triangle(200, 200, 250, 200, 230, 250);
    triangle(270, 200, 350, 200, 340, 250);
    triangle(195, 200, 230, 220, 185, 240);
    triangle(170, 195, 210, 180, 200, 230);
    triangle(220, 200, 270, 200, 280, 170);
    triangle(340, 140, 420, 130, 380, 200);
    triangle(340, 210, 410, 220, 370, 170);
    triangle(330, 210, 380, 240, 375, 210);

    noLoop();
}

Project 01

This is my self portrait

sketch

//Michael Li
//Section C
function setup() {
    createCanvas(800, 750);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //Background If Condition
    var buildingcolor = 150;//default buildin color light grey
    var windowcolor = 70;//default window color dark grey
    if (mouseY < height * 0.33) {
        background(189, 184, 220);//purple
        fill(25, 53, 79);
        noStroke()
        rect (0, height*0.66, width, height/3); //uses default building and window color


    } else if (mouseY > height * 0.66) {
        background (60, 73, 120) //dark blue
        fill(25, 53, 79);
        noStroke()
        rect (0, height*0.66, width, height/3);
        buildingcolor = 20 //changes building color to dark grey
        windowcolor = 255 //change window color to white

    } else {
        background (58, 126, 146); //Light blue
        fill(25, 53, 79); 
        noStroke()
        rect (0, height*0.66, width, height/3);
        buildingcolor = 120 //changes building color to grey
        windowcolor = 150 //changes window color to light grey
    //depends  on mouse position on canvas, change background from early morning, mid day to night
    }

    // Building 1 in Background (right building)

        fill(buildingcolor)
        noStroke()
        rect(520, height*0.33, 130, height/3);
        fill(windowcolor)

        //windows
        var row1 = 530
        var row2 = 570
        var row3 = 610
        
        rect(row1, (height*0.33)+10, 30, 20)
        rect(row1, (height*0.33)+50, 30, 20)
        rect(row1, (height*0.33)+90, 30, 20)
        rect(row1, (height*0.33)+130, 30, 20)
        rect(row1, (height*0.33)+170, 30, 20)

        rect(row2, (height*0.33)+10, 30, 20)
        rect(row2, (height*0.33)+50, 30, 20)
        rect(row2, (height*0.33)+90, 30, 20)
        rect(row2, (height*0.33)+130, 30, 20)
        rect(row2, (height*0.33)+170, 30, 20)

        rect(row3, (height*0.33)+10, 30, 20)
        rect(row3, (height*0.33)+50, 30, 20)
        rect(row3, (height*0.33)+90, 30, 20)
        rect(row3, (height*0.33)+130, 30, 20)
        rect(row3, (height*0.33)+170, 30, 20)

    // Building 2 in Background (left taller building)

        fill(buildingcolor)
        noStroke()
        rect(170, height*0.05, 170, height/1.64);
        fill(windowcolor)

        //windows
        row1 = 180 //changes window row variable since second building
        row2 = 220
        row3 = 260
        var row4 = 300

        rect(row1, (height*0.33)-190, 30, 20)
        rect(row1, (height*0.33)-150, 30, 20)
        rect(row1, (height*0.33)-110, 30, 20)
        rect(row1, (height*0.33)-70, 30, 20)
        rect(row1, (height*0.33)-30, 30, 20)
        rect(row1, (height*0.33)+10, 30, 20)
        rect(row1, (height*0.33)+50, 30, 20)
        rect(row1, (height*0.33)+90, 30, 20)
        rect(row1, (height*0.33)+130, 30, 20)
        
        rect(row2, (height*0.33)-190, 30, 20)
        rect(row2, (height*0.33)-150, 30, 20)
        rect(row2, (height*0.33)-110, 30, 20)
        rect(row2, (height*0.33)-70, 30, 20)
        rect(row2, (height*0.33)-30, 30, 20)
        rect(row2, (height*0.33)+10, 30, 20)
        rect(row2, (height*0.33)+50, 30, 20)
        rect(row2, (height*0.33)+90, 30, 20)
        rect(row2, (height*0.33)+130, 30, 20)
        
        rect(row3, (height*0.33)-190, 30, 20)
        rect(row3, (height*0.33)-150, 30, 20)
        rect(row3, (height*0.33)-110, 30, 20)
        rect(row3, (height*0.33)-70, 30, 20)
        rect(row3, (height*0.33)-30, 30, 20)
        rect(row3, (height*0.33)+10, 30, 20)
        rect(row3, (height*0.33)+50, 30, 20)
        rect(row3, (height*0.33)+90, 30, 20)
        rect(row3, (height*0.33)+130, 30, 20)

        rect(row4, (height*0.33)-190, 30, 20)
        rect(row4, (height*0.33)-150, 30, 20)
        rect(row4, (height*0.33)-110, 30, 20)
        rect(row4, (height*0.33)-70, 30, 20)
        rect(row4, (height*0.33)-30, 30, 20)
        rect(row4, (height*0.33)+10, 30, 20)
        rect(row4, (height*0.33)+50, 30, 20)
        rect(row4, (height*0.33)+90, 30, 20)
        rect(row4, (height*0.33)+130, 30, 20)

    strokeWeight(0) //No stroke for the main portrait

    //neck
    fill(204, 172, 125);
    rect(335, 300, 130, 140)

    //head part 1 circle
    fill(235, 209, 168); //skin color
    ellipse(387, 200, 260, 236); 
    stroke(235, 209, 168)

    //head part 2 chin
    bezier(257, 200, 244, 453, 411, 398, 487, 269);
    
    //Eyes whites
    fill(255);
    ellipse(286, 218, 36, 42)//left eye
    fill(255);
    ellipse(373, 218, 36, 42)//right eye

    //eyes pupils
    fill(70, 50, 21)
    ellipse(294, 218, 20, 32);
    fill(70, 50, 21)
    ellipse(383, 218, 20, 32);
    
    //Eyes Highlights
    fill(255)
    ellipse(297, 209, 3, 7);
    fill(255)
    ellipse(387, 209, 3, 7);

    //nose
    fill(204, 172, 125)
    beginShape()
        vertex(327, 225);
        vertex(327, 286);
        vertex(306, 284);
        vertex(303, 276);
    endShape(CLOSE);


    //Hair
    fill(50)
    beginShape();
        vertex(238, 218); //bottom left
        vertex(238, 163);
        vertex(233, 140);
        vertex(288, 68);
        vertex(349, 52);
        vertex(400, 47);
        vertex(469, 77);
        vertex(515, 110);
        vertex(537, 164);
        vertex(524, 221);
        vertex(521, 258);
        vertex(493, 296);
        vertex(498, 211);
        vertex(480, 205);
        vertex(473, 231);
        vertex(462, 247);
        vertex(462, 219);
        vertex(455, 207);
        vertex(441, 200);
        vertex(421, 164);
        vertex(394, 172);
        vertex(356, 162);
        vertex(319, 200);
        vertex(298, 160);
        vertex(291, 166);
        vertex(280, 164);
    endShape(CLOSE);

    //Ears
    fill(204, 172, 125);
    bezier(478, 212, 515, 211, 515, 259, 464, 279);
    fill(235, 209, 168);
    bezier(478, 218, 497, 211, 497, 259, 464, 267);

    //mouth
    fill (0);
    bezier(314, 324, 327, 333, 373, 330, 381, 315);
    fill(255);
    beginShape();
        vertex(319, 323);
        vertex(319, 325);
        vertex(377, 318);
        vertex(377, 315.5);
        
    endShape(CLOSE);

    //Arms

    fill(235, 209, 168);
    beginShape();
        vertex(216, 659);
        vertex(207, height)
        vertex(125, height);
        vertex(154, 650);
    endShape(CLOSE);

    beginShape();
        vertex(623, 667);
        vertex(643, height);
        vertex(728, height);
        vertex(695, 655);
    endShape(CLOSE);



    //Shirt

    fill(230);
    beginShape();
        vertex(207, height);
        vertex(235, 463);
        vertex(318, 411);
        vertex(358, 438);
        vertex(471, 399);
        vertex(567, 455);
        vertex(615, height);
    endShape(CLOSE);

    //Sleeves

    fill(180);
    beginShape();
        vertex(235, 463);
        vertex(147, 520);
        vertex(110, 641);
        vertex(216, 659);
    endShape(CLOSE);

    beginShape();
        vertex(567, 455);
        vertex(674, 515);
        vertex(703, 656);
        vertex(588, 676);
    endShape(CLOSE);

    //Eye brows
    fill(0);
    bezier(270, 195, 273, 182, 303, 182, 308, 208);
    bezier(357, 199, 362, 184, 391, 184, 401, 203);

    //Glasses
    noFill();
    stroke(154, 136, 49);
    strokeWeight(6);
    ellipse(276, 225, 77, 59); //frame left
    ellipse(392, 225, 92, 59); //frame right

    beginShape(); //Glasses connecting the Framse
        vertex (317, 220);
        vertex(330, 218);
        vertex (342, 220);
    endShape();

    stroke(49, 42, 19); //Glasses legs
    line(436, 218, 480, 210);

}

Project 01 | Self Portrait

here is my self portrait!

sketch

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

function draw() {
    background(106, 148, 212);     //blue
    fill(34, 67, 116);             //dark blue
    stroke(34, 67, 116);           
    triangle(0, 299, 299, 0, 299, 299);

    //hair
    fill(61, 97, 153);            //medium blue
    stroke(61, 97, 153); 
    ellipse(150, 65, 75, 55);
    fill(92, 128, 184);           //lighter medium blue
    stroke(92, 128, 184);
    ellipse(150, 148, 140, 160);

    //shirt
    fill(255, 153, 204);            //pink
    stroke(255, 153, 204);
    rect(30, 240, 240, 120, 60);
    fill(219, 112, 147);            //darker pink
    stroke(219, 112, 147);
    ellipse(150, 245, 80, 40);    

    //neck
    fill(216, 226, 240);            //a little darker than light blue
    stroke(216, 226, 240);
    rect(115, 150, 70, 90);        
    ellipse(150, 240, 70, 40);

    //face
    fill(226, 237, 252);
    stroke(229, 239, 255);
    ellipse(150, 162, 130, 142);    //light blue
    fill(255, 153, 204, 40);        //transparent pink
    stroke(255, 153, 204, 0);
    circle(110, 190, 30);
    circle(190, 190, 30);

    //nose
    fill(160, 188, 229);
    stroke(160, 188, 229);
    circle(150, 180, 17);        
    circle(141, 183, 8);
    circle(159, 183, 8);
    fill(229, 239, 255);
    stroke(229, 239, 255);
    circle(150, 177, 17);        
    circle(141, 180, 8);
    circle(159, 180, 8);
    noLoop();

    //eyes
    fill(255);                     //white
    stroke(160, 188, 229, 50);
    circle(125, 150, 25);          
    circle(175, 150, 25);
    fill(160, 188, 229);           //blue
    stroke(160, 188, 229);
    ellipse(121, 150, 16, 19);
    ellipse(172, 150, 16, 19);
    fill(34, 67, 116);             //dark blue
    stroke(34, 67, 116);
    ellipse(118, 150, 12, 15);
    ellipse(169, 150, 12, 15);
    fill(255);
    stroke(255)                    //white
    circle(119, 147, 5);
    circle(170, 147, 5);
    stroke(160, 188, 229);
    strokeWeight(4);                //blue
    line(112, 134, 124, 130);
    line(186, 134, 174, 130);
    noLoop();


    //mouth
    fill(160, 188, 229);            //blue
    stroke(160, 188, 229);
    strokeWeight(1);
    arc(150, 203, 35, 12, 0, PI);
    fill(229, 239, 255);            //light blue
    stroke(229, 239, 255);
    arc(150, 201, 35, 8, 0, PI);
}

Project 1: My Self Portrait

sketch

function setup() {
    createCanvas(500, 500);
    background(255,138,120);
}
function draw() {
    let borpX = 225;
    let borpY = 170;
    //behind head hair
    noStroke();
    fill(40, 26, 34);
    beginShape();
    vertex(300,195);
    vertex(303,200);
    vertex(305,210);
    vertex(302,240);
    vertex(280,245);
    vertex(270,220);
    stroke(80, 40, 54);
    endShape();
    strokeWeight(1)
    arc(borpX-10,borpY+40,30,50,8.5,4.5);
    arc(borpX+63,borpY+50,40,60,6,8,OPEN);
    arc(borpX+45,borpY+40,75,60,5.7,6.6,OPEN);
    arc(borpX+55,borpY+55,40,60,6.1,8,OPEN);
    arc(borpX+45,borpY+62,40,60,6.2,8,OPEN);
    arc(borpX-5,borpY+53,30,50,7.6,3.7);
    arc(borpX+1,borpY+60,30,50,7.6,3);
    arc(borpX+4,borpY+60,30,50,7.6,3);
    push();
    rotate(0.1);
    arc(borpX+40,borpY+40,30,50,7.6,3);
    pop();


    //cranium and fillings
    angleMode(RADIANS);
    fill(255,233,199);
    noStroke();
    ellipse(246.8,500/2.195-12,71.5,55.8);
    stroke(0);
    arc(249,500/3+8.5,92,90,2.5,7.05,OPEN);
    noStroke();
    ellipse(221,500/2.45,20,30);
    ellipse(282,500/2-42,10,10);
    stroke(0);

    noStroke();
    fill(222, 0, 111);
    ellipse(262,270,100,20);
    triangle(160,500,260,260,388,500);
    stroke(0);
    arc(262,270,100,20,3.2,6.2);
    fill(255,233,199);

    //neck
    noStroke();
    fill(255,233,199);
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(239,258);
    curveVertex(240,268);
    curveVertex(285,266);
    curveVertex(281,250);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape();
    noFill();
    stroke(0);
    arc(230,245,20,50,5.5,8);
    arc(290,225,20,80,7.8,10);
    fill(255,233,199);

    //clothes
    fill(222, 0, 111);

    beginShape();
    vertex(240,258);
    vertex(225,255);
    vertex(205,257);
    vertex(190,280);
    vertex(180,350);
    vertex(150,470);
    vertex(162,500);
    vertex(180,520);
    endShape(OPEN);

    beginShape();
    vertex(200,400);
    vertex(240,256);
    vertex(250,268);
    vertex(260,258);
    vertex(300,255);
    vertex(320,257);
    vertex(350,285);
    vertex(365,350);
    vertex(400,440);
    vertex(398,500);
    vertex(360,530);
    endShape(OPEN);

    

    curve(245,264,240,268,197,270,200,220);
    curve(245,264,240,268,183,340,200,220);
    curve(220,390,208,420,160,460,130,420);
    curve(260,265,255,268,335,270,330,220);
    curve(260,265,255,268,365,350,330,220);
    curve(220,370,200,400,365,440,330,220);
    fill(255,233,199);
    beginShape();
    vertex(239,255);
    vertex(235,278);
    vertex(275,256);
    endShape(OPEN);
    line(200,400,240,500);

    //chin segments
    fill(255,233,199);
    beginShape();
    curveVertex(215,231);
    curveVertex(215,231);
    curveVertex(228,243);
    curveVertex(250,244);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    //arc(246.2,500/2.195-10,69.5,55.8,6.5,9,OPEN);
    push();
    translate(215, 216.43);
    rotate(-0.2);
    arc(3,0,15,42,8,4.45,OPEN);
    pop();
    //ear
    push();
    translate(284,500/2-32);
    rotate(0.3);
    arc(0,-5,13,26,4.1,8.1,OPEN);
    arc(1,-5,7,15,8,4.6,OPEN);
    pop();
    arc(284.9,500/2-35,4,8,4,7,OPEN);
    //eye1
    let lefteyex = 262;
    let lefteyey = 198;
    noStroke();
    fill(255);
    ellipse(lefteyex,lefteyey+1,20,16);
    fill(240);
    arc(lefteyex,lefteyey-2,20,10,3.2,6.3);
    fill(33,6,4);
    noStroke();
    ellipse(lefteyex+4,lefteyey,10,14)
    fill(255,164,128);
    ellipse(lefteyex+4,lefteyey+4,6,5);
    fill(0);
    ellipse(lefteyex+4,lefteyey,5,8);
    fill(255);
    ellipse(lefteyex+2,lefteyey-2,3,6);
    stroke(0);
    noFill();
    ellipse(lefteyex+4,lefteyey,9,13);
    arc(lefteyex,lefteyey-2,20,10,3.2,6.3);
    //eye2
    let righteyex = 222;
    let righteyey = 198;
    noStroke();
    fill(255);
    ellipse(righteyex,righteyey+1,20,16);
    fill(240);
    arc(righteyex,righteyey-2,20,10,3.2,6.3);
    fill(33,6,4);
    noStroke();
    ellipse(righteyex+4,righteyey,10,14)
    fill(255,164,128);
    ellipse(righteyex+4,righteyey+4,6,5);
    fill(0);
    ellipse(righteyex+4,righteyey,5,8);
    fill(255);
    ellipse(righteyex+2,righteyey-2,3,6);
    stroke(0);
    noFill();
    ellipse(righteyex+4,righteyey,9,13);
    arc(righteyex,righteyey-2,20,10,3.2,6.3);
    //mouth
    stroke(0);
    curve(228, 225, 233, 230, 240, 230, 245, 225);
    //nose
    fill(255, 195, 184);
    noStroke();
    triangle(240,215,232,215,235,218);
    stroke(0);
    noFill();
    arc(226,208,18,20,6.1,7.1);
    arc(240,213,15,10,8.8,9.2);
    //eyebrows
    let leftbrowx = 210;
    let leftbrowy = 185;
    let rightbrowx = 273;
    let rightbrowy = 185;
    noStroke();
    fill(26, 2, 20);
    beginShape();
    curveVertex(leftbrowx,leftbrowy+3);
    curveVertex(leftbrowx+7,leftbrowy+2);
    curveVertex(leftbrowx+18,leftbrowy+4);
    curveVertex(leftbrowx+25,leftbrowy+3);
    curveVertex(leftbrowx+20,leftbrowy-1);
    curveVertex(leftbrowx+7,leftbrowy-1);
    endShape(CLOSE);

    beginShape();
    curveVertex(rightbrowx,rightbrowy+3);
    curveVertex(rightbrowx-7,rightbrowy+2);
    curveVertex(rightbrowx-18,rightbrowy+4);
    curveVertex(rightbrowx-25,rightbrowy+3);
    curveVertex(rightbrowx-20,rightbrowy-1);
    curveVertex(rightbrowx-7,rightbrowy-1);
    endShape(CLOSE);
    //hair
    fill(40, 26, 34);

    beginShape();
    vertex(200,175);
    vertex(220,140);
    vertex(228,127);
    vertex(290,139);
    vertex(295,160);
    vertex(295,190);
    vertex(285,190);
    vertex(235,162);
    vertex(225,170);
    endShape();

    
    stroke(80, 40, 54);
    strokeWeight(1)
    arc(borpX-15,borpY+10,20,50,8,3.5);
    noStroke();
    rect(borpX-16,borpY+5,5,5);
    stroke(80, 40, 54);

    beginShape();
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-28,borpY+2);
    curveVertex(borpX-47,borpY-9);
    curveVertex(borpX-28,borpY-7);
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-15,borpY-10);
    endShape();

    beginShape();
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-12,borpY+8);
    curveVertex(borpX-25,borpY+10);
    curveVertex(borpX-40,borpY);
    curveVertex(borpX-30,borpY+3);
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-20,borpY-2);
    endShape();

    beginShape();
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX-1,borpY+2);
    curveVertex(borpX-5,borpY+8);
    curveVertex(borpX-15,borpY+14);
    curveVertex(borpX-27,borpY+15);
    curveVertex(borpX-16,borpY+8);
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-8,borpY);
    endShape();

    

    beginShape();
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-28,borpY-7);
    curveVertex(borpX-50,borpY-12);
    curveVertex(borpX-35,borpY-16);
    curveVertex(borpX-15,borpY-35);
    curveVertex(borpX,borpY-30);
    curveVertex(borpX,borpY-30);
    endShape();

    beginShape();
    curveVertex(borpX,borpY-30);
    curveVertex(borpX,borpY-30);
    curveVertex(borpX-15,borpY-35);
    curveVertex(borpX-24,borpY-50);
    curveVertex(borpX-15,borpY-40);
    curveVertex(borpX,borpY-40);
    curveVertex(borpX,borpY-40);
    endShape();

    beginShape();

    endShape();

    arc(borpX+36,borpY+5,90,90,5.3,6.9,OPEN);
    arc(borpX+28,borpY-5,90,90,4,5.8,OPEN);

    beginShape();
    curveVertex(borpX+55,borpY+28);
    curveVertex(borpX+55,borpY+28);
    curveVertex(borpX+64,borpY+33);
    curveVertex(borpX+65,borpY+45);
    curveVertex(borpX+72,borpY+35);
    curveVertex(borpX+75,borpY+28);
    curveVertex(borpX+75,borpY+28);
    endShape();

    //sideburn
    push();
    rotate(-0.2);
    arc(borpX+10,borpY+88,10,30,8,5.5,CLOSE);

    //sideswoop
    pop();
    push();
    rotate(-1.4);
    arc(borpX-365,borpY+145,15,30,7.8,4.8,CLOSE);
    rotate(-0.1);
    arc(borpX-390,borpY+130,15,30,7.8,4.8,CLOSE);
    arc(borpX-385,borpY+125,15,30,7.8,4.8,CLOSE);
    pop();

    beginShape();
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+20,borpY-2);
    curveVertex(borpX+28,borpY+6);
    curveVertex(borpX+40,borpY+14);
    curveVertex(borpX+65,borpY+25);
    curveVertex(borpX+48,borpY+10);
    curveVertex(borpX+40,borpY);
    curveVertex(borpX+35,borpY-8);
    curveVertex(borpX+35,borpY-8);
    endShape();

   // stroke(255);
   // strokeWeight(4);
   // point(235,268);
   // point(240,245);
   // point(287,264);
   // point(280,223);

    

    noLoop();
}

I found the adjusting of the vertices of the custom shapes to be extremely time consuming and frankly agonizing. Were I to do this again, I would try to take more intuitive approaches.

Project 1: My Self Portrait

sketch-01-self portrait

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

function draw() {
    background(168,255,125)
    fill(255,230,0)
    ellipse(250,200,500,600)
    fill(196,80,71)
    ellipse(250,200,400,500)
    fill(147,248,234)
    ellipse(250,200,330,430)
    fill(135,73,146)
    ellipse(250,200,270,370)
    fill(0,0,0)
    ellipse(250,200,230,330)     //ellipse(150,150,30,80)
    fill(255,163,204)
    ellipse(250,200,200,300);   //head
    fill(255,255,255);
    ellipse(190,190,50,30);     //eyeball
    ellipse(280,190,50,30);
    stroke(255,0,0);
    strokeWeight(3);
    line(320,220,350,190);      //frame
    fill(180,240,0);
    rect(130,200,90,50);        //sunglasses
    fill(50,158,200);
    rect(230,200,90,50);        
    stroke(111, 78, 55);        
    strokeWeight(20);
    point(190,190);             //pupil
    point(280,190);
    fill(95,29,158);
    stroke(0,0,0);
    strokeWeight(1);
    triangle(230,220,170,240,230,260);  //nose
    line(200,290,280,290)
    noLoop()
}

Self Portrait

sketch

function setup() {
    createCanvas(300, 300);
    background(200, 213, 185);
}

function draw() {
    noStroke()
    fill(0);
    rect(75, 55, 150, 220); // hair
    fill(200, 213, 185);
    triangle(130, 30, 25, 150, 1, 1); // define hair background
    triangle(170, 30, 275, 150, 299, 1); 

    fill(200, 162, 200);
    ellipse(150, 320, 200, 160); // shirt

    fill(198, 136, 99); // face base
    ellipse(150, 150, 125, 165);
    ellipse(150, 180, 120, 100);
    rect(130, 200, 40, 50);

    fill(0);
    triangle(180, 60, 80, 130, 90, 80); // define hair bangs
    triangle(120, 60, 220, 130, 210, 80); 

    fill(250, 243,221); // eyes white
    noStroke();
    ellipse(120, 155, 30, 20);
    ellipse(180, 155, 30,20);

    fill(0); // eyeballs
    ellipse(120, 155, 17, 17);
    ellipse(180, 155, 17, 17);

    rect(100, 130, 35, 10); // eyebrows
    rect(160, 130, 35, 10);

    fill(198, 136, 99); // eye smile skin color
    rect(100, 158, 45, 20);
    rect(160, 158, 45,20);

    fill(250, 243,221); // smile
    noStroke();
    ellipse(150, 195, 50, 25);
    fill(198, 136, 99); // smile skin color
    rect(100, 172, 80, 20);

    stroke(0); // glasses
    strokeWeight(2);
    noFill();
    arc(120, 155, 50, 50, 50, 50);
    arc(180, 155, 50, 50, 50, 50);
    }


    //stroke(173,93,93);
    //strokeWeight(4);
    //noFill();
    //arc(150, 195, 50, 50, 50, 40);

    //strokeWeight(3);
    //arc(120, 135, 30, 50, 10, QUARTER_PI);
    //arc(180, 135, 30, 50, 10, QUARTER_PI);

      //  fill(250, 243,221); // eyes
 //   ellipse(120, 142, 30, 20);
  //  ellipse(180, 142, 30,20);
  //  fill(198, 136, 99); // eye smile skin color

    //fill(198, 136, 99); // eye smile skin color
    //ellipse(120, 165, 45, 20);
    //ellipse(180, 165, 45,20);