Project 1: My Self Portrait

Self Portrait
function setup() {
    createCanvas(500, 500);
    background(93,232,113);
}

function draw() {
    fill(0);
    rect(150,140,200,250);     //hair back

    fill(253,227,220);
    strokeWeight(0);
    ellipse(width/2,height/2,150,200);    //face

    fill(0);
    rect(150,150,200,60);    //hair 

    fill(225,199,190);
    triangle(250,250,240,300,260,300);    //nose

    strokeWeight(5);
    stroke(239,94,94);
    noFill();
    arc(250, 310, 40, 40, QUARTER_PI, PI);    //smile.  I feel like i can do a circle and the cover the top


    fill(245,249,255); 
    strokeWeight(0);
    ellipse(220,250,40,20);    //eye left
    ellipse(280,250,40,20);    // eye right

    fill(127,71,42);
    strokeWeight(0);
    ellipse(220,250,15);   //pupil left
    ellipse(280,250,15);    // pupil right 

    fill(253,227,220);
    rect(200,237,40,10);    //lid left
    rect(260,237,40,10);    //lid right

    fill(10)
    rect(200,235,40,2);   //eyebrow left
    rect(260,235,40,2);    //eyebrow right

    fill(93,232,113)
    triangle(220,100,50,100,70,300);
    triangle(500-220,100,500-50,100,500-70,300);


    noLoop()
}

Project 1- My self portrait

miles

function setup() {
    createCanvas(200, 200);
    background(50, 50, 180)
}

function draw() {
    background(50, 50, 180);
    ellipse(100, 90, 110, 160);
    line(60, 55, 80, 50);
    line(120,50, 140, 55);
    fill(50, 50, 240);
    circle(70, 70, 13);
    fill(50, 50,240 );
    circle(130, 70, 13);
    stroke(0, 255, 255);
    point(70, 70)
    point(130, 70)
    triangle(100, 80, 90, 90, 110, 90)
    quad(90,90, 90, 100, 110, 100, 110, 90)
    line(80, 120, 120, 120)
    line(75, 110, 80, 120)
    line(120, 120, 125, 110)
    circle(45, 80, 15)
    circle(155, 80, 15)
    line(30, 100, 100, 20,)
    line(100, 20, 170, 100)
}

most difficult part was doing math to make it symetrical

Project 1: Self Portrait

I wasn’t sure how to embed the sketch.js file so here’s the code itself:

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

function draw() {
background(240);
strokeWeight(3);
line(70,70,30,220);
line(30,220,140,210);
line(140,210,146,270);
line(146,270,175,267);
curve(175,267,190,150,180,140);
line(175,267,180,300);
//contour of nose and mouth
strokeWeight(2);
ellipse(70,70,80);
fill(0);
circle(80,80,25);
//right eyeball and pupil
fill(255)
ellipse(200,140,80);
fill(0);
circle(210,150,25);
//left eyeball and pupil
ellipse(90,200,50,10);
//nostril
noStroke();
fill(60,200,30);
rect(90,200,20,100);
circle(100,300,20);
fill(255);
circle(105,290,5);
//booger
arc(100,100,30,0,180);
//smile
fill(0);
rect(180,70,70,15);
rect(30,20,70,15);
//eyebrows
noLoop()

}

01-Project-face

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

