ziningy1 – Section C- Project 02- Variable Face

ziningy1-variable face

 
//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-02 variable face 


//variables 

//face 
var faceWidth=90;
var fX=185
var fY=190

//mouth
var mWidth=120
var mHeight=40 

//head 
    var aX=220 
    var aY=190
    var bX=320
    var bY=180
    var cX=350
    var cY=100
    var dX=230
    var dY=60
    var eX=170
    var eY=120
    var gX=180
    var gY=190

     //head 

    var aX=220 
    var aY=190
    var bX=320
    var bY=180
    var cX=350
    var cY=100
    var dX=230
    var dY=60
    var eX=170
    var eY=120
    var gX=180
    var gY=190

    //eye
    var eyeSize=32;
    var eyeX=197;
    var eyeY=135;

    //nose 
    var Nax=180
    var Nay=160
    var Nbx=173
    var Nby=193
    var Ncx=192
    var Ncy=200


function setup() {
    createCanvas(500, 350);
}
 
function draw() {
    background(50);

     //face
    noStroke();
    fill(120);
    
   
    rect(fX,fY,faceWidth,faceWidth-25,10);

    fill(50);
    noStroke();

    triangle(fX+faceWidth,fY+30,fX+faceWidth,fY+faceWidth-25,fX+30,fY+faceWidth-25,50);


    //mouth
    

    noStroke
    fill(30)
    arc(fX,fY+22,mWidth,mHeight,0, HALF_PI);

   
    //head 
    noStroke();
    fill(175);

    beginShape();
    curveVertex(0, 0);
    
    curveVertex(aX, aY);
    curveVertex(bX,bY)
    curveVertex(cX, cY);
    curveVertex(dX, dY);
    curveVertex(eX, eY);
    curveVertex(gX, gY);
    
    
    curveVertex(0, 0);
    endShape();


     //eye
    noStroke; 
    fill(120)
    
    ellipse(eyeX,eyeY,eyeSize,eyeSize+10);

    fill(220)

    ellipse(random(-4,4)+eyeX,random(-6,6)+eyeY+5,eyeSize-16,eyeSize-15); 

   

    //nose 
    
    noStroke;
    fill(250);
    triangle(Nax,Nay,Nbx,Nby+random(-10,10),Ncx,Ncy);




    }



function mousePressed() {

    //head

    aX=random(190,240);
    aY=random(180,210);

    bX=random(280,360);
    bY=random(160,200);
    
    cX=random(320,380);
    cY=random(50,120);

    dX=random(210,250);
    dY=random(40,80);
    eX=random(150,210);
    eY=random(110,140);
    gX=random(150,190);
    gY=random(170,200);

    //face

    faceWidth=random(80,110);
    fX=random(160,200);
    fY=random(180,220);

    //mouth 
    mHeight=random(10,80);
    mWidth=random(40,160);

    //eye
    eyeSize=random(16,60);
    eyeX=random(189,207);
    eyeY=random(125,145);

    //nose 

    Nax=random(175,185);
    Nay=random(150,170);
    Nbx=random(45,173);
    Nby=random(153,213);
    Ncx=random(187,197);
    Ncy=random(190,210);







}

When I first think of the assignment making the variable face, I had this idea of making this funky skull that can deform through clicking. The function itself is not difficult to learn, yet how to set the variables correctly took me some time to get used to. I also focused on how I would like the skull head to deform, such as the I designed the nose to transform longer and shorter instead of up and down. I also found the method of using “random’ to make the shaking shapes is pretty effective. The shaking eyes make the skull face funnier and less static.