Category: Project-01-Face

Claire Yoon- Project 01- Self Portrait

Claire-face

//Claire Yoon Section E
//claireyo@andrew.cmu.edu
//Assignment-01*/

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

    //back hair
    fill(21, 21, 53);
    ellipse(300, 300, 250, 250);

    fill(21, 21, 53);
    ellipse(300, 400, 280, 300);

    //clothes

    fill(174,223,229);
    ellipse(300, 547, 280, 150);

    fill(174,223,229);
    rect(160, 543, 280, 250);

    //ears
    fill(245, 219, 214);
    ellipse(200, 355, 30, 40);

    fill(245, 219, 214);
    ellipse(395, 355, 30, 40);

    //neck
    fill(245, 219, 214);
    rect(270, 440, 60, 50);

    fill(245, 219, 214);
    ellipse(300, 490, 61, 47);

    //skin
    fill(252, 227, 222);
    rect(200, 270, 200, 80);

    fill(252, 227, 222);
    ellipse(300, 350, 200, 200);

    //hair
    translate (265,250);
    fill(21, 21, 53);
    rotate (2.65);
    ellipse (0, 0, 200, 110);
    rotate (-2.65);
  	translate (-265,-250);

    translate (373,280);
    fill(21, 21, 53);
    rotate (-2.1);
    ellipse (0, 0, 170, 70);
    rotate (2.1);
    translate (-373,-280);

    //eyebrows
    fill(34, 34, 86);
    ellipse(260, 320, 30, 5);

    fill(34, 34, 86);
    ellipse(335, 320, 30, 5);

    //eyes
    //white part
    fill(255,255,245);
    ellipse(260, 337, 17, 17);

    //iris
    fill(255,255,245);
    ellipse(335, 337, 17, 17);

    fill(0);
    ellipse(260, 340, 15, 15);

    fill(0);
    ellipse(335, 340, 15, 15);

    //nose
    fill(251,214,205);
    ellipse(300, 375, 20, 20);

    fill(251,214,205);
    ellipse(300, 375, 20, 20);

    //skin
    fill(252, 227, 222);
    ellipse(300, 370, 24, 20);

    //lips
    fill(248,136,119);
    ellipse(300, 406, 33, 20);

    fill(252, 227, 222);
    rect(283, 394, 60, 10);

    noLoop();
    }

I really enjoyed creating a self portrait despite it being my first time properly coding something. It was a challenge to create the shapes at first but after a while I gained more familiarity with coding shapes.

lee chu – project 01 – face

lrchu-face

// Lee Chu
// section c
// face-01


