Project 1: My Self Portrait

renee-portrait

function setup() {
    createCanvas(975, 1133);
}

function draw() {
    background(0);
    fill(59, 84, 106);
    rect(0, 0, 975, 1133);
    fill(236, 229, 215);
    circle(893, 592, 738);
    fill(98, 118, 108);
    rect(736, 433, 213, 31);
    fill(198, 132, 47);
    rect(739, 464, 210, 68);
    fill(98, 118, 108);
    rect(947, 435, 30, 286);
    fill(98, 118, 108);
    rect(446, 335, 219, 795)
    fill(241, 209, 195);
    circle(727, 699, 199);
    fill(98, 118, 108);
    rect(448, 96, 526, 237);
    fill(241, 209, 195);
    rect(0, 0, 120, 1133);
    fill(221, 165, 111);
    rect(120, 0, 64, 1130);
}

(the portrait is cut off because the dimensions of the canvas does not fit word space)

This project was interesting because it was the first time I made a self portrait out of shapes, so it was fun to get creative.

Project 1: My Self Portrait

sketch
function setup() {
    createCanvas(400, 600);
  }
  
function draw() {
    
    background(54, 47, 117);
    
    // print(mouseX, mouseY);
    
    // hair
    beginShape();
    
    strokeWeight(2);
    stroke(0)
    fill(0);
    curveVertex(40, 600);
    curveVertex(40, 600);
    curveVertex(63, 358);
    curveVertex(108, 255);
    curveVertex(198, 216);
    curveVertex(288, 255);
    curveVertex(334, 358);
    curveVertex(360, 600);
    curveVertex(360, 600);
    
    endShape();
    
    
    
    // shoulder and neck
    beginShape();
    
    strokeWeight(2);
    stroke(0)
    fill(253, 236, 231);
    curveVertex(92, 600);
    curveVertex(92, 600);
    curveVertex(114, 555);
    curveVertex(147, 534);
    curveVertex(173, 521);
    curveVertex(184, 490);
    curveVertex(216, 490);
    curveVertex(227, 521);
    curveVertex(253, 534);
    curveVertex(286, 555);
    curveVertex(308, 600);
    curveVertex(308, 600);
    
    endShape();
    
    
    
    // face
    beginShape();
    
    strokeWeight(4);
    stroke(0)
    curveVertex(199, 500);
    curveVertex(199, 500);
    curveVertex(135, 466);
    curveVertex(120, 369);
    curveVertex(159, 334);
    curveVertex(198, 300);
    curveVertex(218, 334);
    curveVertex(280, 369);
    curveVertex(265, 466);
    
    curveVertex(199, 500);
    curveVertex(199, 500);
    
    endShape();
    
    
    
    // clothes
    beginShape();
    
    fill(253, 151, 156);
    curveVertex(92, 600);
    curveVertex(92, 600);
    curveVertex(114, 555);
    curveVertex(147, 534);
    curveVertex(173, 521);
    curveVertex(201, 546);
    curveVertex(227, 521);
    curveVertex(253, 534);
    curveVertex(286, 555);
    curveVertex(308, 600);
    curveVertex(308, 600);
    
    endShape();
    
    
    
    // eyes
    fill(0);
    circle(160, 400, 26);
    circle(240, 400, 26);
    
    
    
    // eyelids
    strokeWeight(8);
    noFill();
    arc(160, 393, 34, 16, PI + PI/24, - PI/6);
    arc(240, 393, 34, 16, PI + PI/6, - PI/24);
    
    
    
    // eyebrows
    arc(160, 380, 52, 20, PI + PI/16, - PI/6);
    arc(240, 380, 52, 20, PI + PI/6, - PI/16);
    
    
    
    // mouth
    strokeWeight(8);
    stroke(0)
    line(192, 450, 210, 450);
    
    
    
    // nose
    arc(201, 430, 14, 8, PI + PI / 10, TWO_PI - PI / 10);
    
    
    
    // stars
    noStroke();
    fill(251, 255, 5);
    
    triangle(112, 54, 120, 24, 128, 54);
    triangle(112, 56, 120, 86, 128, 56);
    triangle(90, 56, 120, 48, 120, 64);
    triangle(120, 48, 120, 64, 150, 56);
    
    triangle(312, 154, 320, 124, 328, 154);
    triangle(312, 156, 320, 186, 328, 156);
    triangle(290, 156, 320, 148, 320, 164);
    triangle(320, 148, 320, 164, 350, 156);
    
    circle(50, 80, 8);
    circle(170, 150, 16);
    circle(230, 50, 12);
    circle(360, 100, 12);
    
    
    
    /* when mouse is on canvas, 
    the circle stars will start blinking, 
    and the character will open her mouth */
    
    if ((mouseX > 0) & (mouseX < width) &&
        (mouseY > 0) && (mouseY < height)) {
      
      // add rings for blinking effect
      let starR1 = random(8, 16);
      let starR2 = random(16, 24);
      let starR3 = random(12, 18);
      noFill();
      strokeWeight(1);
      stroke(251, 255, 5)
      circle(50, 80, starR1);
      circle(170, 150, starR2);
      circle(230, 50, starR3);
      circle(360, 100, starR3);
      
      // open mouse
      strokeWeight(6);
      stroke(0);
      fill(254, 97, 97);
      arc(201, 451, 22, 30, 0, PI);
  
    } 
      
    
  }

