Category: Project-01-Face

Shannon Ha-Project 01-Face

Project 01-Self Portrait

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 01: Self-Portrait

function setup() {
    createCanvas(600, 600);
    background(209,177,212);

}

  function draw() {
    //hair
    fill('black');
    noStroke();
    ellipse(304,238,330,297);

    fill('black');
    noStroke();
    rect(139,225,330,252);

    //Neck
    fill(193,147,101);
    noStroke();
    rect(275,395,58,54);
    ellipse(304,450,57,22);

    //face
    fill(219,173,125);
    noStroke();
    ellipse(304,256,231,288);

    //brows
    fill('black');
    noStroke();
    quad(274,213,224,216,240,207,274,204);
    quad(330,203,362,205,380,215,331,212);

    //eyes
    fill('black');
    noStroke();
    ellipse(253,254,27,14);
    ellipse(350,254,27,14);

    fill(219,173,125);
    noStroke();
    ellipse(352,259,12,8);
    ellipse(255,259,12,8);

    //glasses
    stroke(247,207,45);
    strokeWeight(3);
    noFill();
    ellipse(249,254,68,68);
    ellipse(353,254,68,68);
    arc(301,265,39,39,PI,TWO_PI);

    //nose
    fill(175,137,88);
    noStroke();
    ellipse(304,310,31,14);
    fill(219,173,125);
    ellipse(304,305,26,14);

    //mouth
    fill(137,69,70);
    noStroke();
    ellipse(303,347,60,32);
    fill(219,173,125);
    ellipse(303,338,67,19);

    //earrings
    stroke(128,130,133);
    strokeWeight(5);
    noFill();
    ellipse(189,301,16,27);
    ellipse(417,309,16,27);

    //clothing
    fill(182,122,43);
    noStroke();
    rect(275,448,58,49);
    triangle(172,497,275,448,275,497);
    triangle(432,497,333,497,333,448);
    triangle(172,497,172,600,143,600);
    triangle(432,497,432,600,463,600);
    rect(172,497,260,121);

    //clothing shade
    fill(153,101,39);
    noStroke();
    triangle(230,533,230,600,215,600);
    triangle(379,533,379,600,394,600);

    fill(193,147,101);
    noStroke();
    ellipse(304,450,57,22);

    //front hair
    fill('black');
    noStroke();
    arc(219,117,160,119,270,360);
    arc(393,117,190,119,-275,-380);

  }

I started out by hand drawing the self-portrait I would like to create using basic shapes that could easily be found using the 2D primitive shapes. I then translated my drawing into illustrator, and added color and line weight in doing so. Planning the drawing in illustrator helped me efficiently locate the coordinates needed for some commands which was very useful when it came to drawing the shapes. I tried exploring more complex shapes by using the ‘arc’ command, even though it was used in my code, a lot of the point plotting was done through trial and error as I still don’t really understand how the function works. Overall it’s been an eye-opening experience for something I have never done before!

Gretchen Kupferschmid-Face-Project 01

I was inspired by illustrative print art that is simplistic in its style, yet also has a fashion/editorial style to it. In the piece, instead of creating parts of my face with just shapes, I used the shapes to foster an illustrative aspect to “draw” features with multiple smaller shapes overlapped and next to each other.

sketch

