Variable Face

sketch

/*Sean McGadden
Section C @ 1:30
smcgadde@andrew.cmu.edu
project - 02 */

//Variable Face

//Simple
var width = 640
var height = 480

//Face
var faceWidth = 200;
var faceHeight = 300;
var faceR = 65
var faceG = 82
var faceB = 244 

//Eyes
var eyeSize = 20;
var eyeR = 244
var eyeG = 211
var eyeB = 65

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(66, 244, 143);
    
    //Face
    fill(faceR, faceG, faceB)
    rect(width / 3, height / 3, faceWidth,            faceHeight);
    
    //Eyes
    fill (eyeR, eyeG, eyeB)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
}

function mousePressed() {
    
    //clicking changes position, color and size of face and eyes. 
    faceWidth = random(150, 300);
    faceHeight = random(200, 300);
    width = random (500, 640)
    height = random (400, 480)
    eyeSize = random(10, 40);
    eyeR = random(148, 244)
    eyeG = random(65, 211)
    eyeB = random(65, 244)
    faceR = random(62, 65)
    faceG = random(65, 82)
    faceB = random(91, 244)
}

The variable face was very interesting to play around with. Although I took few risks in my sketch I feel I learned a lot more about variables and their implementation. I want to make more intricate interactive pieces in future projects. My project makes computational changes in color, size and position of the face and eyes. Using RGB and canvas coordinate randomization with a few variables, I was able to explore further how faces can be differently perceived even with only small changes.

Here is an original concept sketch that I was unsuccessful in replicating after some attempts.

September 7 2018