function draw() {
 fill(75,36,36,[255]); //hair
    ellipse(200,200,230,400);
 fill(212,179,135,[255]);
    ellipse(200,150,180,250); //face
fill(219,58,107,[100]);       
    ellipse((width/2),(height/2+50),70,30); //lips
fill(0)
strokeWeight(3);
    line((width/2-40),(height/2+50),(width/2+40),(height/2+50));
fill(255); //eye whites
    ellipse((width/2-30),(height/2-40),30,15);
    ellipse((width/2+30),(height/2-40),30,15);
fill(75,32,32,[255]);
    ellipse((width/2-30),(height/2-40),10,10);
    ellipse((width/2+30),(height/2-40),10,10);
    arc((width/2-30),(height/2-60),30,10,PI,radians(360)); //eyebrow right
    arc((width/2+30),(height/2-60),30,10,PI,radians(360)); //eyebrow left
fill(164,135,106,[255]); //nose
strokeWeight(1);
    triangle((width/2-15),(height/2+10),(width/2+15),(height/2+10),(width/2),(height/2-30));
fill(223,193,163,[255]);
strokeWeight(1);
    rect((width/2-9),(height/2-30),18,35);
fill(0);
    ellipse((width/2-5),(height/2+5),8,5);
    ellipse((width/2+5),(height/2+5),8,5);
fill(255,204,204,[255]);
    circle((width/2+40),(height/2),30);
    circle((width/2-40),(height/2),30);
noLoop
}

I found creating the proportions most challenging and getting different features in their correct positions.

project1-self portrait

sketch

    function setup() {
    createCanvas(1920,1080)
}


function draw() {
    background(0);
    fill(20);
    ellipse(600,400,500,300)
    ellipse(1320,400,500,300)
    fill(40)
    ellipse(600,400,400,290)
    ellipse(1320,400,400,290)
    fill(70)
    ellipse(600,400,300,280)
    ellipse(1320,400,300,280)
    fill(110)
    ellipse(600,400,250,270)
    ellipse(1320,400,250,270)
    fill(140)
    ellipse(600,400,150,260)
    ellipse(1320,400,150,260)
    fill(240)
    ellipse(600,400,90,260)
    ellipse(1320,400,90,260)

    fill(30)
    ellipse(960,690,50,100)
    fill(60)
    ellipse(960,800,200,50) 

    
    var y = 260
    var dir = 1
    var speed = 50 
    function draw () {
        fill (0)
        ellipse(600, y, 30,30)
        ellipse(1320, y, 30,30)
        y += dir * speed
        if (y<200) {
            dir= -dir
        }
        if (y>600) {
            dir= -dir
        }
    }
    
}

    






most challenging is calculate the position

Project 1: My Self Portrait

sketch
//name: Hari Vardhan Sampath
//classSection: E

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

function draw() {
    
    fill(212, 38, 40);
    ellipse(250, 150, 160, 200);
    fill(150, 38, 40);
    ellipse(250, 160, 300, 100); //hat

    fill(251, 209, 1);
    ellipse(250, 250, 150, 200); //faceOutline

    strokeWeight(7);
    ellipse(220, 225, 50, 50);
    ellipse(280, 225, 50, 50);
    line(260, 220, 240, 220); //glasses
    
    strokeWeight(10);
    point(220, 220);
    strokeWeight(10);
    point(280, 220); //eyes
    
    strokeWeight(5);
    fill(255, 255, 255);
    arc(250, 300, 75, 30, 220, 330, CHORD)  //mouth

    strokeWeight(5);
    arc(250, 260, 5, 15, 200, 330) //nose

    noLoop();
}

project 1: my self-portrait

efleisch project
/*Eliana Fleischer
    efleisch
    Section E
*/

function setup() {
    createCanvas(500, 500);
    background(240, 146, 243);
    //used a RGB color chart to find the color code for a purple bakcground
 
}