function setup() {
    createCanvas(600, 600);
    background(127);

    // blue ribbons
    fill('cyan');
    strokeWeight(0);
    rect(10, 0, 80, 600);
    rect(110, 0, 80, 600);
    rect(210, 0, 80, 600);
    rect(310, 0, 80, 600);
    rect(410, 0, 80, 600);
    rect(510, 0, 80, 600);

    // orange ribbons
    fill('orange');
    rect(0, 10, 600, 80);
    rect(0, 110, 600, 80);
    rect(0, 210, 600, 80);
    rect(0, 310, 600, 80);
    rect(0, 410, 600, 80);
    rect(0, 510, 600, 80);

    // cyan fillers
    fill('cyan');
    rect(110, 10, 80, 80);
    rect(310, 10, 80, 80);
    rect(510, 10, 80, 80);
    rect(10, 110, 80, 80);
    rect(210, 110, 80, 80);
    rect(410, 110, 80, 80);
    rect(110, 210, 80, 80);
    rect(310, 210, 80, 80);
    rect(510, 210, 80, 80);
    rect(10, 310, 80, 80);
    rect(210, 310, 80, 80);
    rect(410, 310, 80, 80);
    rect(110, 410, 80, 80);
    rect(310, 410, 80, 80);
    rect(510, 410, 80, 80);
    rect(10, 510, 80, 80);
    rect(210, 510, 80, 80);
    rect(410, 510, 80, 80);

    // circles
    fill('white');
    ellipse(0, 0, 20, 20);
    ellipse(100, 0, 20, 20);
    ellipse(200, 0, 20, 20);
    ellipse(300, 0, 20, 20);
    ellipse(400, 0, 20, 20);
    ellipse(500, 0, 20, 20);
    ellipse(600, 0, 20, 20);
    ellipse(0, 100, 20, 20);
    ellipse(100, 100, 20, 20);
    ellipse(200, 100, 20, 20);
    ellipse(300, 100, 20, 20);
    ellipse(400, 100, 20, 20);
    ellipse(500, 100, 20, 20);
    ellipse(600, 100, 20, 20);
    ellipse(0, 200, 20, 20);
    ellipse(100, 200, 20, 20);
    ellipse(200, 200, 20, 20);
    ellipse(300, 200, 20, 20);
    ellipse(400, 200, 20, 20);
    ellipse(500, 200, 20, 20);
    ellipse(600, 200, 20, 20);
    ellipse(0, 300, 20, 20);
    ellipse(100, 300, 20, 20);
    ellipse(200, 300, 20, 20);
    ellipse(300, 300, 20, 20);
    ellipse(400, 300, 20, 20);
    ellipse(500, 300, 20, 20);
    ellipse(600, 300, 20, 20);
    ellipse(0, 400, 20, 20);
    ellipse(100, 400, 20, 20);
    ellipse(200, 400, 20, 20);
    ellipse(300, 400, 20, 20);
    ellipse(400, 400, 20, 20);
    ellipse(500, 400, 20, 20);
    ellipse(600, 400, 20, 20);
    ellipse(0, 500, 20, 20);
    ellipse(100, 500, 20, 20);
    ellipse(200, 500, 20, 20);
    ellipse(300, 500, 20, 20);
    ellipse(400, 500, 20, 20);
    ellipse(500, 500, 20, 20);
    ellipse(600, 500, 20, 20);
    ellipse(0, 600, 20, 20);
    ellipse(100, 600, 20, 20);
    ellipse(200, 600, 20, 20);
    ellipse(300, 600, 20, 20);
    ellipse(400, 600, 20, 20);
    ellipse(500, 600, 20, 20);
    ellipse(600, 600, 20, 20);

    //dish
    fill(color(255, 255, 213));
    strokeWeight(1);
    ellipse(300, 420, 225, 60);
    noFill();
    strokeWeight(.5);
    ellipse(300, 420, 160, 35);
}

function draw() {
    // face
    strokeWeight(1);
    fill('white');
    ellipse(300, 300, 200, 250);
    
    // eyes
    fill('black');
    ellipse(260, 300, 15, 15);
    ellipse(340, 300, 15, 15);

    // eyebrows
    beginShape();
    vertex(270, 270);
    vertex(275, 280);
    vertex(250, 270);
    endShape();
    beginShape();
    vertex(330, 270);
    vertex(325, 280);
    vertex(350, 270);
    endShape();

    // mouth
    noFill();
    strokeWeight(2.5);
    arc(290, 310, 20, 20, 0, PI);
    arc(310, 310, 20, 20, 0, PI);

    // blush
    fill(color(255, 218, 255));
    strokeWeight(0);
    ellipse(360, 325, 40, 20);
    ellipse(240, 325, 40, 20);
}

egg

Jamie Park – Project – 01

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104        Section E         Project #1

