Project – 02 Variable Faces

emily-variableface
//Emily Brunner, Section C
 
var eyeSize = 60;  //size of eye
var faceWidth = 300;  //face width
var faceHeight = 300;  //face height
var faceColorR = 255; //face color red space
var faceColorB = 155;  //face color blue space
var pupilSize = 5;   //pupil width and height
var mouth = 190;  //mouth width
var mouthColorR = 255; //mouth color red space
var mouthColorG = 25;  //mouth color green space
var mouthOpen = 95;  //mouth height
var nose = 20; //nose width


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

function draw() {
    strokeWeight(0);
    background(180);

    fill(faceColorR, 150, faceColorB); //head color
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //head
    
    var eyeLX = width / 2 - faceWidth * 0.2; //left eye width
    var eyeRX = width / 2 + faceWidth * 0.2; //right eye width
    fill(255, 255, 0); //color of eyes
    ellipse(eyeLX, height / 3, eyeSize, eyeSize); //height of left eye
    ellipse(eyeRX, height / 3, eyeSize, eyeSize); //height of right eye
    
    var pupilLX = width / 2 - faceWidth * 0.2; //width of left pupil
    var pupilRX = width / 2 + faceWidth * 0.2  //width of right pupil
    fill(0, 0, 0); //color of pupils
    ellipse(pupilLX, height / 3, pupilSize, pupilSize);  //height of left pupil
    ellipse(pupilRX, height / 3, pupilSize, pupilSize);  //height of right pupil
    
    fill (mouthColorR, mouthColorG, 156); //color of mouth
    ellipse(width / 2, height / 2 + faceHeight / 4, mouth, mouthOpen); //position of mouth relative to head
    
    fill(255, 100, 97); //color of nose
    ellipse(width / 2, height / 2, nose, nose / 2) //position of nose

}

function mousePressed() {
    faceWidth = random(300, 650);
    faceHeight = random (300, 600);
    eyeSize = random(10, 30);
    mouth = random(100, 200);
    nose = random(20, 70);
    mouthOpen = random (0, 100);
    faceColorR = random (0, 255);
    faceColorB = random (0,255);
    mouthColorR = random (0, 255);
    mouthColorG = random (0, 255);
}

This project was interesting. I had a lot of fun getting the colors to change. I am struggling with how to get objects to be relative to each other in space and change relative to each other when the mouse is pressed, so there are fewer attributes/physical features than I would like. If I were to do this again, I would probably spend more time on more facial features than the changes the face has.

Leave a Reply