Claire Lee – Project 01 – Face

This project was definitely a learning experience for me. I realized that it’s a lot more difficult for me to translate the image I want to create to the canvas when I’m using code as a medium instead of a program like Photoshop or Illustrator. It took a lot of little adjustments, but I’m happy with how it came out and I think I learned a lot.

project01_face

function setup() {
    createCanvas(600, 600);
    background(255, 208, 223);

    noStroke();
    fill(50,30,30);
    rect(150,300,300,250,0,0,50,50); 
    //hair base

    noStroke();
    fill(50,30,30);
    ellipse(300,300,300,300);
    //top of hair

    stroke(150);
    strokeWeight(2);
    fill(200);
    ellipse(300,600,300,350);
    //body

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    rect(260,380,80,100,0,0,40,40);
    //neck

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    ellipse(430,330,38,38);
    //right ear

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    ellipse(170,330,38,38);
    //left ear

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196); 
    ellipse(300,300,250,250);
    //base for face
  
    noStroke();
    fill(0);
    ellipse(360,320,20,20);
    //left eye

    noStroke();
    fill(0);
    ellipse(240,320,20,20);
    //right eye

    noStroke();
    fill(238,125,77);
    triangle(300,330,280,350,320,350);
    //nose
    
    noStroke();
    fill(215, 59, 62);
    ellipse(300,380,75,50);
    //mouth (part one) 
    //I tried to draw an arc but that didn't work

    noStroke();
    fill(255,229,196);
    rect(250,355,90,25);
    //mouth (part two), improvised

    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(230,320,95,90);
    //glasses (right)

    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(370,320,95,90);
    //glasses (left)

    line(280,318,320,318); 
    //glasses(middle)

    line(174,298,184,308);
    //glasses(frame left)

    line(416,308,426,298);
    //glasses(frame right)

    noStroke();
    fill(50,30,30);
    rotate(PI/5); 
    //question: why does ellipse move locations when being rotated?
    ellipse(420,-20,200,90); 
    //right side bangs

    noStroke();
    fill(50,30,30);
    rotate(46);
    ellipse(-105,-302,130,50);
    //left side bangs

}