Category: Project-01-Face

Jacky Tian – Project 01

sketch

// Yinjie Tian
// yinjiet
// Section D
// Project 01

function setup() {
    createCanvas(600, 600);
    background(180);
 
}

function draw() {   
//Background
	stroke(0);
	fill(250);
	rect(80, 50, 80, 550);
	rect(110, 80, 140, 520);
	rect(300, 100, 200, 500);
	rect(160, 170, 300, 430);
	rect(400, 200, 200, 400);

//Neck
    noStroke();
    fill(230,214,169);
    quad(240, 310, 235, 370, 320, 370, 315, 310);

//Ears
    stroke(240,224,179);
    fill(240,224,179);
 
 	rect(195, 240, 20, 40, 10);
    rect(340, 240, 20, 40, 10);

//Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    
    beginShape();
    vertex(210, 270); 
    vertex(210, 310);  
    vertex(250, 335);  
    vertex(310, 335); 
    vertex(340, 310); 
    vertex(340, 225);   
    vertex(215, 225); 
    endShape();

//Hair
    stroke(0);
    fill(0);
    strokeWeight(4);

    beginShape();
    vertex(190, 220);
    vertex(205, 150);
    vertex(270, 125);
    vertex(338, 150);
    vertex(360, 218);
    vertex(342, 235);
    vertex(330, 235);
    vertex(290, 225);
    vertex(250, 235);
    vertex(217, 230);
    vertex(210, 230);
    endShape();

//Glasses
	stroke(225, 215, 0);
    strokeWeight(3);
    fill(255);
    rect(220, 240, 45, 40, 15);
    rect(288, 240, 45, 40, 15);
    line(265, 250, 288, 250);

//Nose
	stroke(0);
    strokeWeight(2);
    line(275, 280, 270, 300);
    line(270, 300, 275, 300);

//Mouth
    noStroke();
    fill(290,214,159);
    ellipse(290, 320, 30, 10);

//Jacket
    stroke(0, 0, 0);
    fill(0, 0, 0);
    strokeWeight(4);
    beginShape();
    vertex(150, 365);
    vertex(90, 480);
    vertex(90, 600);
    vertex(430, 600);
    vertex(490, 480);
    vertex(410, 365);
    endShape();  

//Pocket
	stroke(255,165,0);
	rect(190, 450, 50, 60);

}

 

In the self portrait project, I worked on the shape of the face first and then move down to glasses, nose, mouth, neck and the jacket. The blocks at the background symbolize that I’m an architecture student. The most frequent shape commands that were being used were “quad”, “rect”, “ellipse”, “line”, “beginshape”, and etc…

Alec Albright – Project 01

sketch

// ALec Albright
// Section A
// Project 01


function setup(){
    height = 600
    width = 600
    createCanvas(width, height);
    angleMode(DEGREES);
}

function draw(){
    // background color change
    if(mouseIsPressed) {
        background("black");
    } else {
        background("blue");
    }

    // forehead
    fill(0, 255, 255);
    noStroke();
    rect(140, 160, 320, 160);

    // lower half of face
    noStroke();
    fill("magenta");
    quad(125, 310, 475, 310, 370, 510, 250, 510);

    // mouth
    fill("black");
    arc(300, 400, 100, 40, -10, 170, PIE);

    // nose
    fill(153, 51, 255);
    triangle(300, 270, 325, 360, 300, 370);

    // eyes
    fill("white");
    ellipse(240, 215, 45, 80);
    ellipse(350, 240, 60, 95);
    if (mouseX < width/2) {
        fill('black');
        ellipse(230, 230, 15, 30);
        ellipse(340, 261, 23, 40);
    } else {
        fill('black');
        ellipse(250, 230, 15, 30);
        ellipse(360, 261, 23, 40);
    }

    // hair
    fill("orange");
    rect(120, 40, 365, 130, 200, 40, 60, 0);

    // jaw
    stroke('yellow');
    strokeWeight(30);
    line(150, 360, 250, 510);
    stroke("red");
    line(200, 485, 435, 485);
    stroke('limegreen');
    line(450, 335, 350, 545);
}

In creating this project, I wanted to experiment with both understanding the coordinate system and using imperfection and variety in shapes and color to provide character in the work. I certainly encountered some struggles in accurately placing objects initially, but I got better at it as I progressed through the assignment.