function setup(){
    createCanvas(400,500);
    background(50,53,74);
    noStroke();

    fill(217,240,255);
    rect(100,360,200,170,50);

    fill(238,204,186);
    rect(177,300,50,100,50);
    fill(255,229,202);
    ellipse(200,230,200,230);
    fill(255,229,202);
    ellipse(105,265,25,40);
    ellipse(297,265,25,40);

    fill(57,24,9);
    arc(200, 230, 210, 232, PI, TWO_PI);
    ellipse(200,107,70,60);
    triangle(134,245,143,235,178,245);
    triangle(225,245,260,235,269,245);

    fill(247,215,216);
    ellipse(258,285,33,30);
    ellipse(143,285,33,30);

    fill(242,111,63);
    arc(200, 290, 70, 70, TWO_PI, PI);

    fill(250);
    ellipse(160,260,25,25);
    ellipse(240,260,25,25);
    fill(0);
    ellipse(160,260,15,15);
    ellipse(240,260,15,15);

    fill(36,201,152);
    rect(102,280,7,9,10);
    rect(292,280,7,9,10)
}

This was my first time creating a visual via coding, and it was so much harder than I anticipated. Although it would be lying to say that I was not frustrated with the process, I still had a lot of fun. I also got to appreciate the programmers of Photoshop and Illustrator.

Lauren Park-Project-01: Face

sketch

function setup() {
    createCanvas(400, 410);
    background(color(113,185,199));
  
  
    noStroke();
    fill(115, 222, 210);
    rect(0, 250, 400, 400);
  
    fill(207, 146, 39);
    ellipse(110, 380, 70, 30);//feet
    ellipse(270, 380, 70, 30);
  
  
    fill(255, 223, 62); //wings
    ellipse(50, 240, 60, 100);
  
  
    fill(255, 223, 62);
    ellipse(340, 240, 60, 100);

    fill(255, 235, 62);
    ellipse(195, 200, 300, 310);
  
    fill(250, 195, 31);
    ellipse(145, 162, 60, 50);
  
    fill(250, 195, 31);
    ellipse(240, 162, 60, 50);  
  
    ellipseMode(CORNER);
    fill(255);
    ellipse(115, 132, 60, 50);
  
    ellipseMode(CORNERS);
    fill(30);
    ellipse(130, 130, 165, 165);
 
    ellipseMode(RADIUS)
    fill(255);
    ellipse(240, 157, 30, 26);
  
    ellipseMode(CENTER);
    fill(30);
    ellipse(227, 155, 37, 37);
  
    fill(255);
    strokeWeight(4); 
    ellipse(237, 150, 10, 10);

    fill(255);
    ellipse(145, 135, 10, 10);
  
    fill(255, 140, 3);
    ellipse(190, 210, 90, 30);
  
    fill(255, 172, 202);//blush
    ellipse(280, 190, 20, 20);
 
    ellipse(110, 187, 20, 20);
  
    fill(255, 235, 208);
    ellipse(195, 310, 130, 90);
  
  
    fill(163, 207, 54);
    arc(72, 78, 70, 70, 0, HALF_PI);
    arc(95, 83, 70, 70, 0, HALF_PI);
    fill(163, 207, 54);
    arc(120, 86, 70, 70, 0, HALF_PI); 
    fill(163, 207, 54);
    arc(143, 89, 70, 70, 0, HALF_PI);
    arc(166, 89, 70, 70, 0, HALF_PI);
    arc(189, 89, 70, 70, 0, HALF_PI);
    arc(215, 86, 70, 70, 0, HALF_PI);
    arc(238, 86, 70, 70, 0, HALF_PI);
    arc(261, 83, 70, 70, 0, HALF_PI);
    arc(284, 78, 70, 70, 0, HALF_PI);
    arc(112, 80, 80, 80, PI, PI + QUARTER_PI);
    arc(280, 83, 80, 80, PI + QUARTER_PI, TWO_PI);
  
    arc(250, 85, 90, 90, PI + QUARTER_PI, TWO_PI);
    arc(250, 100, 100, 100, PI + QUARTER_PI, TWO_PI);
    arc(210, 95, 110, 110, PI + QUARTER_PI, TWO_PI);
    arc(227, 95, 110, 110, PI + QUARTER_PI, TWO_PI);
    arc(190, 95, 110, 110, PI + QUARTER_PI, TWO_PI);
    arc(170, 95, 110, 110, PI + QUARTER_PI, TWO_PI);
    arc(150, 95, 110, 110, PI + QUARTER_PI, TWO_PI);
    arc(130, 95, 110, 110, PI + QUARTER_PI, TWO_PI);
    arc(117, 95, 110, 110, PI + QUARTER_PI, TWO_PI);
  
    arc(85, 60, 70, 70, HALF_PI, PI);
    arc(99, 41, 77, 77, HALF_PI, PI);
    arc(103, 41, 77, 77, HALF_PI, PI);
    arc(277, 42, 77, 77, HALF_PI, PI);
    arc(75, 80, 50, 50, HALF_PI, PI);
  
    ellipse(330, 80, 70, 10);
  
    fill(207, 146, 39);
    rect(250, 335, 15, 50, 20);
    rect(120, 335, 15, 50, 20);
  

}

