Project 02 – Variable Face

Some of the detail in this project are similar to the program I covered in my Looking Out for this week. There are times when the face does not look as it should, while there are others when it seems as though the face is trying to convey real emotions. Left click to begin and change faces.

variableface

/* Lance Yarlott (lcy)
   Section D */

// variable definitions, names self explanatory
var canvasWidth = 400;
var canvasHeight = 400;

const headCenterX = canvasWidth / 2;
const headCenterY = canvasHeight / 2;
const headRadius = canvasHeight / 3;

const noseX = headCenterX;
const noseTopY = headCenterY;
const noseBottomY = noseTopY + (headRadius / 4);

const eyeCenterLX = headCenterX - (headRadius / 2);
const eyeCenterRX = headCenterX + (headRadius / 2);
const eyeCenterY = headCenterY - (headRadius / 3);
const eyeWhiteRadius = headRadius / 5;
const irisRadius = eyeWhiteRadius / 2;

const mouthY = headCenterY + (2 *headRadius / 3);
const mouthX = headCenterX;

var skinR = 255;
var skinG = 255;
var skinB = 255;

var noseWidth = 10;
    
var earWidth = 10;

var pupilDilationRadius = 1;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
    
var eyebrowWidth = 10;
var eyebrowThickness = 1;
var eyebrowAngle = 0;
var eyebrowDistance = 0;
var eyebrowHeight = eyeCenterY - (2 * eyeWhiteRadius);

var mouthCurve = 0;
var mouthWidth = 1;
var mouthThickness = 1;

var hairR = 255;
var hairG = 255;
var hairB = 255;

var noseR = 255;
var noseG = 255;
var noseB = 255;

var bgColor = 255;

function setup() {
    createCanvas(canvasWidth, canvasHeight);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(10);
    noStroke();
}

function draw() {
    if (mouseIsPressed) {
        if (mouseButton === LEFT) { 
            // colors
            skinR = random(0, 255);
            skinG = random(0, 255);
            skinB = random(0, 255);

            eyeR = random(0, 255);
            eyeG = random(0, 255);
            eyeB = random(0, 255);
            
            hairR = random(0, 255);
            hairG = random(0, 255);
            hairB = random(0, 255);

            noseR = random(0, 255);
            noseG = random(0, 255);
            noseB = random(0, 255);

            bgColor = random(0, 255);

            // face shapes
            noseWidth = random(10, headRadius / 2);

            pupilDilationRadius = random(1, irisRadius);
            
            eyebrowWidth = random(10, headRadius / 2);
            eyebrowThickness = random(1, eyeWhiteRadius);
            eyebrowAngle = random(-HALF_PI, HALF_PI);
            eyebrowDistance = random(0, eyebrowWidth);
            eyebrowHeight = eyeCenterY - (random(1, 3) * eyeWhiteRadius);

            mouthCurve = random(50);
            mouthWidth = random(1, headRadius * 2);
            mouthThickness = random(1, 10);
        }
    }

    // set background color
    background(bgColor);

    // draw face outline, variable skin color?
    fill(skinR, skinG, skinB);

    circle(headCenterX, headCenterY, 2 * headRadius);

    // TODO: nose
    fill(noseR, noseG, noseB);
    triangle(noseX - noseWidth, noseBottomY, noseX + noseWidth, noseBottomY,
            noseX, noseTopY);

    // TODO: variable eyes w/ variable color
    fill(255);
    circle(eyeCenterLX, eyeCenterY, eyeWhiteRadius);
    circle(eyeCenterRX, eyeCenterY, eyeWhiteRadius);

    fill(eyeR, eyeG, eyeB);
    circle(eyeCenterLX, eyeCenterY, irisRadius);
    circle(eyeCenterRX, eyeCenterY, irisRadius);

    fill(0);
    circle(eyeCenterLX, eyeCenterY, pupilDilationRadius);
    circle(eyeCenterRX, eyeCenterY, pupilDilationRadius);

    // TODO: variable eyebrows, match hair color
    stroke(hairR, hairG, hairB);
    strokeWeight(eyebrowThickness);
    line(headCenterX + eyebrowDistance, eyebrowHeight - 10 * sin(eyebrowAngle), 
        headCenterX + eyebrowDistance + eyebrowWidth, 
        eyebrowHeight + 10 * sin(eyebrowAngle));
    line(headCenterX - eyebrowDistance, eyebrowHeight - 10 * sin(eyebrowAngle),
        headCenterX - eyebrowDistance - eyebrowWidth,
        eyebrowHeight + 10 * sin(eyebrowAngle));

    // TODO: variable mouth, just shape of curve
    stroke(0);
    curve(mouthX - mouthWidth, mouthY + mouthCurve, mouthX - mouthWidth / 2,
        mouthY - mouthCurve, mouthX + mouthWidth / 2, mouthY - mouthCurve,
        mouthX + mouthWidth, mouthY + mouthCurve);
    noStroke();
}