agusman-Project02-VariableFace

agusman-02-variableface

//
// Anna Gusman
// agusman@cmu.edu
// Section A
// Project 02
// This program creates variable faces

var faceWidth = 150;
var faceHeight = 150;
var eyeVelX = 0; //eye velocity x
var eyeVelY = 0.4; //eye velocity y
var eyeSize = 40;
var rightEye = 40;
var leftEye = 40;
var leftEyeX = 5;
var leftEyeY = 20;
var rightEyeX = 40;
var rightEyeY = 20;
var eyeColor1;
var eyeColor2;
var mouthWidth = 100;
var mouthHeight = 50;
var mouthXcor = 30;
var mouthYcor = 50;
var color1;
var color2;

function setup() {
    createCanvas(400, 400);
    eyeColor1 = color(0)
    eyeColor2 = color(255, 200, 255);
}

function draw() {
    stroke(0.1)
    background(255, 255, 255);
    fill(255,255,255);

    //Head//
    from = color(255, 219, 0);
    to = color(182, 152, 0);
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, leftEye, leftEye);
    ellipse(eyeRX, height / 2, rightEye, rightEye);

    noStroke()
    from = color(255, 217, 0);
    to = color(253, 176, 0);
    for (var i = 0; i < faceWidth; i++) {
      fill(lerpColor(to, from, (i+1)/faceWidth));
      ellipse(width / 2 , height/2 - i*0 , faceWidth-i, faceHeight-i);
  }
    //Draw eyes in the right order
    if (eyeVelX>0) {
      drawLeftEye();
      drawRightEye();
    } else {
      drawRightEye();
      drawLeftEye();
    }

    //mouth//
    arc(mouthXcor / .15, mouthYcor / .2, mouthHeight, mouthWidth, 0, PI);

}

    //Left Eye//
function drawLeftEye(){
    noStroke()
    from = color(0, 0, 0);
    to = color(255, 200, 255);
    for (var i = 0; i < leftEye; i++) {
      fill(lerpColor(eyeColor1, eyeColor2, (i+1)/eyeSize));
      ellipse(width / 2 - i + rightEyeX, height/2 - i*eyeVelY - rightEyeY, eyeSize-i, eyeSize-i);
  }
}
    //Right Eye//
function drawRightEye(){
    noStroke()
    from = color(0, 0, 0);
    to = color(255, 200, 255);
    for (var i = 0; i < rightEye; i++) {
        fill(lerpColor(to, from, (i+1)/rightEye));
        ellipse(width / 2.5 - i + leftEyeX, height/2 - i*eyeVelY - leftEyeY, eyeSize-i, eyeSize-i);
  }
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(150, 200);
    faceHeight = random(150, 200);
    eyeSize = random(30, 50);
    rightEye = random(0, 40);
    leftEye = random(0, 40);
    mouthHeight = random(10,80)
    mouthWidth = random(20, 50)
    eyeColor1;
    eyeColor2;
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

This project pushed me in ways I could not expect. My initial vision was to play with the idea of exploring all the possible iterations between a set of my favorite emojis, allowing me to generatively view all the intermediary emotional states between them. I also wanted to play with gradients to give an extra dimension to these expressions- and thus I hurled myself into the realm of for loops. I realize that this may have been beyond the scope of the assignment, but it was fascinating to learn the logic and technique behind creating this visual element and how a computer understands to draw it.