It was a challenge to try and create shapes for my piece and try to adjust their placements, while adding more color and different elements throughout the project. I created a duck face, which was inspired by the idea that people have certain expressions and behaviors that remind me of certain visual characteristics. And so for this project, by using different elements, I made a self-portrait of myself that I believe visually represented certain characteristics of my face when I make an expression.

Danny-Face


I tried to imitate a character called “Bao” from a short film with a lot of curve vertexes, and other elements. I also added an interactive feature to add to the cuteness.

Danny-Face


let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;



function setup() {
  createCanvas(400, 400);
  background(227, 114, 124);
}

function draw(){
	fill(177, 204, 234)
	strokeWeight(0)
	ellipse(200, 410, 460, 300)
	//body
	fill(248, 235, 230);
	strokeWeight(0);
	beginShape();
	curveVertex(200, 200);	//top
	curveVertex(200, 200);
	curveVertex(175, 230);
	curveVertex(150, 270); 	//left handle
	curveVertex(125, 280);
	curveVertex(120, 285);
	curveVertex(135, 300);
	curveVertex(160, 288);
	curveVertex(200, 290);	//lowest point
	curveVertex(240, 288);
	curveVertex(265, 300);
	curveVertex(280, 285);
	curveVertex(275, 280);
	curveVertex(250, 270);	//right handle
	curveVertex(225, 230);
	curveVertex(200, 200);
	curveVertex(200, 200);
	endShape();
	//face
	fill(248, 235, 230);
	strokeWeight(0);
	beginShape();
	curveVertex(200, 100);
	curveVertex(200, 100);
	curveVertex(180, 135);
	curveVertex(125, 170);
	curveVertex(120, 200);
	curveVertex(200, 220); //low tip
	curveVertex(280, 200);
	curveVertex(275, 170);
	curveVertex(220, 135);
	curveVertex(200, 100);
	curveVertex(200, 100);
	endShape();
	//left eye
	fill(40)
	circle(170, 175, 20)
	//left eye shine
	fill(248, 222, 126);
	strokeWeight(0);
	beginShape();
	curveVertex(180,175); //right point
	curveVertex(180,175);
	curveVertex(173,178);
	curveVertex(170,185); // lowest point
	curveVertex(167,178);
	curveVertex(160,175);
	curveVertex(167,172);
	curveVertex(170,165);
	curveVertex(173,172);
	curveVertex(180, 175);
	curveVertex(180, 175); //top point
	endShape();
	//right eye
	fill(40)
	circle(230, 175, 20)
	//right eye shine
	fill(248, 222, 126);
	strokeWeight(0);
	beginShape();
	curveVertex(240,175); //right point
	curveVertex(240,175);
	curveVertex(233,178);
	curveVertex(230,185); // lowest point
	curveVertex(227,178);
	curveVertex(220,175);
	curveVertex(227,172);
	curveVertex(230,165);
	curveVertex(233,172);
	curveVertex(240, 175);
	curveVertex(240, 175); //top point
	endShape();
	//mouth
	fill(248, 235, 230);
	strokeWeight(1);
	circle(192.5, 200, 15);
	fill(248, 235, 230);
	strokeWeight(1);
	circle(207.5, 200, 15);
	//coverup
	fill(248, 235, 230);
	strokeWeight(0);
	rect(170, 190, 60, 10);

	//blush
	fill(247, 134, 144)
	strokeWeight(0)
	circle(140, 190, 24)
	fill(247, 134, 144)
	strokeWeight(0)
	circle(260, 190, 24)

	//left arm
	fill(248, 235, 230);
	stroke(140)
	strokeWeight(1);
	beginShape();
	curveVertex(value1x, value1y);
	curveVertex(value1x, value1y);
	curveVertex(value2x, value2y);
	curveVertex(value3x, value3y);
	curveVertex(value3x, value3y);
	endShape();
	//right arm	fill(248, 235, 230);
	stroke(140)
	strokeWeight(1);
	beginShape();
	curveVertex(207, 250);
	curveVertex(207, 250);
	curveVertex(210, 265);
	curveVertex(213, 250);
	curveVertex(213, 250);
	endShape();
}

