Project-01-Face-Manuelr

sketch

//Manuel Rodriguez Ladron de Guevara
//Section B 10:30am
//manuelr@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 600);
    background(194,217,76);
    angleMode(DEGREES);
    smooth();
    //text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {

    //background
    rectMode(CENTER);
    noStroke();
    fill(169,207,56);
    //fill(255,198,10);
    rect(300,300,300,400,20);

        //ears
    noStroke();
    fill(236,191,153);   
    rectMode(CENTER);
    rect((width/2)+100, (height/2), 30,50, 10);

    rectMode(CENTER);
    rect((width/2)-100, (height/2), 30,50, 10);

     //hair
    if(mouseX<(width/2)|| mouseY<(height/2)){
        fill(50);
    }else {
        noStroke();
        fill(255,216,0);
    }
    
    rect(300,260,220,220,50,50,10,10);
   

    //neck
    strokeWeight(3);
    stroke(216,170,153);
    fill(236,191,153);
    rect(300,450,60,150);



    //face base
    if(mouseX<(width/2) || (mouseY<(height/2))){
        strokeWeight(3);
        stroke(216,170,153);
        fill(236,191,153);
        ellipseMode(CENTER);
        ellipse(width/2, height/2, 200,300);  
    }
        else{
            noStroke();
    rectMode(CORNERS);
    rect((width/2)-80, (height/2)+60,(width/2)+80, (height/2)-80);

    noStroke();
    triangle((width/2)-80, (height/2)+60,300,450,(width/2)+80, (height/2)+60,30);
        }
        
    

    //mouth
    strokeWeight(5);
    stroke(216,170,153);
    line(width/2-10,height/2+100,310,400);

    //beard
    noFill();
    if(mouseX<(width/2)|| mouseY<(height/2)){
        stroke(50);
    }else {
        stroke(255,216,0);
    }
    //noFill();
    rectMode(CENTER);
    //stroke(50);
    //strokeWeight(8);
    rect(300,410,50,45,5);

    //eyes
    noStroke();
    fill(255);
    rect(260,280,35,20,5,5,10,10);
    rect(340,280,35,20,5,5,10,10);

    //shadow eyes
    noStroke();
    fill(230);
    rect(260,288,25,5,5,5,10,10);
    rect(340,288,25,5,5,5,10,10);



    //line below eyes
    strokeWeight(8);
    stroke(193,144,135);
    line(240,300,270,300);
    line(330,300,360,300);


    //eyeballs
    noStroke();
    fill(151,79,0);
    ellipse(260,280,15,15);
    ellipse(340,280,15,15);

    //pupil
    fill(0);
    ellipse(260,280,8,8);
    ellipse(340,280,8,8);

    //hair2
    if (mouseX<(width/2) || mouseY<(height/2)){
        noStroke();
        fill(50);    
    } else {
        noStroke();
        fill(255,216,0);
    }
    /*noStroke();
    fill(50);*/
    ellipse(300,170,100,50);
    arc(250,180,90,70,-60,150,CHORD);
    arc(210,220,80,60,-60,110,CHORD);
    arc(350,180,70,50,-80,150,CHORD);
    arc(390,220,80,60,-60,110,CHORD);
    arc(370,190,80,60,-60,110,CHORD);
    arc(400,260,70,50,-60,110,CHORD);

    //noStroke();
    //fill(0);
    //rect(300,150,220,100,50,50,10,10);

    //eyebrows
    fill(79,28,0);
    rect(260,260,45,10,5,5,10,10);
    rect(340,260,45,10,5,5,10,10);

    //nose
    strokeWeight(1);
    stroke(216,170,153);
    line(width/2-10,height/2+50,295,305);
    //line(310,350,305,305);
    noStroke();
    fill(216,170,153);
    triangle(width/2-10,height/2+50,295,305,310,345);

}

I started creating an ellipse as the base for the face. Then I drew the ears, as I wanted the hair to come in front of them, to cover them a little bit. Eyes were more time consuming as I was filleting the corners of the rectangle and drawing the pupils too. Hair was tricky as well as I used filled arcs and the result was unexpected and interesting at the same time when I did the right side of the forehead. Finally I wanted to add some conditionals and change the hair colour and the face shape depending on the position of the mouse.