Project 02: Variable Face

The main challenges in constructing my face were primarily around the placement of each element and how to control their heights so pieces didn’t overlap in ugly ways or stick out, but also to keep the overall identity of the face. I wanted each face to seem a little larger than life, while generating a completely new and cartoonish, albeit simple, face every time. I wanted simple elements based off of the original code, but that used that basic template given to us to create really weird and outrageous faces.

cowboyedit
var eyeSize = 20;     ////how large the outside eyes get
var faceWidth = 100;   ////width of face
var faceHeight = 150;  ////height of face
var glasses = 40      ////size of glasses lens
var hatWidth = 125    ////width of the brim
var hatHeight = 35    ////height of the brim
var hatX = 25        ////position of the top corner of the rectangular portion of the hat
var hatTall = 150    ////length of the rectangular portion of the hat
var bandannaSize = 80 ///width of the bandanna 
var bandannaY = 380   ///bottom corner of the bandanna
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    var hatSize = hatX * 2   ////determines width of the hat based on distance from the center
    var eyeLX = width / 2 - faceWidth * 0.25;  ////size of left eye
    var eyeRX = width / 2 + faceWidth * 0.25;  ////size of right eye
    var noseLength = 40    ////furthest position of nose
    var noseX1 = (width / 2, height / 2) - (.35 * faceWidth)   ////first x of nose triangle
    var noseY1 = height / 2 + faceHeight / 10   ////first y of nose triangle
    var noseX2 = (width / 2, height / 2) + (.75 * faceWidth)  ////2nd x of nose triangle
    var noseY2 = height / 2 + faceHeight / 10    ////2nd y of nose triangle
    var noseX3 = faceWidth / 2   ////x position of noise point
    var noseY3 = (height / 2) + noseLength ////height of nose point
    var bandanna1 = (width / 2) - bandannaSize  ////right x of bandanna, based on distance from center
    var bandanna2 = (width / 2) + bandannaSize   ///left x of bandanna, based on distance from center
    var bandannaLength = 400    ////y of bandanna point
    rect((width / 2) - hatX, 4, hatSize, hatTall) ////rectangle of hat
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); ////face
    triangle(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3)   ////nose
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);  /////left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);  /////right eye
        if (faceWidth > 200) {   ////condition for glasses when face is wide
            line(eyeRX, height / 2, eyeLX, height / 2)
            ellipse(eyeRX, height / 2, glasses)
            ellipse(eyeLX, height / 2, glasses)
        } else {    ////otherwise pupils of eyes
            ellipse(eyeRX, height / 2, 4)
            ellipse(eyeLX, height / 2, 4)
         }    
    ellipse(width / 2, (height / 2) - ((faceHeight / 2) * .85), hatWidth, hatHeight);   /////hat brim
    triangle(bandanna1, bandannaY , bandanna2, bandannaY, width / 2, bandannaLength)    ////bandanna

       noLoop()


 
}

    

 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    redraw()
    faceWidth = random(75, 280);
    faceHeight = random(75, 280);
    eyeSize = random(10, 30);
    glasses = random(40, 65)
    hatWidth = random(120, 240)
    hatHeight = random(40, 80)
    hatX = random(10, 40)
    hatTall = random(160, 280)
    bandannaSize = random(100, 300)
    bandannaY = random(260, 300)
    bandannaLength = random(400, 550)
}

Leave a Reply