function mouseClicked() {
  if (value2y === 265) {
    value2y = 230;
  } else {
    value2y = 265;
  }
}

Monica Chang- Project 1 – Face

sketch

/* 
 * Monica Chang
 * Section E
 * mjchang@andrew.cmu.edu
 * Assignment 1 Self-Portrait
 */
 
function setup() {
	
    createCanvas(600, 600);
    background(220);
    //background
    fill("yellow");
    noStroke(0);
   	rect(0,0,600,600);

   	//hair
   	fill("brown")
   	rect(180,150,240,300)
   	//head	+ neck
   	fill("tan");
   	noStroke(0);
   	ellipse(300,200,200,210);

   	fill("tan");
   	rect(280,300,40,50)
   	//hat
   	fill("black");
   	quad(150,150,230,100,370,100,450,150);
   	fill("black");
   	rect(230,10,140,100);
   	//eyes
   	fill("black");
   	triangle(240,200,260,180,280,200);
   	fill("black");
   	triangle(320,200,340,180,360,200);

   	fill("white");
   	ellipse(260,200,10,10);
   	fill("white");
   	ellipse(340,200,10,10);
   	//nose
   	fill("brown");
   	ellipse(300,230,20,10);
   	//mouth
   	fill("pink");
   	stroke(10);
   	ellipse(300,275,40,30);
   	//blush
   	fill("orange")
   	noStroke(0);
   	ellipse(250,230,40,30);
   	fill("orange")
   	noStroke(0);
   	ellipse(350,230,40,30);
   	//shirt
   	fill("purple");
   	quad(0,600,140,350,470,350,600,600);
   	//vneck
   	fill("tan");
   	triangle(250,350,300,450,350,350);

}

function draw() {
}

I had fun playing around with the sizes and shapes that we were able to utilize in this project. As an artist, I also wanted to incorporate the color scheme I would always gravitate towards through the struggle of trying to calculate how the shapes would be computed. The face was what I had the most fun with as I tried to draw the famous “pikachu meme” I love very much onto my face. Also, I added a bucket hat I have been wearing recently.

Angela Lee – Project 01 – Face

angela-face

/* 
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Assignment 1 Self-Portrait
 */


