Timothy Liu — Project01 — Face

I really enjoyed this project as it allowed me to take creative liberties in portraying a few aspects of who I am—an upbeat, fun-loving, Yankees/sports fan—through graphic fundamentals of P5. The coding process was tricky in how long it took to align each of the components I included on the grid system (especially the hat logo), but it was a really rewarding first project.

tcliu-self-portrait

//Timothy Liu
//15-104 Section C
//tcliu@andrew.cmu.edu
//SELF-PORTRAIT

function setup() {
    createCanvas(600,600);
    background("#CAE9F5");
}

function draw() {

    fill("#F5CB9A");
    noStroke();
    rect(260,270,80,50);
    //neck

    fill("#FFD3A1");
    noStroke();
    ellipse(300,200,160,180);
    fill("#FFD3A1");
    noStroke();
    ellipse(220,210,20,45);
    fill("#FFD3A1");
    noStroke();
    ellipse(380,210,20,45);
    //head

    fill("#23120B");
    noStroke();
    quad(218,170,235,170,230,195,218,195);
    fill("#23120B");
    noStroke();
    quad(380,170,365,170,370,195,382,195);
    fill("#23120B");
    noStroke();
    arc(310, 165, 80, 25, TWO_PI, PI, CHORD);
    //hair

    fill(255);
    noStroke();
    arc(270,200,30,25,PI,TWO_PI);
    fill(255);
    noStroke();
    arc(330,200,30,25,PI,TWO_PI);
    fill(0);
    noStroke();
    ellipse(270,193.5,12,12);
    fill(0);
    noStroke();
    ellipse(330,193.5,12,12);
    //eyes

    fill(255);
    noStroke();
    ellipse(270,190,3,3);
    fill(255);
    noStroke();
    ellipse(330,190,3,3);
    //pupils

    fill("#003366");
    noStroke();
    quad(200,320,400,320,410,height,190,height);
    fill("#1261A0");
    noStroke();
    quad(203,443,195,height,202,height,208,447);
    //shirt/body

    fill("#1261A0");
    noStroke();
    arc(300, 320, 95, 50, TWO_PI, PI, CHORD);
    fill("#F5CB9A");
    noStroke();
    arc(300, 320, 85, 40, TWO_PI, PI, CHORD);
    //collar area

    fill("#CAE9F5");
    noStroke();
    triangle(200,320,250,320,190,350);
    //Left shoulder

    fill("#CAE9F5");
    noStroke();
    triangle(400,320,350,320,410,350);
    //Right shoulder

    fill("#003366");
    noStroke();
    quad(105,450,110,500,200,440,200,345);
    fill("#003366");
    noStroke();
    quad(90,350,110,500,150,450,120,340);
    fill("#1261A0");
    noStroke();
    quad(140,415,138,420,200,360,200,349);
    fill("#1261A0");
    noStroke();
    quad(200,349,200,360,257,327,253,324);
    //Right arm

    fill("#003366");
    noStroke();
    quad(495,450,490,500,400,440,400,345);
    fill("#003366");
    noStroke();
    quad(490,500,470,height,430,height,450,400);
    //Left arm

    fill("#FFD3A1");
    noStroke();
    ellipse(105,340,60,55);
    fill("#FFD3A1");
    noStroke();
    quad(83,275,93,315,108,320,95,272);
    fill("#FFD3A1");
    noStroke();
    quad(120,273,108,315,118,330,132,276);
    fill("#FFD3A1");
    noStroke();
    triangle(73,322,77,350,120,308);
    fill("#F5CB9A");
    noStroke();
    quad(73,322,82,348,105,340,94,313);
    fill("#E4B98E");
    noStroke();
    quad(97,335,120,364,133,350,105,327);
    //Right hand (with peace sign)

    fill("#D39972");
    noStroke();
    arc(300,225,10,40,PI,TWO_PI);
    //nose

    fill(255,150,150);
    noStroke();
    arc(300, 235, 60, 60, TWO_PI, PI, CHORD);
    //mouth

    fill("#003366");
    noStroke();
    arc(300,170,165,180,PI,TWO_PI);
    fill("#003366");
    noStroke();
    rect(218,155,190,15);
    fill("#CAE9F5");
    noStroke();
    triangle(381,155,420,170,420,155);
    //hat

    fill(255);
    noStroke();
    rect(285,120,5,25);
    fill(255);
    noStroke();
    rect(310,120,5,25);
    fill(255);
    noStroke();
    quad(290,120,315,142,310,145,287,126);
    fill(255);
    noStroke();
    quad(290,105,300,118,300,123,287,111);
    fill(255);
    noStroke();
    quad(310,105,300,118,300,123,313,111);
    fill(255);
    noStroke();
    rect(297.5,120,5,28);
    //logo on hat
   
}