Project 02 – Variable Faces

My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces.

sketch
//Favour Adesina Section B

var faceWidth = 300;
var lipHeight = 20;
var lipWidth = 60;
var BlipWidth = 100;
var eyeWidth = 70;
var eyeHeight = 100;
var pupSize = 60;
var faceHeight = 400;


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

function draw() {
    noStroke()
    background(247, 195, 218);

    //SHOULDER
    fill(255, 67, 89);
    ellipse(width/2, height/2 + faceHeight/2, 2*faceWidth, faceHeight);

    //EARS
    fill(141, 75, 36);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/4, faceHeight/4); //right ear outer
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/4, faceHeight/4);  //left ear outer
    fill(34, 20, 13);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //right ear inner
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //left ear inner
    //FACE
    fill(141, 75, 36);
    ellipse(width/2, height/2, faceWidth, faceHeight);    // face

    //EARRINGS
    fill(255, 255, 0);
    triangle((width/2 - (faceWidth/2 + faceWidth/50)), height/2 + faceHeight/4, width/2 - faceWidth/2, height/2 + faceHeight/16, width/2 - faceWidth/1.5, height/2 + faceHeight/4);
    triangle((width/2 + (faceWidth/2 - faceWidth/100)), height/2 + faceHeight/4, width/2 + faceWidth/2, height/2 + faceHeight/16, width/2 + faceWidth/1.55, height/2 + faceHeight/4);


    //EYES
    var LXeye = width/2 - faceWidth * 0.26;          
    var RXeye = width/2 + faceWidth * 0.26;
    fill(255, 255, 255);
    ellipse(LXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites 
    ellipse(RXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites
    fill(104, 54, 37);
    ellipse(LXeye, height/2, pupSize, pupSize);    //Pupils 
    ellipse(RXeye, height/2, pupSize, pupSize);     //pupils 
    fill(0);
    ellipse(LXeye, height/2, 20, 20);                //inner pupils 
    ellipse(RXeye, height/2, 20, 20);                //inner pupils
       
    //NOSE
    stroke(35, 31, 32);
    strokeWeight(7);
    line(width/2, height/2, width/2, (height/2)+ eyeHeight/3);                         //Nose bridge
    ellipse((width/2)-5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose 
    ellipse((width/2)+5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose

    //LIPS
    strokeWeight(2);
    var BlipY = height/2 + faceHeight * 0.27 + lipHeight/2;
    fill(122, 22, 25);
    ellipse(width/2, BlipY, BlipWidth, lipHeight);
    noStroke();
    fill(173, 69, 87);                                   //light pink 
    ellipse(width/2, BlipY, lipWidth/2, lipHeight/2);  //inner mouth

    


    //HAIR
    fill(34, 20, 13);
    ellipse(width/2, height/2 - faceHeight/2, width/7, height/6);
    ellipse(width/2 - 55, height/2 - faceHeight/2, width/8, height/7);
    ellipse(width/2 + 55, height/2 - faceHeight/2, width/8, height/7);
 

        }

function mousePressed() {

    faceWidth = random(300, 500);
    faceHeight = random(260, 400);
    lipHeight = random(10, 50);
    pupSize = random(20, 70);
    lipWidth = random(10, 60);
    BlipWidth = random(30, 100);
    eyeWidth = random(20, 150);
    eyeHeight = random(80, 170);

}

Leave a Reply