function setup(){
    createCanvas (600, 600);
    background (249, 217, 217);
    noStroke();
    
    // hair behind the shoulders
    fill (40, 27, 5);
    rect (129, 216, 325, 361);

    // shirt
    fill (239, 223, 223);
    ellipse (287.5, 652, 413, 342);

    // hair at the top of the head
    fill (40, 27, 5);
    ellipse (290.5, 235, 329, 342);

    // neck
    fill (206, 162, 132);
    rect (215, 365, 151, 128);
    ellipse (144.864, 293.5, 46.271, 79);

    // left hoop earring
    noFill();
    stroke (186, 146, 56);
    strokeWeight (12);
    ellipse (144.5, 347.5, 51, 51);

    // left earing stud
    noStroke();
    fill (216, 176, 97);
    ellipse (144.5, 314.5, 13, 13);

    // right hoop earring
    noFill();
    stroke (186, 146, 56);
    strokeWeight (12);
    ellipse (423.5, 353.5, 51, 51);

    // face
    noStroke();
    fill (224, 186, 153);
    ellipse (291.5, 280.5, 295, 333);

    // right eye
    fill ("black")
    ellipse (362.571, 284.571, 33.143, 33.143);
    triangle (378, 278.286, 363.143, 268, 386, 268);

    // right eyebrow
    rectMode (CENTER);
    translate (351.346, 237.903);
    rotate (6.21);
    fill (58, 45, 32);
    rect (0, 0, 53, 9);
    rotate (-6.21);
    translate (-351.346, -237.903);

    // hair surrounding the upper left area of the face
    translate (202.207, 163.026);
    fill (40, 27, 5);
    rotate (2.4);
    ellipse (0, 0, 176.657, 32.935);
    rotate (-2.4);
    translate (-202.207, -163.026);

    // hair on the right area of the face
    quad (256.801, 118.331, 454, 365, 453, 206, 335, 85);

    // left eye
    fill ("black")
    ellipse (217.429, 280.571, 33.143, 33.143);
    triangle (202, 274.286, 216.857, 264, 194, 264);

    // left eyebrow
    rectMode (CENTER);
    translate (220.483, 237.903);
    rotate (-6.21);
    fill (58, 45, 32);
    rect (0, 0, 53, 9);
    rotate (6.21);
    translate (-220.483, -237.903);
    triangle (194.364, 231.555, 196.263, 240.371, 172.596, 244.129);

    // nose
    fill (214, 171, 139);
    triangle (288.7, 278, 306, 341.9, 271.4, 341.9);
    ellipse (288.692, 343.42, 34.615, 19.16);

    // mouth
    rectMode (CORNER);
    fill (124, 53, 53);
    ellipse (288.762, 384, 67.524, 42);
    fill (224, 186, 153);
    rect (246, 360, 89, 21);

    // hair in front of the shoulders
    fill (40, 27, 5);
    rect (129, 432, 86, 200);

    // rounded collar of the shirt
    fill (206, 162, 132);
    ellipse (290.5, 493, 151, 80);
}

I really enjoyed playing with some of the details in this self-portrait; for example, I always put half of my hair in front of my shoulders and the other half behind my back. While the process was a bit tedious because I had some coding errors, doing it one shape at a time definitely allowed me to fix those mistakes efficiently.

Joanne Chui – Project 01 – Face

selfportrait

// Joanne Chui
// Section C
// jchui1@andrew.cmu.edu
// Assignment-01

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