Project 1: My Self Portrait

Aysha Portrait

function setup() {
    createCanvas(350, 500);
    background(215, 167, 119)
}

function draw() {
    strokeWeight(0);
    fill(107, 70, 27) // eyes
    ellipse(100, 140, 50);
    ellipse(250, 140, 50);
    fill(252, 226, 215, 150); // pupils
    ellipse(105, 145, 30); 
    ellipse(255, 145, 30);
    fill(107, 70, 27); // eyelids
    triangle(75, 139, 70, 115, 107, 116);
    triangle(275, 139, 280, 115, 243, 116);
    noFill(); // nose
    strokeWeight(5);
    stroke(107, 70, 27);
    arc(175, 240, 80, 80, PI/4, 3/4 * PI);
    stroke(107, 70, 27); // mouth
    strokeWeight(0);
    fill(157, 117, 74);
   // ellipse(175, 405, 110, 60);
    fill(215, 167, 119);
    rect(110, 370, 120, 40);
    fill(144, 93, 37);
    ellipse(175, 410, 110, 40);
    fill(215, 167, 119);
    rect(110, 410, 120, 30);
    strokeWeight(0); // white plaid
    fill(252, 226, 215, 100);
    rect(25, 0, 35, 500);
    rect(290, 0, 35, 500);
    rect(157, 0, 35, 500);
    rect(0, 60, 350, 35);
    rect(0, 190, 350, 35);
    rect(0, 320, 350, 35);
    rect(0, 450, 350, 35);
    fill(107, 70, 27, 35); // brown plaid
    rect(90, 0, 35, 500);
    rect(225, 0, 35, 500);
    rect(0, 0, 350, 30)
    rect(0, 125, 350, 35);
    rect(0, 255, 350, 35);
    rect(0, 385, 350, 35);

    noLoop();
}

I’m not a very visual thinker, and it was more difficult than I expected to translate my idea into simple shapes.

Project 1: My Self Portrait

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.

Project 1: My Self Portrait

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.

Project 1: My Self Portrait

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.

Project 1: My Self Portait

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.

Project 1: My Self-Portrait

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.

Project 1: My Self Portrait

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.

LO Inspiration

This artwork was created by Kyuha Shim and the piece is named “The Art of Selection” which is located on his website http://www.kyuhashim.com/.

I originally found this work because Kyuha was my professor last year and I heard he made amazing computational design. I specifically admire this project because it is such an engaging and beautiful animation. It is like an optical illusional but is also readable words when everything lines up perfectly. This makes the piece so respectable because it is a delicate balance that probably took Kyuha awhile to perfect.

I don’t know much about his work. However, Kyuha Shim is a designer who uses code and collects data. It seems like his focus isn’t on making custom software but rather using data. So I would assume he used commercial software to make his design.

A Screenshot of The Animation