function draw() {
    //these lines were a way to add more elements to my assignemnt and also experiment using the "color" command in the code
    // i put all the starting points as the same so it would make a light refraction-esque shape
    strokeWeight(10)
    stroke("red")
    line(width/2,height/3,500,height/3)
    stroke("orange")
    line(width/2,height/3,500,height/3+10)
    stroke("yellow")
    line(width/2,height/3,500,height/3+20)
    stroke("green")
    line(width/2,height/3,500,height/3+30)
    stroke("blue")
    line(width/2,height/3,500,height/3+40)
    stroke("purple")
    line(width/2,height/3,500,height/3+50)
   

    strokeWeight(1)
    stroke(0)
    //this is the fill I am using for my skin tone. I used the same RGB generator for it as with the purple background
    fill(164,127,73)
    
    // i used the starting point of width/2 and height/3 and based all of my measurments off of that scale
    ellipse(width/3 -25, height/3, 20, 30) // these are the ellipses for my ears. i put it first so it would be drawn behind the head
    ellipse(width/3 + 75, height/3, 20, 30)
    ellipse(width/3 +25, height/3, 100, 125) // head
    circle(width/3 -25, height/2 +80, 25) // these are the hands 
    circle(width/3 +75, height/2 +80, 25)

    fill(255)// this is the white fill for my eyes

    ellipse(width/3, height/3, 24,32)
    ellipse(width/3 + 50, height/3, 24, 32)

    fill(62,32,9) // this is the brown for the center of my eyes 

    circle(width/3, height/3, 16) //center of eyes
    circle(width/3 + 50, height/3, 16)

    fill(0)

    triangle(width/3 + 25, height/3 + 25, width/3 +13, height/3 + 37, width/3 + 37, height/3 + 37) //mouth

    fill(255)
    triangle(width/3 + 25, height/3 + 25, width/3 + 20, height/3 + 32, width/3 + 30, height/3 + 32) //teeth

    strokeWeight(3) // i wanted my hair to be drawn bolder so i increased the stroke weight

    fill(0)
/* these points I used to plan out my quadrilaterals but I dont need them for the final product
    point(width/3 + 25, height/3 - 65)
    point(width/3 - 15, height/3 - 55)
    point(width/3 , height/3 - 50)
    point(width/3 - 25 , height/3 - 10)

*/ 

    quad(width/3 + 25, height/3 - 65, width/3 - 15, height/3 - 55, width/3 - 25 , height/3 , width/3 , height/3 - 50)// hair
    quad(width/3 + 25, height/3 - 65, width/3 + 40, height/3 - 55, width/3 + 75 , height/3 , width/3 +75 , height/3 - 50)


    strokeWeight(7) // i decided to use points instead of small circles to utilize a different element 
    point(width/3, height/3 ) // pupils 
    point(width/3 +50, height/3 )

    strokeWeight(1) // decreased stroke weight again for drawing the body
    rect(width/3 -25, height/2 -20, 100, 100) // body
    rect(width/3 -40, height/2 +5, 15, 75) // arms
    rect(width/3 +75, height/2 +5, 15, 75)
    fill(0, 102, 0) // green for pants
    rect(width/3 - 25, height/2 +80, 45, 100) //pants
    rect(width/3 +30, height/2 +80, 45, 100)


}

I think the most challenging part of my project was centering all of my objects relative to each other.

project 1: self-portrait

m’s project 1
/*m. tayao
    atayao
    lab section E
*/

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

function draw() {
// BACKGROUND CHANGE
if (mouseX > width/2) {
    background(145, 176, 255);    // light blue bg
    fill(208, 230, 112);    // "O"
    rect(width/2 - 50, height/2 - 200, 35, 55);
    rect(width/2 - 40, height/2 - 190, 25, 45);
    fill(145, 176, 255);
    rect(width/2 - 40, height/2 - 190, 15, 35);
    fill(208, 230, 112);    // "H"
    rect(width/2 - 5, height/2 - 200, 10, 55);
    rect(width/2 + 25, height/2 - 200, 10, 55);
    rect(width/2, height/2 - 175, 30, 10);
    rect(width/2 + 45, height/2 - 200, 10, 40);    // "!"
    rect(width/2 + 45, height/2 - 155, 10, 10);
} else {
    background(208, 230, 112);
    }
// SELF-PORTRAIT
noStroke();
fill(64, 48, 27);    // hair
ellipse(width/2 - 55, height/2 - 60, 75);
ellipse(width/2 + 25, height/2 - 50, 135);
rect(width/2 - 92.5, height/2 - 60, 184.75, 200);
fill(214, 161, 96);    // head
ellipse(width/2, height/2 + 15, 150, 165);
fill(89, 55, 12);    // eyebrows
ellipse(width/2 - 25, height/2 + 7, 25, 10);
ellipse(width/2 + 25, height/2 + 7, 25, 10);
fill(242, 236, 228);    // whites of eyes
ellipse(width/2 - 30, height/2 + 35, 45, 30);
ellipse(width/2 + 30, height/2 + 35, 45, 30);
fill(125, 81, 0);    // irises
ellipse(width/2 - 30, height/2 + 35, 20);
ellipse(width/2 + 30, height/2 + 35, 20);
fill(64, 44, 15);    // pupils
circle(width/2 - 30, height/2 + 35, 10);
circle(width/2 + 30, height/2 + 35, 10);
fill(181, 129, 65);    // nose
ellipse(width/2 - 5, height/2 + 70, 7);
ellipse(width/2 + 5, height/2 + 70, 7);
fill(237, 115, 90);    // cheeks
ellipse(width/2 - 45, height/2 + 65, 40, 20);
ellipse(width/2 + 45, height/2 + 65, 40, 20);
fill(191, 69, 131);    // mouth
ellipse(width/2, height/2 + 85, 20, 10);
fill(242, 236, 228);    // teef
ellipse(width/2, height/2 + 82, 13, 5);
}