function draw() {

	//BACK HAIR
	fill(0);
	rect(250, 225, 100, 220);

	//NECK
	fill(190, 150, 90);
	rect(270, 350, 60, 40);
	fill(0);
	ellipse(270, 370, 10, 50);
	ellipse(330, 370, 10, 50);
	ellipse(280, 410, 20, 10);

	//FACE
	fill(226, 183, 108);
	stroke(226, 183, 108);
	ellipse(300, 295, 115, 130);

	//MOUTH
	fill("white");
	stroke(164, 110, 97);
	arc(300, 332, 30, 15, 0, PI, CHORD);

	//EYES
	//left
	fill("white");
	stroke("white");
	arc(274, 285, 20, 6, 0, PI, CHORD);
	stroke("black");
	arc(274, 285, 20, 12, PI, PI + PI, OPEN);
	fill(64, 40, 34);
	ellipse(274, 283.5, 9, 9);
	fill(0);
	ellipse(274, 283.5, 5, 5);
	//right
	fill("white");
	stroke("white");
	arc(326, 285, 20, 6, 0, PI, CHORD);
	stroke("black");
	arc(326, 285, 20, 12, PI, PI + PI, OPEN);
	fill(64, 40, 34);
	ellipse(326, 283.5, 9, 9);
	fill(0);
	ellipse(326, 283.5, 5, 5);

	//NOSE
	stroke(200, 145, 90);
	fill(226, 183, 108);
	arc(300, 315, 15, 8, 0, PI, OPEN);
	arc(290, 300, 15, 40, TWO_PI - QUARTER_PI, QUARTER_PI, OPEN);

	//EYEBROWS
	//left
	fill(0);
	arc(276, 272, 40, 15, PI, TWO_PI - QUARTER_PI, OPEN);
	//right
	arc(319, 274, 50, 18, PI + QUARTER_PI, TWO_PI, OPEN);

	//SHIRT
	fill(255, 204, 229);
	stroke(255, 204, 229);
	arc(300, 450, 200, 140, PI, 0, CHORD);
	fill(190, 150, 90); //neck
	stroke(190, 150, 90);
	ellipse(300, 380, 49, 30);

	//HAIR
	fill(0);
	stroke(0);
	arc(290, 255, 120, 100, PI, TWO_PI - QUARTER_PI, CHORD); //left part
	arc(325, 255, 75, 80, PI + QUARTER_PI, TWO_PI, CHORD); //right part
	arc(253, 345, 70, 230, HALF_PI, PI + HALF_PI, CHORD);
	arc(347, 345, 50, 230, PI + HALF_PI, HALF_PI, CHORD);





}

While creating my self portrait, I wanted to avoid making the face look really geometric. The flexibility of the arc function allowed me to achieve that.

Caroline Song – Project 01-Face

sketch

/* Caroline Song
    chsong@andrew.cmu.edu
    Section E
    Assignment 1
    */

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

function draw(){
    background(235,194,237); // background lilac
    //hair
    fill("black");
    rect(185,210,230,250); 
    ellipse(300,210,232,250);

    //face and body
    fill(255, 219, 172); // skin tone color
    rect(253,350,90,45); // neck
    ellipse(300,250,205,250); // face
    
    //shirt
    fill(135,206,250); // makes cardigan blue
    quad(165,396, 435, 396, 550, 600, 50, 600);
    fill("white");
    rect(200,395.5,200,254); // shirt

    //eyes
    ellipse(350,250,55,40); //eyes
    ellipse(250,250,55,40);
    fill("black");
    ellipse(350,255,30,30); // pupils
    ellipse(250,255,30,30);
    fill("white")
    ellipse(350,260,10,10); //pupils highlight
    ellipse(250,260,10,10);

    //eyebrows
    fill("black")
    rect(320,210,55,5);
    rect(220,210,55,5);

    //nose
    fill(241, 194, 125);
    triangle(287, 300, 300, 275, 312, 300);

    //mouth
    ellipse(300,335,30,15);

}

The hardest part of the assignment for me was realizing that I would not be able to make the self-portrait as detailed as I would like, simply because I do not have the tools or the means yet to do so. However, this first project was very interesting in terms of being able to see what I was able to create with my limited knowledge.

Sean Meng-project-01-Face


hmeng-project 1

When I draw myself I found it very interesting to represent my own features such as hairstyle and glasses using abstract geometries and shapes. And drawing using coding is a brand new workflow that requires a different logic from drawing with hands.

//Sean(Han) Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-01-self portrait

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

