PROJECT 02 – VARIABLE FACE

(click on the center of the canvas to change the faces)

sketch
//random colors used by all functions
var r;
var g;
var b;

//other variables
var rand_shape = 1;
var brow_shape = 1;
var eyeWidth = 20;
var eyeHeight = 40;
var nosehole = 20;
var mouthWidth = 60;
var mouthHeight = 30;
var ellipseWidth = 250;
var ellipseHeight = 300;
var pupilWidth = 5;
var pupilHeight = 10;


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

function draw() {
    background(180, 210, 231);
    var r = 0;
    var x = width / 2;
    var y = height / 2; 
    fill(0, 12);
    noStroke();


//eyes
    fill(0);
    ellipse(x - 40, y - 20, eyeWidth, eyeHeight);
    ellipse(x + 40, y - 20, eyeWidth, eyeHeight);

//pupils
    fill(255);
    ellipse(x - 40, y - 20, pupilWidth, pupilHeight);
    ellipse(x + 40, y - 20, pupilWidth, pupilHeight);

//mouth
    fill(255);
    beginShape();
    curveVertex(x - (mouthWidth/2), y + mouthHeight);
    curveVertex(x - (mouthWidth/2), y + mouthHeight);
    curveVertex(x, y + (mouthHeight*2));
    curveVertex(x + (mouthWidth/2), y + mouthHeight);
    curveVertex(x + (mouthWidth/2), y + mouthHeight);
    endShape();

//brows
    strokeWeight(5);
    stroke(r, g);
    fill(r, g, 120);
    if (brow_shape == 1) {
        beginShape();
        curveVertex(x - 60, y - 60);
        curveVertex(x - 60, y - 60);
        curveVertex(x - 40, y - 70);
        curveVertex(x - 40, y - 70);
        endShape();

        beginShape();
        curveVertex(x + 60, y - 60);
        curveVertex(x + 60, y - 60);
        curveVertex(x + 40, y - 70);
        curveVertex(x + 40, y - 70);
        endShape();
    } else if (brow_shape == 2) {
        noFill();
        bezier(x - 50, y - 90, x - 50, y - 80, x - 25, y - 65, x - 25, y - 50);
        bezier(x + 50, y - 90, x + 50, y - 80, x + 25, y - 65, x + 25, y - 50);
    } else if (brow_shape == 3) {
        noFill();
        beginShape();
        curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth + 4), y - (eyeHeight + 20));
        curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
        endShape();

        beginShape();
        curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth + 4), y - (eyeHeight + 20));
        curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
        endShape();
    }


//face shape
    strokeWeight(1);
    stroke(r, g, b);
    fill(r, g, b, 120);
    if (rand_shape == 1) {
        ellipse(x, y, ellipseWidth, ellipseHeight);
    } else if (rand_shape == 2) {
        triangle(x - 200, y - 140, x + 200, y - 140, x, y + 140);
    } else if (rand_shape == 3) {
        rect(160, 100, x, y);
    } else {
        quad(x, y - 160, x + 160, y, x, y + 140, x - 160, y)
    }



//crown
    /*point(270, 103);
    point(320, 120);
    point(355, 110);
    point(370, 103);
    point(270, 103);
    point(270, 54);
    point(300, 75);
    point(320, 45);
    point(340, 75);
    point(370, 54);*/
    strokeWeight(1);

    fill(g, b, 200);
    beginShape();
    curveVertex(270, 103);
    curveVertex(270, 103);
    curveVertex(320, 120);
    curveVertex(355, 110);
    curveVertex(370, 103);
    curveVertex(370, 103);
    curveVertex(370, 54);
    curveVertex(370, 54);
    curveVertex(340, 75);
    curveVertex(340, 75);
    curveVertex(320, 45);
    curveVertex(320, 45);
    curveVertex(300, 75);
    curveVertex(300, 75);
    curveVertex(270, 54);
    curveVertex(270, 54);
    curveVertex(270, 103);
    curveVertex(270, 103);
    endShape();

}

function mousePressed() {
//face
    rand_shape = random([1, 2, 3, 4]);

//eyes
    eyeWidth = random(20, 60);
    eyeHeight = random(40, 80);

//pupil 
    pupilWidth = random(2, 10);
    pupilHeight = random(2, 10);

//mouth
    mouthWidth = random(20, 90);
    mouthHeight = random(20, 50);

//brows
    brow_shape = random([1, 2, 3]);

//changing colors
    var d = dist(mouseX, mouseY, 320, 240);
    if (d < 100) {
        r = random(255);
        g = random(255);
        b = random(255);

    }

}

Creating this was a fun process overall. I wanted to change my style up a bit and create a character that’s more abstract, so I used different shapes for the heads. I wanted the style to be more cartoon-y so I tried to use more pastel, and brighter colors in the color randomization. I learned a lot about different ways to randomize the varying components of my piece. A challenge I faced was definitely getting the colors to show up right.

Leave a Reply