Project-02-Variable-Face

sketch

var faceWidth = 400;
var faceHeight = 270;
var awidth = 640; // width as a variable that can change
var aheight = 480; //height as a variable that can change
var eyeposition = 20;
var eyepositionn = 10;
var mouthheight = 300; //original position of 
var mouthemotion = 1;
var sidefacewidth = 270;
var sidefaceheight = 400;
var definetheface = 1
var topfence = 0

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

//coding for first condition starts
    

    if (0<definetheface & definetheface<1){ //first*condition
    background(242,85,0);
    fill(35, 89, 41);
    rect(50,50, 550, 380);
    fill(255,234,117);//face color
    strokeWeight(1);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;

    beginShape();
    noFill();
    strokeWeight(2); 
    curveVertex(eyeLX - eyeposition, aheight/2 - eyepositionn);
    curveVertex(eyeLX - eyepositionn , aheight / 2 - eyepositionn);
    curveVertex(eyeLX, aheight / 2);
    curveVertex(eyeLX - 2* eyepositionn , aheight /2 - eyepositionn);
    curveVertex(eyeLX - 2* eyeposition, aheight /2 - eyeposition);
    endShape();

    beginShape();
    noFill();
    strokeWeight(2); 
    curveVertex(eyeRX - eyeposition, aheight/2 - eyepositionn);
    curveVertex(eyeRX - eyepositionn , aheight / 2 - eyepositionn);
    curveVertex(eyeRX, aheight / 2);
    curveVertex(eyeRX - 2* eyepositionn , aheight /2 - eyepositionn);
    curveVertex(eyeRX - 2*  eyeposition, aheight /2 - eyeposition);
    endShape();

    fill(0);
    strokeWeight(1);
    ellipse(width / 2, height / 2, eyeposition,  eyepositionn);

    if(0 < mouthemotion & mouthemotion < 1){
        arc(width/2, mouthheight, 100, 50, 1*Math.PI, 0*Math.PI, CHORD);
    } else if (1 < mouthemotion & mouthemotion < 2){
        arc(width/2, mouthheight, 100, 50, 0*Math.PI, 1*Math.PI, CHORD); 
    } else if (2 < mouthemotion & mouthemotion <3){
         arc(width/2, mouthheight, 100, 50, 0*Math.PI, 0*Math.PI, CHORD);
    }
    //heart
    fill(255,0,0);
    strokeWeight(1);
    arc(100, 100, 20, 20, PI, 0);
    arc(120, 100, 20, 20, PI, 0);
    triangle(90, 100, 130, 100, 110, 130);

    arc(500,200,20,20, PI, 0);
    arc(520,200, 20, 20, PI, 0);
    triangle(490, 200, 530, 200, 510, 230);

    strokeWeight(1);
    fill(255,0,0);
    rect(mouseX, mouseY, 50,50)
    fill(0,0,230);
    beginShape();
    vertex(mouseX,mouseY);
    vertex(mouseX+10,mouseY-30);
    vertex(mouseX+25,mouseY-0);
    vertex(mouseX+40,mouseY-40);
    vertex(mouseX+50,mouseY-0);
    endShape(CLOSE);
    
    


 //coding for second condition starts

    }else if (1<definetheface & definetheface<2){ //second*condition
         background(255,0,106);//background color
         fill(0,255,0);
         ellipse(mouseX, mouseY, 40, 40);
           fill(0,0,255);
            strokeWeight(0);
            circle(0,0,50);
            circle(50,0,50);
            circle(100,0,50);
            circle(150,0,50);
            circle(200,0,50);
            circle(250,0,50);
            circle(300,0,50);
            circle(350,0,50);
            circle(400,0,50);
            circle(450,0,50);
            circle(500,0,50);
            circle(550,0,50);
            circle(600,0,50);
            circle(650,0,50);

         fill(255); //color of the face
         strokeWeight(1);
         ellipse(width / 2, height / 2, sidefacewidth, sidefaceheight);
         strokeWeight(2); //stoke of eye
         if(mouthemotion<1.5){
            line(250, 150, 280, 160);
            line(280, 160, 250, 170);
        }else{
            line(260, 150, 230, 160);
            line(230, 160, 260, 170);
        }
         fill(0); //color of the nose
            ellipse(width/2 - sidefacewidth*0.5, height/2-sidefaceheight*0.1, sidefacewidth/5, sidefaceheight/7);
        if(0 < mouthemotion & mouthemotion < 1){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 100, 50, 0*Math.PI, 0.5*Math.PI, CHORD);
        } else if (1 < mouthemotion & mouthemotion < 2){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 100, 50, 1.2*Math.PI, 0.6*Math.PI, CHORD); 
        } else if (2 < mouthemotion & mouthemotion <3){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);
            arc((width/2-sidefacewidth/2)+10, mouthheight+20, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);
        }
        fill(0,255,0);
         ellipse(mouseX, mouseY, 40, 40);
// coding for third condition starts 

    }else{ // third*condition
        background(180);
        strokeWeight(2);
        fill(0,255,0);
        //clover
        circle(mouseX, mouseY, 30);
        circle(mouseX+30, mouseY, 30);
        circle(mouseX+15, mouseY-27,30)
        noFill();
        arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);

        fill(255,77,0);
        strokeWeight(0);
        rect(0,0,30,480);
        rect(610,-30,30, 480);


        fill(187,240,252);//color of face
        strokeWeight(1);
        ellipse(width/2-sidefaceheight/2, height/2,50); //ear left
        ellipse(640-(width/2-sidefaceheight/2),height/2,50); // ear right
        ellipse(width/2, height/2, sidefaceheight, sidefaceheight);

        fill(0);
        ellipse (width/2 - sidefaceheight*0.2, 100, 20, 10); //left eye
        ellipse (width/2 + sidefaceheight*0.2, 100, 20, 10); //rught eye
        ellipse (width/2, height/2 - sidefaceheight*0.5, 10,10); //nose
        

        fill(0);
        if(0 < mouthemotion & mouthemotion < 1){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 0*Math.PI, 1*Math.PI);
        } else if (1 < mouthemotion & mouthemotion < 2){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 0.25*Math.PI, 0.75*Math.PI);
        } else if (2 < mouthemotion & mouthemotion <3){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 1.75*Math.PI, 1.25*Math.PI);
        }
        
        strokeWeight(2);
        fill(0,255,0);
        circle(mouseX, mouseY, 30);
        circle(mouseX+30, mouseY, 30);
        circle(mouseX+15, mouseY-27,30)
        noFill();
        arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);

    }
}

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.
    faceWidth = random(350, 450);
    faceHeight = random(250, 290);
    eyeposition = random (20,30);
    eyepositionn = random (10,15);
    aheight = random(300,500);
    mouthemotion = random (0,3);
    definetheface = random (0,3);
    sidefacewidth = random (250,300);
    sidefaceheight = random (380,470);
}