function draw() {   
//BackGround
    stroke(229, 172, 211);
    strokeWeight(1);
    point(0, 300);
    point(250, 250);
    point(600, 450);

    noFill();
    strokeWeight(30);
    beginShape();
    vertex(0, 300);
    quadraticVertex(250, 250, 600, 450);
    endShape();

    stroke(89, 0, 89);
    strokeWeight(1);
    point(0, 500);
    point(300, 400);
    point(620, 100);

    noFill();
    strokeWeight(18);
    beginShape();
    vertex(0, 500);
    quadraticVertex(300, 400, 620, 100);
    endShape();

    stroke(255, 235, 50);
    strokeWeight(1);
    point(0, 360);
    point(300, 400);
    point(620, 600);

    noFill();
    strokeWeight(20);
    beginShape();
    vertex(0, 360);
    quadraticVertex(300, 400, 620, 600);
    endShape();

//Body
    stroke(0, 0, 103);
    fill(0, 0, 73);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(165, 365);
    vertex(140, 400);
    vertex(130, 600);
    vertex(450, 600);
    vertex(423, 400);
    vertex(380, 365);
    endShape();  

//Hoodie
    stroke(150);
    fill(150);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(205, 295); 
    vertex(175, 330); 
    vertex(260, 370);
    vertex(270, 370);
    vertex(290, 370);
    vertex(385, 330);
    vertex(350, 295);
    endShape(); 

//Neck
    stroke(230,214,169);
    fill(230,214,169);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(250, 330); 
    vertex(245, 370); 
    vertex(310, 370);
    vertex(305, 330);
    endShape();  

//Hoodie out
    stroke(210);
    fill(210);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(270, 360);
    vertex(175, 330); 
    vertex(165, 365); 
    vertex(272, 370)
    endShape();  

    stroke(210);
    fill(210);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(385, 330);
    vertex(300, 355);
    vertex(295, 370);
    vertex(390, 370);
    vertex(385, 330);
    endShape(); 

 //Left Ear
    stroke(240,224,179);
    fill(240,224,179);
    strokeWeight(1);
    strokeJoin(ROUND);
    beginShape();
    vertex(200, 240);
    vertex(187, 240);
    vertex(180, 260);
    vertex(200, 290);
    vertex(215, 300);
    vertex(215, 260);
    endShape();

//Right Ear
    stroke(240,224,179);
    fill(240,224,179);
    strokeWeight(1);
    strokeJoin(ROUND);
    beginShape();
    vertex(360, 240);
    vertex(364, 240);
    vertex(370, 260);
    vertex(350, 290);
    vertex(345, 300);
    vertex(215, 260);
    endShape();

 //Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(215, 270); 
    vertex(215, 310);  
    vertex(250, 335);  
    vertex(267, 342); 
    vertex(290, 345);
    vertex(337, 298); 
    vertex(337, 225);   
    vertex(215, 225); 
    endShape();

 //Hair
    stroke(0);
    fill(0);
    strokeWeight(4);
    strokeJoin(ROUND);
    beginShape();
    vertex(202.5, 262.5);
    vertex(187.5, 220);
    vertex(200, 150);
    vertex(270, 127.5);
    vertex(337.5, 150);
    vertex(360, 202.5);
    vertex(348, 263.25);
    vertex(342, 265.25);
    vertex(337.5, 225);
    vertex(318, 231);
    vertex(300, 225);
    vertex(275, 235);
    vertex(260, 230);
    vertex(250, 235);
    vertex(217, 230);
    vertex(215, 270);
    vertex(202.5, 262.5);
    endShape();

//Glasses
    strokeWeight(3);
    fill(255);
    arc(245, 265, 42, 37, 0, PI + PI);
    strokeWeight(3);
    fill(255);
    arc(305, 265, 42, 37, 0, PI + PI);
    stroke(150);
    curve(266, 263, 266, 260, 280, 260, 300, 263);
    stroke(0);
    line(215, 260, 225, 260);
    line(325, 260, 339, 260);

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

//Mouth
    noStroke();
    fill(240,214,159);
    triangle(260, 325, 293, 325, 270, 320);


//Arms
    stroke(50, 50, 150);
    strokeWeight(3);
    line(175, 440, 170, 600);
    line(390, 440, 410, 600);

//Strings
    fill(255);
    stroke(255);
    strokeWeight(1);
    rect(260, 370, 1, 80);
    rect(300, 370, 1, 75);
    rect(259, 450, 4, 15);
    rect(299, 445, 4, 15);
//graphic
    fill(230);
    strokeWeight(5);
    stroke(10, 60, 130);
    circle(345, 460, 40);

}