Xiaoyu Kang – Project 01 – Face

I was trying to draw my face in a cartoon-like style, so I used a lot of vibrant and saturated colors. I also used a combination of circular shapes to represent my face and hair, and some other shapes to represent the other features on my face such as nose and lips.

sketch

//Xiaoyu Kang
//Section B
//xkang@andrew.cmu.edu
//Project-01

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

function draw() {
    fill(255,235,83);
    rect(0,0,600,600);
//background
    noStroke();
    fill(255,154,157);
    circle(300,290,530,530);
//hair
    noStroke();
    fill(74,38,0);
    ellipse(300,250,350,400);
    fill(74,38,0);
    rect(125,250,350,200);
//face
    noStroke();
    fill(255,206,157);
    ellipse(300,250,250,280);
//glasses
    noStroke();
    fill("grey");
    rect(200,210,70,50);
    fill("grey");
    rect(330,210,70,50);
    fill("grey");
    rect(280,230,40,5);
//face
    noStroke();
    fill(255,206,157);
    rect(205,215,60,40);
    fill(255,206,157);
    rect(335,215,60,40);
//eyes
    noStroke();
    fill("black");
    circle(240,235,20,20);
    fill("black");
    circle(360,235,20,20);
    fill("white");
    circle(245,235,5,5);
    fill("white");
    circle(365,235,5,5);
//ears
    noStroke();
    fill(255,206,157);
    ellipse(170,250,60,80);
    fill(255,206,157);
    ellipse(430,250,60,80);
//hair
    noStroke();
    fill(74,38,0);
    rect(210,190,60,10);
    fill(74,38,0);
    rect(330,190,60,10);
//nose
    noStroke();
    fill(255,175,107);
    triangle(285, 280, 315, 280, 300, 300);
//blush
    noStroke();
    fill(255,156,141);
    circle(230,310,55,55);
    fill(255,156,141);
    circle(370,310,55,55);
//lips
    noStroke();
    fill("brown");
    rect(270,330,60,15);
//neck
    noStroke();
    fill(255,206,157);
    rect(260,370,80,80);
//cloth
    noStroke();
    fill(134,51,43);
    rect(240,420,120,60);
    fill(134,51,43);
    ellipse(300,560,400,200);
    fill(134,51,43);
    rect(100,560,400,200);
    fill(74,0,0);
    rect(150,560,15,40);
    fill(74,0,0);
    rect(440,560,15,40);
//hair
    noStroke();
    fill(74,38,0);
    ellipse(220,130,80,100);
    fill(74,38,0);
    ellipse(170,180,61,80);
    fill(74,38,0);
    ellipse(260,100,60,80);
    fill(74,38,0);
    ellipse(380,130,80,100);
    fill(74,38,0);
    ellipse(430,180,61,80);
    fill(74,38,0);
    ellipse(340,100,60,80);
    fill(74,38,0);
    ellipse(130,370,80,160);
    fill(74,38,0);
    ellipse(470,370,80,160);
    fill(74,38,0);
    ellipse(125,280,30,70);
    fill(74,38,0);
    ellipse(475,280,30,70);
}