rkarp1 – Project-02 – Variable Face – Section A

Rachel Karp Variable Faces

//face
var faceColorR = (0);
var faceColorG = (200);
var faceColorB = (40);
var faceWidth = 200;
var faceLength = 300;
var faceOutline = (3);

//mouth
var mouthColorR = (0);
var mouthColorG = (0);
var mouthColorB = (0);
var mouthSize = 100;
var mouthOutline = (2);

//eyes
var eyeColor = (0);
var eyeStroke = (255);
var eyeSclera = (6); // strokeWeight for the eye

//canvas
var canvasColorR = (0);
var canvasColorG = (0);
var canvasColorB = (0);

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES); // Change the mode to DEGREES
}

function draw() {

    background(canvasColorR, canvasColorG, canvasColorB);

    //face
    stroke(255);
    strokeWeight(faceOutline);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width/2, height/2, faceWidth, faceLength);

    //mouth
    strokeWeight(mouthOutline);
    fill(mouthColorR, mouthColorG, mouthColorB);
    arc(width/2, height/2+faceLength/6, mouthSize, mouthSize, 0, 160, CHORD);

    //eyes color and outline
    stroke(eyeStroke);
    strokeWeight(eyeSclera);
    fill(eyeColor);
    
    //left eye
    ellipse(width/2 - faceWidth/4, height/2-faceLength/6, 20, 20);

    //right eye
    ellipse(width/2 + faceWidth/4, height/2-faceLength/6, 20, 20);

}

function mousePressed() {

    //face color
    //When clicked, face color changes randomly.
    faceColorR = random(0,255);
    faceColorG = random(0,255);
    faceColorB = random(0,255);

    //face size
    //When clicked, face width changes randomly, and face height changes in relation.
    faceWidth = random(100, 340);
    faceLength = random(faceWidth, faceWidth*3/2);

    //mouth color
    //When clicked, mouth color changes in relation to face color.
    mouthColorR = faceColorG;
    mouthColorG = faceColorB;
    mouthColorB = faceColorR;

    //mouth size
    //When clicked, mouth size changes in relation to face width.
    mouthSize = random(10, faceWidth/3);

    //eye
    //Stroke color remains constant.
    eyeStroke = (255);
    //When clicked, the size of the sclera (strokeWeight) changes.
    eyeSclera = random(1,18);

    //face outline
    //When clicked, face outline changes in relation to sclera size.
    faceOutline = eyeSclera/2

    //mouth outline
    //When clicked, mouth outline changes in relation to sclera size.
    mouthOutline = eyeSclera/3

    //canvas
    //When clicked, canvas color changes to match mouth color.
    canvasColorR = mouthColorR;
    canvasColorG = mouthColorG;
    canvasColorB = mouthColorB;

}

This project made me have to figure out a lot of things (some with the help of Maayan Albert during office hours) including how to make colors change and how to make sure different changing shapes (eyes, mouth) could stay inside a bigger changing shape (face). Once I figured out how to make colors change, I wanted to play with that a lot to play with how different colors can affect the viewer’s emotions. I also became interested in how outlines can change the emotional quality of an image. E.g., when the white around the eyes is really big, the figure seems afraid; when the white around the whole face is heavier, the figure seems more active and zany.