Yoshi Torralva-Project-02-Variable-Face

sketch

//Yoshi Torralva
//Section E
//yrt@andrew.cmu.edu
//Project 02 Variable Face
    var eyeSize = 100;
    var eyemvmnt = 50;
    var faceWidth = 400;
    var faceHeight = 600;
    var hatbottom = 320;
    var hatbottomvmt = 320;
    var Qhat = 160;
    var Qhatx1y1x2y2 = 160;
    var windw = 400;
    var windh = 80;
     
    function setup() {
        createCanvas(640, 480);
    }
    function draw() {
        background(232, 253, 255);
        //wind movements 
        fill(181, 246, 255);
        noStroke();
        rect(windh, windw/4, windw, windh);
        rect(windh * 2, windw/2, windw *2, windh/2);
        rect(windh - windh, windw, windw, windh);
        rect(windh * 5, windw/3.5, windw * 3, windh/2.5);
        //face
        fill(255, 199, 15);
        ellipse(faceWidth * 0.8, faceHeight, faceWidth,  faceHeight);
        //two parts of the hat. The base and top.
        fill(5, 59, 66);
        rect(hatbottom/2, hatbottom/1.1, hatbottomvmt, hatbottom/4);
        quad(Qhatx1y1x2y2, Qhatx1y1x2y2/4, Qhatx1y1x2y2 * 3, Qhatx1y1x2y2/4, Qhat * 2.6, Qhat * 2, Qhat * 1.3, Qhat * 2);
        //variables for eyes
        var eyeL = width / 2 - faceWidth * 0.20;
        var eyeR = width / 2 + faceWidth * 0.20;
        //eye
        fill(255);
        ellipse(eyeL, eyeSize * 4.5, eyeSize, eyeSize);
        fill(255);
        ellipse(eyeR, eyeSize * 4.5, eyeSize, eyeSize);
       //pupil
        fill(0);
        ellipse(eyeL, eyeSize * 4.6, eyemvmnt,eyemvmnt);
        ellipse(eyeR, eyeSize * 4.6, eyemvmnt,eyemvmnt);
    }
     
    function mousePressed() {
        faceWidth = random(370, 450);
        //only used to animate the width of the hat for perspective 
        //only changes the first two quadrants of the top hat to keep the parts connected
        Qhatx1y1x2y2 = random(200,330);
        eyemvmnt = random(40,60);
        hatbottomvmt = random(350,400);
        windh = random(20,100);
        windw = random(200, 1000);
    }

With this project, I focused on using random() to create movement and slight perspective shifts within the piece. With the face, only certain variables were animated to create a similar perspective shift to the hat. Rectangles in the background add depth and additional visual cues of wind as the hat jolts to the right side of the screen.