Project 1: My Self Portrait

sketch
// Ana Furtado 
// Section E

function setup() {
    createCanvas(400, 400);
    background(54, 51, 158);     // blue
}

function draw() {
    stroke(84, 18, 18);      // reddish brown
    strokeWeight(30);
    line(135, 40, 80, 399);      // back hair left
    line(135, 40, 115, 399);
    line(265, 40, 325, 399);     // back hair right
    line(265, 40, 275, 399);
    stroke(0, 0, 0);     // black
    strokeWeight(1);
    fill(0, 206, 209);     // light blue
    ellipse(100, 210, 30, 30);     // earrings
    ellipse(300, 210, 30, 30);
    fill(255, 228, 196);     // skin
    ellipse(200, 400, 100, 400);     // neck
    fill(255, 228, 196);     // skin
    ellipse(200, 200, 200, 400);     // face
    fill(255, 255, 255);     // white
    ellipse(150, 150, 50, 100);     // left eye
    ellipse(250, 150, 50, 100);     // right eye
    fill(139, 69, 19);     // brown
    ellipse(150, 150, 25, 50);     // left pupil
    ellipse(250, 150, 25, 50);     // right pupil
    fill(255, 228, 196);     // skin
    circle(200, 200, 20, 20);     // nose
    line(190, 200, 190, 125);
    line(210, 200, 210, 125);
    fill(220, 20, 60);     // red
    ellipse(200, 300, 110, 50)     // mouth
    line(150, 300, 250, 300);
    stroke(84, 18, 18);      // reddish brown
    strokeWeight(1);
    fill(84, 18, 18);     // reddish brown
    ellipse(200, 40, 150, 80);     // hair top
    strokeWeight(10);
    line(120, 40, 50, 399);      // hair left
    line(120, 40, 75, 399);
    line(270, 40, 375, 399);     // hair right
    line(270, 40, 350, 399);
    noLoop();
}

I found the placement of the face and the uploading of this assignment the most challenging parts of the assignment.

Project 1: My Self Portrait


sketch

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

function draw() {
    background(200, 64, 52);
    strokeWeight(5);
    stroke(223, 160, 125);
    fill(230, 177, 138);
    rect(227, 150, 50, 150);
    fill(0);
    ellipse(250, 120, 160, 150);
    fill(230, 177, 138);
    ellipse(width/2, height/2, 120, 160);
    line(225, 180, 300, 220);
    fill(200, 160, 130);
    quad(200, 100, 210, 200, 240, 120);
    fill(190, 150, 105);
    quad(250, 100, 300, 200, 290, 110);
    stroke(0);
    ellipse(225, 125, 1, 1);
    ellipse(270, 125, 1, 1);
}
 
For me, the most difficult part of the project was figuring out the coordinates for the quadrilaterals.