Project 02–Variable Face

For this project, I made a frog whose features change with each click. By following the template and thinking about the proportions of each feature in relation to one another, I made it so that every frog looks different.

Zimmy Frog
// Zimmy Kang
var eyeSize = 60;
var faceWidth = 200;
var faceHeight = 150;
var pupilSize = 30;
var mouthWidth = 50;
var mouthHeight = 40;
var bodyWidth = 150;
var bodyHeight = 150;
var bellyWidth = 100;
var bellyHeight = 100;
var feetWidth = 40;
var feetHeight = 40;



 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(51, 212, 255);
    noStroke();
         fill(29, 80, 29);
         ellipse(width/2, height/2 + 50, 450, 300); // lily pad
    fill(29, 112, 29);
    ellipse(width/2, height/2, bodyWidth, bodyHeight); // body

         var footLX = width/2 - bodyWidth*0.30;
         var footLY = height/2 + bodyHeight/2;
         var footRX = width/2 + bodyWidth*0.30;
         var footRY = height/2 + bodyHeight/2;
         arc(footLX, footLY, feetWidth, feetHeight, PI, TWO_PI, CHORD);
         arc(footRX, footRY, feetWidth, feetHeight, PI, TWO_PI, CHORD); // feet
    fill(174, 206, 44);
    ellipse(width/2, height/2, bellyWidth, bellyHeight); // belly
         fill(67, 155, 67);
         ellipse(width / 2, height / 3, faceWidth,  faceHeight); // face
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var eyeLY = height/3 - faceHeight*0.25;
    var eyeRY = height/3 - faceHeight*0.25;
    var socket = eyeSize+10;
    ellipse(eyeLX, eyeLY, socket, socket);
    ellipse(eyeRX, eyeRY, socket, socket); // sockets
         fill(255, 255, 255);
         stroke(29, 112, 29);
         ellipse(eyeLX, eyeLY, eyeSize, eyeSize);
         ellipse(eyeRX, eyeLY, eyeSize, eyeSize); // eye whites
    fill(0);
    noStroke();
    ellipse(eyeLX, eyeLY, pupilSize, pupilSize);
    ellipse(eyeRX, eyeLY, pupilSize, pupilSize); // pupils
         fill(255, 183, 179);
         var mouthX = width/2;
         var mouthY = height/3 + faceHeight*0.1; //mouth location
         stroke(29, 112, 29);
         arc(mouthX, mouthY, mouthWidth, mouthHeight, 0, PI, CHORD); // mouth
    

 

}
 
function mousePressed() {
    faceWidth = random(200, 480);
    faceHeight = random(150, 200);
    eyeSize = random(50, 90);
    pupilSize = random (10, 49);
    socket = random(60, 80);
    mouthWidth = random(50, 190);
    mouthHeight = random(10, 90);
    bodyWidth = random(150, 400);
    bodyHeight = random(80, 180);
    bellyWidth = random(100, 140);
    bellyHeight = random (30, 70);
    feetWidth = random(40, 75);
    feetHeight = random(40, 50);
}

Leave a Reply