My Many Faces – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

It was really fun making a bunch of different faces. I really wanted to experiment with color, not just focus on the faces. So, you should be able to see that the colors change depending on the face I make. Also, I enjoyed making laugh lines for my happy face!
sketch-SarahL Download
function setup() {
    createCanvas(640,480);
    background(247,221,235);
    text("p5.js vers 0.9.0 test.", -3, -3);
    text("Sarah",603,476);
}

function draw() {
    noStroke();

    // hair
    fill(38,23,8);
    ellipse(320,260,300,450);

    // face
    fill(235,190,143);
    ellipse(320,250,200,270);

    // ears
    circle(220,240,25);
    circle(420,240,25);

    // neck
    rect(297,300,50,150);

    // nose
    stroke(255,222,179);
    strokeWeight(2);
    triangle(310,285,320,250,330,285);

    // bangs
    noStroke();
    fill(38,23,8);
    arc(250,110,160,190,-.18,HALF_PI+QUARTER_PI,OPEN); // left
    arc(370,125,125,130,QUARTER_PI,-2.5,OPEN);         // right

    // This is my happy face
    if(mouseIsPressed & (mouseY < (height * .33))) {
	// eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right

        // mouth
        fill(255, 255, 255);
        stroke(255, 0, 0);
        strokeWeight(4);
        arc(320, 315, 55, 55, 0, PI, CHORD);
        stroke(0);
        strokeWeight(1);
        line(297.5, 326.5, 342.5, 326.5);

        // eyes
        stroke(0);
        strokeWeight(6);
        line(260,227,290,227); // left
        line(350,227,380,227); // right

        // crows feet - left
        stroke(0);
        strokeWeight(1);
        line(243,233,255,227);
        line(243,227,255,227);
        line(243,222,255,227);

        // crows feet - right
        line(385,227,397,233); 
        line(385,227,397,227);
        line(385,227,397,222);

	// upper body   
	stroke(0);
	strokeWeight(1);
        fill(255,255,153);
        rect(250, 410, 140, 70);
    }

    // This is my surprised face
    else if(mouseIsPressed & (mouseY > (height * .66))) {
        // eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 225, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 225, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right
	   
        // mouth
        noStroke();
        fill(0,0,0);
        circle(320, 325, 40, 40);

        // eyes (outer)
        stroke(0);
        strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();
        fill(0, 0, 0);
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(0,76,153);
        rect(250, 410, 140, 70);
    }

    // This is my angry face
    else if(mouseIsPressed) {
        // eyebrows
        stroke(38,23,8);
        strokeWeight(3);
        line(260,205,290,213); // left
        line(350,213,380,205); // right

        // mouth
        stroke(0);
        strokeWeight(6);
        line(298,327,343,327);

        // eyes (outer)                       
        stroke(0);
        strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs    
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();     
        fill(0, 0, 0);                
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right	
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(205,0,0);
        rect(250, 410, 140, 70);
    }

    // This is my neutral face
    else {
        // eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right
       
        // mouth
	stroke(255,153,204);
	strokeWeight(3);
        line(298,327,343,327)

	// eyes (outer)                       
        stroke(0);
	strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs    
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();     
        fill(0, 0, 0);                
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right        
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(204,255,229);
        rect(250, 410, 140, 70);
    } 
}
Leave a Reply Cancel reply