function setup() {
    createCanvas(315.118,312.695);
}
 function draw (){
//background design
    fill (249,217,237);
    noStroke();
    triangle(0,0,0,312.69,312.69,0);
    fill(224,175,206);
    noStroke();
    triangle(0,312.69,312.69,0,312.69,312.69);
    //hair
    fill(114,89,56);
    noStroke();
    ellipse(145.623,158.176,114.047,153.626);
    fill(114,89,56);
    noStroke();
    ellipse(168.704,159.258,114.047,153.626);
    fill(114,89,56);
    noStroke();
    ellipse(200.801,214.075,57.429,104.974);
    fill(114,89,56);
    noStroke();
    ellipse(113.627,212.272,53.319,104.974);
    fill(114,89,56);
    noStroke();
    rect(94.643,230.531,37.243,46.651);
    fill(114,89,56);
    noStroke();
    rect(180.327,231.17,40.114,46.651);
    //shirt
    noStroke();
    fill(191,157,90);
    arc(154.92,318.69,241.767,104.508,PI, TWO_PI);
    //neck
    fill(168,139,108);
    noStroke();
    ellipse(157.75,268.37,66.643,18.908);
    fill(168,139,108);
    noStroke();
    rect(124.169,209.923,67.155,58.445);
    //face
    fill(193,162,122);
    noStroke(); 
    ellipse(156.229,146.79,102.858,86.443);
    fill(193,162,122);
    noStroke();
    ellipse(155.864,170.581,103.955,133.584);
    fill(193,162,122);
    noStroke();
    ellipse(157.71,179.004,103.955,144.584);
    //eyebrows
    fill(96,70,43);
    noStroke();
    triangle(116.86,146.91,122.06,141.19,127.87,142.37);
    fill(96,70,43);
    noStroke();
    rect(121.363,140.923,13.053,1.699);
    fill(96,70,43);
    noStroke();
    triangle(122,141.19,127.48,138.1,136.36,140.13);
    fill(96,70,43);
    noStroke();
    ellipse(131.298,141.25,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(135.577,141.944,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(139.69,142.31,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(144.87,143.05,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(171.67,144.05,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(175.051,143.135,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(178.779,142.603,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(183.196,141.988,10.35,3.468);
    fill(96,70,43);
    noStroke();
    rect(179.29,141.656,12.702,1.699);
    fill(96,70,43);
    noStroke();
    triangle(178.11,140.86,187.01,138.84,192.35,141.92);
    fill(96,70,43);
    noStroke();
    triangle(186.64,143.11,192.29,141.92,197.35,147.64);
    //eyes
    fill(0);
    noStroke();
    ellipse(131.283,156.773,25.879,12.286);
    fill(193,162,122);
    noStroke();
    ellipse(131.34,154.69,27.329,11.923);
    fill(0);
    noStroke();
    ellipse(181.203,158.605,25.879,12.286);
    fill(193,162,122);
    noStroke();
    ellipse(181.23,156.36,27.329,11.923);
    //nose
    fill(168,139,108);
    noStroke();
    triangle(147.52,185.12,157.75,140.08,167.97,185.12);
    fill(168,139,108);
    noStroke();
    ellipse(157.729,185.246,20.456,17.444);
    fill(193,162,122);
    noStroke();
    triangle(144.28,180.48,154.51,135.45,164.74,180.48);
    fill(193,162,122);
    noStroke();
    ellipse(156.66,183.98,22.698,16.009);
    fill(142,117,95);
    noStroke();
    ellipse(153.31,192.49,3.852,1.86);
    fill(142,117,95);
    noStroke();
    ellipse(160.7,192.49,3.852,1.86);
    //lips
    fill(155,101,104);
    noStroke();
    triangle(132.92,211.95,154.3,204.4,156.38,210.67);
    fill(155,101,104);
    noStroke();
    ellipse(155.988,207.234,8.63,6.824);
    fill(155,101,104);
    noStroke();
    ellipse(160.71,207.06,8.116,7.106);
    fill(155,101,104);
    noStroke();
    triangle(162.85,204.07,161.57,210.53,176.71,212.59);
    fill(155,101,104);
    noStroke();
    triangle(132.92,212.24,145.16,218.32,151.58,214.25);
    fill(155,101,104);
    noStroke();
    ellipse(158.229,217.127,28.404,6.484);
    fill(155,101,104);
    noStroke();
    ellipse(158.64,218.32,22.805,7.554);
    fill(155,101,104);
    noStroke();
    triangle(164.13,214.11,171.94,218.32,176.71,212.85);
    //ears
    fill(193,162,122);
    noStroke();
    ellipse(212.341,167.176,14.55,35.307);
    fill(193,162,122);
    noStroke();
    ellipse(214.46,181.4,8.049,10.859);
    fill(193,162,122);
    noStroke();
    ellipse(100.61,167.33,12.812,31.732);
    fill(193,162,122);
    noStroke();
    ellipse(101.40,181.523,8.21,10.859);
    //earrings
    fill(255);
    noStroke();
    ellipse(101.40,185.12,5.534,5.534);
    fill(255);
    noStroke();
    ellipse(215.46,185.12,5.534,5.534);
    stroke(255);
    strokeWeight(4);
    noFill();
    rect(94.694,188.49,12.266,17.568);
    stroke(255);
    strokeWeight(4);
    noFill();
    rect(209.327,189.49,12.266,17.568);
     
     
 }

Mihika Bansal-Project 01- Face

sketch

function setup() {
    createCanvas(645, 800);
    background(214, 214, 245); 
  }

function draw() {
    
    //hair 
    fill("black"); 
    arc(300, 350, 300, 550, 0, PI,OPEN);
  
    //neck
    fill(111, 111, 220)
    fill(210, 166, 121); 
    rect(245, 420, 110, 80);
    arc(300, 500, 110, 45, 0, PI,OPEN);
    

    //hair behind ear
    fill("black");
    arc(410, 375, 120, 450, 3*PI/2, PI/2);
    arc(190, 375, 120, 450, PI/2, 3*PI/2); 
	
    //face and ears 
    fill(210, 166, 121); 
    ellipse (300, 300, 250, 300);
    arc(435, 320, 30, 50, 3*PI/2, PI/2);
    arc(166, 320, 30, 50, PI/2, 3*PI/2);

    //eyebrows + eyes
    fill("black");
    rect(227, 275, 42, 7); 
    rect(330, 275, 42, 7); 
    ellipse(250, 305, 40, 25); 
    ellipse(350, 305, 40, 25);
    triangle(228, 276, 218, 283, 228, 282);
    triangle(373, 276, 383, 283, 373, 282); 

    fill("white"); 
    ellipse(255, 300, 15, 15);
    ellipse(347, 300, 15, 15);

    //earrings 
    fill(230, 211, 152); 
    ellipse(438, 337, 10, 10);
    ellipse(164, 337, 10, 10);
    fill(112, 112, 219);
    rect(432, 343, 7, 55);
    rect(160, 343, 7, 55);
     
    //hair
    fill("black");
    arc(300, 235, 300, 300, PI-0.40, QUARTER_PI-0.45 , PIE);
    rect(425, 300, 9, 150);
    
    //nose 
    fill(204, 153, 102); 
    strokeWeight(0);
    rect(295, 300, 14, 45); 
    ellipse(302, 350, 28, 13);
    stroke("black");
    strokeWeight(1);

    //lips 
    fill(123, 30, 30); 
    arc(300, 398, 50, 25, 0, PI,OPEN);
    arc(300, 397, 45, 15, PI, 0,OPEN);












    
   
   
}

It was interesting trying to simplify my face using simple graphic shapes. This project was helpful in solidifying my understanding of basic drawing functions in coding, and overall a very enjoyable process.

Taisei Manheim – Project 01 – Face

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-01

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

function draw() {
    background('pink');

    stroke('black');
    fill('tan')
    rect(270, 270, 60, 60)
    //neck

    fill('tan');
    ellipse(300, 200, 150, 200);
    //head

    fill('black');
    rect(270, 500, 20, 80)
    rect(310, 500, 20, 80)
    //legs

    fill('black');
    ellipse(300, 420, mouseX, 200);
    ellipse(300, 420, 150, 200);
    //body

    fill('tan');
    curve(260, 240, 280, 260, 320, 260, 340, 240);
    //mouth

    fill('black');
    triangle(290, 240, 300, 200, 310, 240);
    fill('tan');
    noStroke();
    triangle(292, 238, 302, 198, 310, 238);
    //nose

    fill('white');
    arc(270, 190, 25, 10, 0, PI, CHORD);
    arc(270, 192, 25, 10, PI, PI + PI, OPEN);
    arc(330, 190, 25, 10, 0, PI);
    arc(330, 192, 25, 10, PI, PI + PI, OPEN);
    //eyes

    fill('black');
    ellipse(270, 191, 8, 8)
    ellipse(330, 191, 8, 8)
    //pupils

    fill('black');
    rect(255, 165, 30, 8);
    rect(315, 165, 30, 8);

    fill ('black');
    translate (285, 140);
    rotate (2.8);
    arc(0, 0, 120, 70, 0, PI, CHORD);
    arc(0, 2, 120, 30, PI, PI + PI, OPEN);
    //left hair

    rotate (4.2);
    translate(37,-35)
    arc(0, 0, 80, 10, 0, PI, CHORD);
    arc(0, 2, 80, 50, PI, PI + PI, OPEN);
    //right hair
}

With this project I wanted to use a variety of shapes and commands such as rectangles, ellipses, arcs, curves, and triangles in order to get myself used to coding. It was interesting thinking about myself solely based on simple geometries and I created a moving image to depict how I imagine myself changing over the course of my life.

Alice Cai_Project01_Face


sketch

function setup() {
 createCanvas(600, 600);
 background("white");

}

function draw() {
	fill("tan");
	ellipse(300,300,280,350);

	fill("black");
	arc(300, 230, 283, 280, PI, TWO_PI);

	fill("black");
	rect(160,200,30,300);

	fill("black");
	rect(410,200,30,300);
	
	fill("black");
	rect(225,250,40,10);

	fill("black");
	rect(330,250,40,10);

	fill("black");
	ellipse(250,300,30,20);

	fill("black");
	ellipse(350,300,30,20);

	fill("white");
	ellipse(255,295,10,10);

	fill("white");
	ellipse(355,295,10,10);
	

	//fill("pink");
	//rect(250,400,100,10);

	fill("black");
	ellipse(300,80,100,100);

	fill("pink");
	ellipse(300,405,100,40);

	fill("tan");
	strokeWeight(0);
	ellipse(300,395,140,35);

	fill("pink");
	ellipse(240,335,50,20);

	fill("pink");
	ellipse(360,335,50,20);
	//arc(300, 400, 283, 280, -PI, TWO_PI);

	fill("tan");
	strokeWeight(1);
	triangle(300, 380, 300, 270, 330, 380);


	fill("black");
	arc(300, 620, 283, 280, PI, TWO_PI);



}

Ellan Suder-Project01-Face

I had a bit of trouble sorting out which values corresponded with which points, especially with the quadrilaterals, but I eventually worked it out!

ellansuderface

function setup() {
    createCanvas(500, 500);
	background(93, 203, 255);

    stroke(250, 50, 56); 
    strokeWeight(20);
    line(60, 360, 67, 345); //thumb
    line(160, 475, 40, 340); //leftarm
    line(450, 360, 435, 345); //thumb
    line(440, 475, 460, 340); //rightarm

    stroke(0, 0, 255)//flag
    strokeWeight(5)   
    line(60,420,60,70)
    fill(255);
    rect(60, 70, 400, 100, 20);

    noStroke(); //face
    fill(250, 50, 56); 
    ellipse(250,350,200,170);

    let s = 'hello! nice to meet you.';
    fill(255, 0, 10);
    textSize(35)
    text(s, 80, 85, 400, 100)
  
    noStroke(); //face
    fill(250, 41, 56); 
    ellipse(300,500,300,260);

    stroke(255, 0, 10); //nose
    strokeWeight(5);
    fill(0, 240, 205); 
    triangle(40+270, 75+300, 58+270, 20+300, 86+270, 65+300);

    fill(0, 255, 0); //eyebrows
    quad(38+180, 31+240, 86+180, 20+240, 90+180, 40+240, 30+180, 76+240);
    fill(0, 255, 0); 
    quad(38+270, 21+240, 86+270, 20+240, 90+270, 40+240, 20+270, 30+240);

	stroke(0, 0, 255); //left eye
	strokeWeight(5);
	fill(255);
    ellipse(250, 340, 30, 50);  

    stroke(10, 10, 255); //right eye
    strokeWeight(5);
    fill(255);
    ellipse(300, 340, 50, 30);  

    arc(300, 400, 60, 20, 0, PI + QUARTER_PI, PIE); //mouth
    strokeWeight(5);
    fill(255);
    ellipse(300, 340, 50, 30);  
}

function draw() {
}

Mari Kubota- Project 01- Face

In this project I learned shape commands to draw ellipses, triangles, rectangles, lines, and quads. Being organized was important in this project because of the many shapes and the affect the order of the code had on the result.

sketch

function setup() {
    createCanvas (400,400);
    background (255,234,242);

//body
      fill(225,184,123);
      noStroke();
    ellipse (200,400,150,300);
//head
        fill (255);
        noStroke();
    ellipse (200,200,150,170);
//hair bun
        fill (87, 79, 56);
        noStroke();
    ellipse (200,125, 125,45);
//blush
        fill (218,97,139);
        noStroke();
    ellipse (160,225,30,20);
    ellipse (240,225,30,20);
//eyes
        fill (0);
    ellipse (170, 205, 20,20);
    ellipse (230, 205, 20,20);
//mouth
        stroke(0);
        strokeWeight(4);
    line(185,250,215,250);
//eyebrows
        fill(0);
    triangle (185, 180, 160, 175, 155, 180);
    triangle (245, 180, 240, 175, 215, 180);
//hair
        noStroke ();
        fill (87, 79, 56);
    quad(137, 125, 186, 120, 140, 250, 100, 276);
    quad(186, 120, 262, 120, 269, 163, 230, 176);
    quad(220, 150, 269, 163, 290, 280, 260, 250);
    quad(260, 245, 290, 280, 240, 320, 230, 300);
    quad(135, 243, 100, 276, 160, 320, 170, 300);
    ellipse(200,90,55,55);
//ribbon
        noStroke ();
        fill (255,0,0);
    quad(220,85,220,115,180,85,180,115);
        stroke(0);
        strokeWeight(1);
    ellipse(200,100,10,10);
        
  }

Nadia Susanto – Project-01-Face

This was a challenging first project as I didn’t familiarize myself with all the attributes and primitives, but it was fun experimenting with it. There were a lot of times where I was confused with the coordinates, but I just had to keep testing it until the shapes were all in the right place.

sketch

/*  Nadia Susanto
	Section B
	nsusanto@andrew.cmu.edu
	Project-01: Self-Portrait (Face) */


function setup() {
    createCanvas(600, 600);
    background(0, 146, 150);
    noStroke();
}

function draw() {
//hair
	fill("black");
	ellipse(300, 200, 170, 170);
	ellipse(320, 120, 100, 100);
//ears
	stroke(50);
	fill(235, 160, 130);
	//left
	ellipse(155, 320, 50, 100);
	//right
	ellipse(445, 320, 50, 100);
//earrings
	fill(192, 192, 192);
	//left
	circle(145, 355, 10, 10);
	//right
	circle(455, 355, 10, 10);
//face color
	fill(245, 175, 130);
//neck
	rect(260, 450, 80, 175, 20);
//face
	ellipse(300, 350, 300, 350);
//eyes
	noStroke();
	fill("white");
	//left
	ellipse(230, 300, 50, 75);
	//right
	ellipse(370, 300, 50, 75);
//pupils	
	fill("black");
	//left
	ellipse(235, 300, 20, 20);
	//right
	ellipse(365, 300, 20, 20);
//nose
	noStroke();
	fill(235, 160, 130);
	triangle(275, 400, 300, 350, 325, 400);
	ellipse(300, 400, 50, 25);
//mouth
	fill("black");
	arc(300, 430, 100, 100, 0, 90, OPEN);
//eyebrows
	//left
	rect(205, 235, 50, 10, 20);
	//right
	rect(345, 235, 50, 10, 20);
//blush
	fill(250, 190, 200);
	circle(215, 420, 50, 50);
	circle(390, 420, 50, 50);
}

Charmaine Qiu – Project 01 – Face


sketch

Creating an illustration for the first time through coding was an unique experience.

  /*
  Charmaine Qiu
  Section E
  charmaiq@andrew.cmu.edu
  Assignment 1 Self-portrait
  */


function setup() {
    createCanvas(300, 300);
    background(42, 57, 98);

//hair
    fill(47, 20, 20);
    noStroke();
    ellipse(150, 100, 170, 170);
    rect(65, 110, 169, 90);

//shirt
    fill(163, 144, 202);
    noStroke();
    ellipse(150, 305, 175, 150);

//face
    fill(255, 222, 222);
    noStroke();
    ellipse(150, 130, 130, 170);
    rect(135, 200, 30, 30);
    ellipse(100, 140, 50, 50);
    arc(150, 230, 30, 30, 0, PI, OPEN);
    ellipse(210, 290, 45, 45);
    
//Bangs
    fill(47, 20, 20);
    arc(185, 70, 120, 100, QUARTER_PI, PI + QUARTER_PI, OPEN);
    bezier(140, 40, 160, 30, 200, 30, 220, 137);

//features
    fill(0);
    arc(120, 130, 12, 12, 0, PI, OPEN);
    arc(180, 130, 12, 12, 0, PI, OPEN);
    arc(150, 170, 40, 40, 0, PI, OPEN);
    stroke(90);
    strokeWeight(4);
    line(115, 100, 125, 100);

    fill(255, 153, 153);
    noStroke();
    triangle(150, 140, 155, 150, 145, 150);
    ellipse(110, 160, 30, 30);
    ellipse(190, 160, 30, 30);
    arc(150, 185, 20, 20, PI, 0, OPEN);
    fill(150);
    rect(80, 150, 5, 13);

//hand
    stroke(255, 222, 222);
    strokeWeight(10);
    line(200, 250, 205, 270);
    line(220, 250, 215, 270);

}

Xu Xu – Project 01 – Face

I was inspired by the de Stijl art style prior to coding this self portrait, so I incorporated the abstract, geometrical style into my work. I used various rectangles and ellipses to represent my facial features (such as my glasses and mole), and I also used arcs for my face shape and hair shape. It was hard for me to “paint” certain areas in one go, so I had to divide them into small pieces of geometries.

sketch

/*
Xu Xu
Section B
xux1@andrew.cmu.edu
Project-01
*/

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

function draw() {
//faceshape
    fill(239,239,239)
    noStroke();
    rect(0,0,300,800);
    fill("black")
    noStroke();
    rect(300,0,300,800);
//hair
    fill(50,0,1)
    arc(300,250,420,420,600,0);
    fill(50,0,1)
    noStroke();
    rect(90,250,220,150);
    fill(50,0,1)
    rect(90,500,220,300);
    fill(350,81,58)
    noStroke();
    rect(300,250,210,400);
    fill(350,81,58)
    rect(300,700,210,100);
//neck
    fill(95,26,55)
    rect(300,250,80,550);
    fill(89,248,232)
    rect(220,250,80,550);
//face
    fill(231,29,54)
    ellipse(300,250,350,350);
    fill(55,63,81)
    noStroke();
    arc(300,250,350,350,0,PI + QUARTER_PI + QUARTER_PI);
    fill(89,248,232)
    arc(300,250,350,650,0,PI);
    fill(210,207,218)
    arc(300,280,350,630,0,PI);
    fill("grey")
    rect(320,280,155,10);
    fill("white")
    rect(100,250,200,5);
    fill(252,220,77)
    rect(110,255,190,200);
//eyes
    fill("white")
    arc(400,280,150,20,0,PI);
    fill("black")
    ellipse(430,300,7,7);
    fill("black")
    rect(410,280,10,10);
//mouth
    fill("red")
    rect(260,510,80,10);
    fill(2199,129,175)
    arc(300,525,80,25,0,PI);
    
    fill("black")
    rect(130,270,150,10);
//glasses
    noFill();
    stroke(111,45,189)
    strokeWeight(10);
    rect(90,230,200,100);
    fill(111,45,189)
    rect(70,250,20,30);
}