Project-02-Variable Face – Sara Lyons

saral-variableface

//variables for face
var eyeSize = 35;
var pupilSize = 10;
var hairLength = 250;
var hairWidth = 100;
var browY = 120
var browLength = 25;
var browWidth = 50;

    //create the canvas
function setup() {
    createCanvas(640, 480);
}
	//build the basic face
function draw() {
    background(200, 50, 50);
    //hair
    rectMode(CORNER);
    noStroke();
    fill(240);
    rect(width / 4, height / 5, hairWidth,  hairLength);
    fill(5);
    rect(width / 4, height / 5, hairWidth / 2, hairLength);
    //mouth
    fill(10);
    strokeWeight(5);
    rectMode(CENTER);
    rect(width / 2, 275, 150, 35);
    //eyes
    var eyeLX = (width / 4) + hairWidth
    var eyeRX = eyeLX + hairWidth
    fill(5);
    ellipse(eyeLX, height / 3, eyeSize, eyeSize);
    ellipse(eyeRX, height / 3, eyeSize, eyeSize);
    //pupils
    fill(255);
    ellipse(eyeLX, height / 3, pupilSize, pupilSize);
    ellipse(eyeRX, height / 3, pupilSize, pupilSize);
    //brows
    stroke(5)
    strokeWeight(15)
    line(240, browY, 280, browY);
  	line(340, browY, 380, browY); 
  	}

    //create mouse functions: when the mouse is clicked, 
    //the size or position of these elements change value.
function mousePressed() {
     eyeSize = random(20, 70);
     browY = random(140, 90);
     pupilSize = random(3, 30);
}

I created a number of variables as I built this face, inspired by modular 1960s design styles. After building the face, I spent a while experimenting with randomizing the size and position of all the elements and chose the three (eye size, pupil size, and eyebrow position) that I found most strongly affected the expressive qualities of the face.