Deklin Versace – Project 01 – Self Portrait

sketch

// Deklin Versace Section E

function setup() {
    createCanvas(600,600);
    background(38,48,60);
    fill(255,233,52);
    stroke(255,233,52);
    quad(125,425,125,600,475,600,475,425);
    fill(214,214,214);
    stroke(214,214,214);
    quad(85,415,145,415,145,600,85,600);
    quad(515,415,455,415,455,600,515,600);
    bezier(85,415,45,425,44,600,85,800);
    bezier(515,415,555,425,556,600,515,800);

    fill(255,210,200);
    stroke(255,210,200);
    strokeWeight(1);
    quad(190,390,410,390,410,450,190,450);
    bezier(190,450,275,470,325,470,410,450);
    fill(255,218,200);
    stroke(255,218,200);
    quad(150, 100, 450, 100, 445, 390, 155, 390);
    triangle(155,390,300,470,445,390);

    fill(250);
    stroke(250);
    ellipse(220,220,70,60);
    ellipse(380,220,70,60);

    fill(255,191,160);
    stroke(255,191,160);
    triangle(300,200,259,320,341,320);
    quad(270,310,295,175,305,175,330,310);


    fill(53,7,7);
    strokeWeight(4);
    stroke(255,191,160);
    bezier(220,370,225,415,375,415,380,370);
    fill(255,191,160);
    bezier(220,370,290,360,310,360,380,370);

    fill(0);
    stroke(54,110,178);
    ellipse(222,225,35,35);
    ellipse(378,225,35,35);

    noFill();
    strokeWeight(15);
    stroke(33,28,24);
    bezier(170,190,210,180,260,160,275,195);
    bezier(325,195,340,160,390,180,430,190);
    noStroke();
    fill(33,28,24);
    quad(150,125,450,125,440,90,160,90);
    bezier(160,90,190,50,220,60,310,90);
    bezier(440,90,410,70,350,50,300,90);
    bezier(160,90,140,100,150,120,150,130);
    bezier(440,90,460,100,450,120,450,130);


}

While working on this, I challenged myself to learn how to use the bezier tool. While most of the shapes are straight-forward and easy to create with the co-ordinate system, the bezier tool’s unique points that pull the line towards them were very difficult to work with initially.

Cathy Dong-Project-01-Face

sketch

function setup() {
    createCanvas(600,600);
    background(255,217,239);
}

function draw() {
    //background extra
    noStroke();
    fill("white");
    triangle(0,600,300,0,600,600);


    //neck
    noStroke();
    fill(249,215,196);
    rect(257,528,86,72);


    //neck outline
    stroke(130,65,57);
    strokeWeight(3);
    line(257,528,257,600);
    line(343,528,343,600);


    //Shirt
    noStroke();
    fill(176,209,255);
    rect(130,557,335,43,100,100,0,0);
    noStroke();
    fill(249,215,196);
    triangle(257, 557, 300, 600, 343, 557);



    //Face Basics
    noStroke();
    fill(249,215,196);
    beginShape();
    //Face
    curveVertex(385,145);
    curveVertex(430,190);
    curveVertex(450,288);
    curveVertex(450,400);
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    endShape(CLOSE);
    //face outline
    stroke(130,65,57);
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    endShape();


    // Right hair basics
    noStroke();
    fill(52,35,25);
    beginShape();
    //Left hair
    curveVertex(373,68);
    curveVertex(354,57);
    curveVertex(336,48);
    curveVertex(300,43);
    curveVertex(212,64);
    curveVertex(135,133);
    curveVertex(84,230);
    curveVertex(64,302);
    curveVertex(51,402);
    curveVertex(48,510);
    curveVertex(74,574);
    curveVertex(193,600);
    curveVertex(217,579);
    curveVertex(231,506);
    //left hair shaping face
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    //left hair
    curveVertex(388,120);
    curveVertex(385,100);
    curveVertex(373,67);
    endShape(CLOSE);


    // Right hair basics
    noStroke();
    fill(63,47,37);
    beginShape();
    //Right Hair
    curveVertex(388,120);
    curveVertex(385,110);
    curveVertex(373,67);
    curveVertex(408,76);
    curveVertex(453,106);
    curveVertex(500,182);
    curveVertex(530,300);
    curveVertex(538,430);
    curveVertex(515,543);
    curveVertex(404,590);
    //Right Hair shaping face
    curveVertex(370,514);
    curveVertex(435,440);
    curveVertex(450,400);
    curveVertex(450,288);
    curveVertex(420,190);
    curveVertex(385,145);
    endShape(CLOSE);

   
    //Eye
    fill("white");
    stroke("black");
    strokeWeight(1);
    beginShape();
    //Left
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);//turning point
    curveVertex(263,325);
    curveVertex(245,335);
    curveVertex(224,337);
    curveVertex(202,331);
    curveVertex(183,318);
    endShape(CLOSE); 
    //Right
    beginShape();
    curveVertex(413,318);
    curveVertex(413,318);
    curveVertex(394,331);
    curveVertex(372,337);
    curveVertex(353,335);
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    endShape(CLOSE);

    //Eye Line
    noFill();
    stroke("black");
    strokeWeight(3);
    //Left
    beginShape();
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);
    curveVertex(263,325);
    endShape();
    //Right
    beginShape();
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    curveVertex(413,318);
    endShape();


    //Eyeball
    //Left
    fill(82,63,51);
    strokeWeight(1);
    ellipse(227,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(227,318,20);
    fill("white");
    noStroke();
    ellipse(235,312,8);
    //Right
    fill(82,63,51);
    strokeWeight(1);
    ellipse(370,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(370,318,20);
    fill("white");
    noStroke();
    ellipse(378,312,8);


    //nose 1
    stroke(130,65,57);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(272,384);
    curveVertex(271,384);
    curveVertex(266,395);
    curveVertex(274,401);
    curveVertex(280,397);
    curveVertex(290,405);
    curveVertex(300,412);
    curveVertex(310,405);
    curveVertex(320,397);
    curveVertex(326,401);
    curveVertex(334,395);
    curveVertex(329,384);
    curveVertex(328,384);
    endShape();
    //nose 2
    stroke(130,65,57);
    strokeWeight(1);
    noFill();
    line(315,310,318,370);


    //lip
    //color
    fill(217,92,48);
    noStroke();
    beginShape();
    curveVertex(300,440);
    curveVertex(288,435);
    curveVertex(262,440);
    curveVertex(239,446);
    curveVertex(262,465);
    curveVertex(300,477); //midpoint
    curveVertex(338,465);
    curveVertex(361,446);
    curveVertex(338,440);
    curveVertex(312,435);
    curveVertex(300,440);
    endShape(CLOSE);
    //line
    noFill();
    stroke(130,65,57);
    strokeWeight(2);
    curve(232,380,232,445,368,445,368,380);
    //point
    fill(130,65,57);
    noStroke();
    ellipse(232,445,5);
    ellipse(368,445,5);


    //glass
    noFill();
    stroke("black");
    strokeWeight(3);
    ellipse(227,325,120,110);
    ellipse(370,325,120,110);
    stroke("black");
    strokeWeight(5);
    line(286,312,310,312);
    stroke(255,204,29);
    strokeWeight(3);
    line(286,310,310,310);

}

The very first thing is to draw a rough sketch of myself. I snap pixels with the “guide line” tool in Photoshop. The process is entertaining, even though it was a bit struggle to find the exact point that creates a smooth shape.

Hyejo Seo – Project 01


hyejos-portrait

For my self-portrait, I tried to make it look as much as a line drawing as possible. I also wanted to bring focus to my eyes as I consider my eye liner (my eye makeup as I have been putting it on consistently for several years now) to be part of my identity. 

function setup() {
  createCanvas(600,600);
  background(255,255,249);

}

function draw() {

  //hair
  noFill();
  stroke(255,80,73);
  strokeWeight(8);
  beginShape();
  curveVertex(300, 30);
  curveVertex(300, 30);
  curveVertex(140, 120);
  curveVertex(100,300);
  curveVertex(100, 530);
  curveVertex(220, 580);
  curveVertex(220, 500);
  curveVertex(125, 300);
  curveVertex(300, 75);
  curveVertex(300, 75);
  endShape();
  line(300,30,300,75);

  beginShape();
  curveVertex(300, 30);
  curveVertex(300, 30);
  curveVertex(460, 120);
  curveVertex(500,300);
  curveVertex(500, 530);
  curveVertex(380, 580);
  curveVertex(380, 500);
  curveVertex(475, 300);
  curveVertex(300, 75);
  curveVertex(300, 75);
  endShape();

  stroke(255,80,73);
  strokeWeight(5);
  beginShape();
  curveVertex(300, 30);
  curveVertex(300, 30);
  curveVertex(140, 120);
  curveVertex(100,300);
  curveVertex(100, 530);
  curveVertex(220, 580);
  curveVertex(220, 500);
  curveVertex(125, 300);
  curveVertex(300, 75);
  curveVertex(300, 75);
  endShape();

//face
  noFill();
  stroke(255,178,217);
  strokeWeight(8);
  ellipse(300, 300, 350, 450);
  

  noFill();
  stroke('#00120B');
  strokeWeight(5);
  beginShape();
  curveVertex(350, 260);
  curveVertex(350, 260);
  curveVertex(375, 235);
  curveVertex(410,235);
  curveVertex(445, 260);
  curveVertex(445, 260);
  endShape();

  
  noFill();
  stroke(0);
  strokeWeight(3);
  beginShape();
  curveVertex(350, 260);
  curveVertex(350, 260);
  curveVertex(375, 275);
  curveVertex(410,275);
  curveVertex(445, 260);
  curveVertex(445, 260);
  endShape();
  
  //eyeliner - right eye
 
  fill(0);
  noStroke();
  beginShape();
  curveVertex(347, 260);
  curveVertex(347, 260);
  curveVertex(355,240);
  curveVertex(375,225);
  curveVertex(400,222);
  curveVertex(420,225);
  curveVertex(420,225);
  curveVertex(445,260);
  curveVertex(410,235);
  curveVertex(375,235);
  curveVertex(350,260);
  curveVertex(350,260);
  endShape();
  triangle(416,225, 475,240, 446,262)

   //left eye
   
   noFill();
   stroke('#00120B');
   strokeWeight(5);
   beginShape();
   curveVertex(250, 260);
   curveVertex(250, 260);
   curveVertex(225, 235);
   curveVertex(190,235);
   curveVertex(155, 260);
   curveVertex(155, 260);
   endShape();
 
   //under eye
  
   noFill();
   stroke(0);
   strokeWeight(3);
   beginShape();
   curveVertex(250, 260);
   curveVertex(250, 260);
   curveVertex(225, 275);
   curveVertex(190,275);
   curveVertex(155, 260);
   curveVertex(155, 260);
   endShape();
   
   //eyeliner - right eye
  
   fill('#00120B');
   noStroke();
   beginShape();
   curveVertex(253, 260);
   curveVertex(253, 260);
   curveVertex(245,240);
   curveVertex(225,225);
   curveVertex(200,222);
   curveVertex(180,225);
   curveVertex(180,225);
   curveVertex(155,260);
   curveVertex(190,235);
   curveVertex(225,235);
   curveVertex(250,260);
   curveVertex(250,260);
   endShape();
   triangle(184,225, 125,240, 154,262)

  //  pupils
  circle(215,245,35,35)
  circle(408,245,35,35)

  //eyebrows
  fill(0);
  beginShape();
  quad(257,185,170,180,170,190,255,200);
  endShape(CLOSE);
  triangle(170,180,130,200,180,190);
  endShape();

  fill(0);
  beginShape();
  quad(343,185,430,180,430,190,345,200);
  endShape(CLOSE);
  triangle(430,180,470,200,420,190);
  endShape();

  //nose
  noFill();
  stroke(223,253,255);
  line(290,240,285,340);
  stroke(223,253,255);
  line(310,240,315,340);
  arc(311,368, 90, 70, PI, PI + QUARTER_PI);
  noFill();
  stroke(223,253,255);
  line(290,240,285,340);
  stroke(223,253,255);
  line(310,240,315,340);
  endShape();
  arc(287, 368, 90, 70, -PI*1/4, 0);
  stroke()
  arc(300,430, 70, 30, 0, PI)
}

SooA Kim – Project 01

project1

//15-104, Section C
//SooA Kim
//sookim@andrew.cmu.edu

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

function draw() {
    background(100, 100, 150);

    //hair
    fill(0);
    ellipse(400, 330, 200, 250);
    ellipse(420, 450, 250, 250);
    ellipse(200, 350, 180, 220);
    ellipse(190, 460, 180, 180);
    ellipse(180, 570, 200, 200);
    ellipse(500, 560, 150, 150);

    //ears
    fill('#F5E0CD');
    ellipse(300, 320, 280, 150);

    //neck
    rect(255, 350, 100, 200);

    //face
    stroke(255, 255, 255);
    strokeWeight(3);
    ellipse(300, 300, 230, 300);

    //eyes
    noStroke();
    fill(0);
    ellipse (252, 280, 35, 35);
    ellipse (357, 280, 35, 35);

    //dot
    ellipse(357, 301, 5, 5);

    //eyelid
    noFill();
    stroke(0);
    strokeWeight(8);
    arc(245, 283, 57, 50, PI, TWO_PI);
    arc(350, 283, 57, 50, PI, TWO_PI);

   //mouth
    stroke('#C69C6D');
    strokeWeight(5);
    arc(300, 320, 50, 50, HALF_PI, PI - QUARTER_PI);

    //lips
    fill('#E55F55');
    noStroke();
    ellipse(310, 400, 40, 20);

    //hair bang
    fill(0);
    push();
    rotate(PI / 5.0);
    ellipse(385, -80, 250, 120);
    pop();
    push();
    rotate(PI / 3.5);
    ellipse(280, -45, 120, 230);
    pop();
    
    //body
    fill(50, 50, 50); 
    rect(150, 480, 320, 200, 50);

    //hair bang2
    push(); 
    fill(0);
    rotate(PI / 3.5);
    ellipse(610, -35, 150, 250);
    ellipse(670, 0, 250, 250);
    pop();
    fill(0);
    ellipse(170, 550, 150, 180);

     //earring
    fill(255)
    ellipse (180, 360, 12, 12);
    fill(255)
    triangle(165, 400, 180, 365, 200, 400); 
}

This was my first time generating an image by writing code. It helped me get familiar with coordinates in my canvas and realize the hierarchy/or lines to identify layers when you code in your text editor.

Nawon Choi— Project 01

nawon-portrait

// Nawon Choi
// Section C
// Project-01 Self-Portrait


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

function draw() {
    
    // background
    noStroke();
    fill("#E3CBC8");
    rect(0, 0, 500, 250);
    
    // head
    noStroke();
    fill("#6A6159");
    ellipse(234, 250, 395, 500);

    noStroke();
    fill("#6A6159");
    ellipse(312, 249, 302, 465);

    noStroke();
    fill("#F2E3C2");
    ellipse(255, 236, 356, 423);

    noStroke();
    fill("#6A6159");
    rect(122, 142, 69, 16);

    noStroke();
    fill("#6A6159");
    rect(315, 142, 69, 16);

    noStroke();
    fill("#6A6159");
    quad(128, 61, 303, 30, 200, 125, 54, 182);

    noStroke();
    fill("#6A6159");
    triangle(224, 16, 303, 30, 153, 57);

    // table
    noStroke();
    fill("#AA827C");
    rect(0, 250, 500, 134);

    noStroke();
    fill("#9B736D");
    rect(0, 384, 500, 30);

    noStroke();
    fill("#E1ACA4");
    rect(0, 414, 500, 86);
    
    // rice
    noStroke();
    fill("#F3EEE9");
    rect(163, 250, 175, 80, 29);

    // egg
    noStroke();
    fill("#F2BD39");
    rect(143, 224, 214, 53, 7);

    noStroke();
    fill("#F8D683");
    rect(143, 224, 214, 20, 7);

    // seaweed
    noStroke();
    fill("#424944");
    rect(235, 220, 30, 24);

    noStroke();
    fill("#27312B");
    rect(235, 244, 30, 33);

    noStroke();
    fill("#151916");
    rect(235, 277, 30, 53);

    // eyes
    noStroke();
    fill("#ffffff");
    ellipse(154, 198, 57, 46);

    noStroke();
    fill("#ffffff");
    ellipse(347, 198, 57, 46);
    

    // eyeballs
    let x1, x2, y;
    // let x1 = mouseX+153;
    //     x2 = mouseX
    //     y = mouseY-142;

    // LEFT x range: (142 - 166)
    // RIGHT x range: (335 - 359)
    // y range: (192 - 205)
    if (mouseY < 192 ){
        y = 192;
    } else if (mouseY >= 192 & mouseY <=205) {
        y = mouseY;
    } else {
        y = 205;
    }

    if (mouseX < 142) {
        x1 = 142,
        x2 = 335;
    } else if (mouseX >= 142 & mouseX <= 166) {
        x1 = mouseX,
        x2 = 335;
    } else if (mouseX > 166 & mouseX < 335) {
        x1 = 166,
        x2 = 335;
    } else if (mouseX >= 335 & mouseX <= 359) {
        x1 = 166,
        x2 = mouseX;
    } else {
        x1 = 166,
        x2 = 359;
    }

    noStroke();
    fill("#6A6159");
    ellipse(x1, y, 33, 33);

    noStroke();
    fill("#6A6159");
    ellipse(x2, y, 33, 33);

    noStroke();
    fill("#FAFAFA");
    ellipse(x1-4, y-4, 12, 12);

    noStroke();
    fill("#FAFAFA");
    ellipse(x2-4, y-4, 12, 12);

    
}

I definitely wanted to have an interactive component for my self-portrait, so I made the eyes follow the direction of the mouse. Perhaps the most challenging part of this project was coding the values so that the eyeballs would stay within the range of the eyes. I thought for a while on what I wanted my self-portrait to look like, and ultimately, I decided to focus on my two of my favorite foods—eggs and sushi.

Project-01-Face Sarah Kang

My approach to this project was to capture my features into a mini cartoon character. Although I tried my best to translate my face features into this portrait, my picture turned out looking pretty different from my appearance in reality, especially my hair. Despite this outcome, this was a good learning experience on how to draw geometric shapes on p5.js.

face

//Sarah Kang
//Section C
//sarahk1@andrew.cmu.edu
//assignment-01
var line;
function setup() {
	createCanvas(600, 600);
}
function draw() {
	background(255, 204, 100);
	

	strokeWeight(2.5);
	stroke(0, 0, 255);
	for(var offset =0; offset<600; offset +=20){
		line(offset, 0, offset, height);
	}
	//bangs
	noStroke();
	fill(0);
	rect(185, 315, 230, 180);
	//face + neck
	noStroke();
	fill(238, 212, 194);
	ellipse(300, 300, 196, 264);
	ellipse(300, 450, 40, 150);
	//ears
	ellipse(392, 355, 30, 30);
	ellipse(208, 355, 30, 30);
	
	//shirt
	fill(245, 102, 91);
	ellipse(300, 600, 170, 260);
	//hair in back
	fill(0);
	arc(300, 240, 230, 185, PI, 0, OPEN);
	rect(185, 240, 230, 75);
	//eyes
	ellipse(255, 350, 15, 7);
	ellipse(345, 350, 15, 7);
	//eyebrows
	stroke(0);
	noFill();
	arc(255, 340, 30, 10, PI, 0, OPEN);
	arc(345, 340, 30, 10, PI, 0, OPEN);
	//mouth
	stroke(245, 102, 91);
	noFill();
	arc(300, 400, 20, 7, 0, PI, OPEN);
	//earrings
	stroke(360);
	ellipse(392, 375, 14, 20);
	ellipse(208, 375, 14, 20);
}

Crystal Xue- Project-01

sketch-125.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Assignment-01

function setup() {
    createCanvas(600,600);
    background(221,210,59);
    angleMode(DEGREES);
}

function draw() {
    noStroke();
	fill(220,184,121);
    ellipse(300,270,233,280);
    //face

    fill(155,145,194);
    rect(205,430,190,140);
    triangle(205,430,205,530,160,510);
    triangle(395,430,395,530,440,510);
    //shirt

    fill(220,184,121);
    rect(270,380,60,60);
    rect(235,430,130,80);
    //neck

    fill(255,255,255);
    circle(300,490,10);
    circle(290,488,6);
    circle(280,485,6);
    circle(270,478,6);
    circle(260,468,6);
    circle(251,454,6);
    circle(245,435,6);
    circle(355,435,6);
    circle(349,454,6);
    circle(340,468,6);
    circle(330,478,6);
    circle(320,485,6);
    circle(310,488,6);
    //necklace

    fill(255,255,255);
    ellipse(250,273,33,20);
    ellipse(350,273,33,20);
    fill(0);
    circle(250,270,25);
    circle(350,270,25);
    stroke(20);
    strokeWeight(4);
    line(265,263,200,260);
    line(260,263,217,266);
    line(333,263,394,260);
    line(337,263,382,266);
    //eyes

    fill(0);
    beginShape();
    curveVertex(350, 140);
    curveVertex(300, 220);
    curveVertex(220, 250);
    curveVertex(200, 320);
    curveVertex(200, 380);
    curveVertex(190, 420);
    curveVertex(160, 420);
    curveVertex(160, 330);
    curveVertex(160, 220);
    curveVertex(260, 130);
    curveVertex(350, 140);
    curveVertex(300, 220);
    curveVertex(220, 250);
    endShape();
    fill(0);
    beginShape();
    curveVertex(320, 80);
    curveVertex(350, 140);
    curveVertex(380, 190);
    curveVertex(420, 250);
    curveVertex(420, 270);
    curveVertex(415, 250);
    curveVertex(370, 200);
    curveVertex(350, 150);
    curveVertex(320, 80);
    endShape();
    fill(0);
    beginShape();
    curveVertex(160, 400);
    curveVertex(140, 450);
    curveVertex(160, 490);
    curveVertex(180, 440);
    curveVertex(190, 410);
    curveVertex(150, 400);
    endShape();
 
    push();
    rotate(50);
    fill(0);
    ellipse(400,-175,140,30); 
    pop();
    //hair   

    noStroke();
    fill(119,66,141);
    circle(169,430,20);
    triangle(160,430,120,410,120,440);
    triangle(180,430,210,410,210,440);
    //hairtie

	fill(220,184,121);
    ellipse(426,265,27,45);
    //ears

    fill(152,109,178);
    ellipse(210,310,100,20);
    ellipse(390,310,100,20);
    //blush

    fill(168,73,122);
    circle(300,370,30);
    fill(98,41,84);
    circle(300,375,20);
    //mouth
}

This was my very first time trying to generate images by coding. It was quite a fun and self-reflecting experience. Especially when I was generating curves, it reminds me of the blind drawing exercise(Drawing only looking at the subjects but not the canvas) I’ve done in high school.

Aaron Lee — Project01 — Face

Aaron

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-01-self portrait
*/

//canvas
function setup() {
   createCanvas(600,600);      
}


function draw() {
//background
    if (mouseX < width*0.33) {
    background("red");
    } else if (mouseX > width*0.66) {
    background("blue");
    } else {
    background("white");
    }

//hat
    fill(255);
    noStroke();
    quad(249,213,355,213,390,284,220,266);
    fill(0);
    triangle(195,266,266,249,390,284);
//eyebrow
    stroke(100);
    line(213,309,231,302);
    line(258,294,292,284);
//nose
    stroke(50);
    strokeWeight(4);
    line(249,277,266,373);
    line(266,373,280,364);
    line(280,364,281,383);
//book
    line(188,367,274,385);
    line(274,385,360,366);
    line(360,366,367,498);
    line(274,385,270,460);
    line(188,367,193,502); 
//sunglasses
    noStroke();
    fill(0)
    quad(208,329,240,314,247,342,225,348);
    quad(263,310,295,300,297,326,272,333);
    quad(242,326,359,293,357,302,245,336);
//hand
    stroke(0);
    strokeWeight(1);
    line(257,564,248,532);
    line(248,532,225,505);
    line(225,505,233,500);
    line(240,507,222,487);
    line(222,487,228,482); 
    line(243,498,221,469); 
    line(221,469,228,461); 
    line(221,469,228,461); 
    line(221,454,248,487); 
    line(221,454,231,447); 
    line(231,447,268,497);
    line(268,497,292,482);  
    line(292,482,300,493);  
    line(300,493,285,508);  
    line(285,508,304,552);  
}

Instead of avoiding rigid curves, I decided to design them intentionally with different lineweights.