Project 2: Variable Faces

bob project 2
var faceWidth = 250;
var faceHeight = 250;
var faceColorR = 30;
var faceColorG = 20;
var faceColorB = 80;
var randomEars = 0;
var randomEyes = 0;
var randomNose = 0;
var eyeWidth = 28;
var eyeHeight = 35;
var eyeColorR = 252;
var eyeColorG = 230;
var eyeColorB = 33;


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

function draw() {
    //face
    background(206, 219, 240); //light blue for background
    fill(faceColorR, faceColorG, faceColorB); //color of face
    ellipse(width / 2, height / 2, faceWidth, faceHeight); //face

    //ears (randomly pick ears)
    if (randomEars <= 1){ //round ears
        circle(width/3, height/3, 60); //left round ears
        circle(width - (width/3), height/3, 60); //right round ears

    } else if (randomEars <= 2) { //triangle ears
        triangle(190, 130, 260, 152 , 220, 200); //left triangle ears
        triangle(450, 130, 380, 152, 420, 200); //right triangle ears

    } else { //curved down ears
        beginShape(); //left curved down ears
        curveVertex(200, 210);
        curveVertex(210, 230);
        curveVertex(170, 180);
        curveVertex(270, 137);
        curveVertex(290, 240);
        endShape();

        beginShape(); //right curved down ears
        curveVertex(440, 210);
        curveVertex(430, 230);
        curveVertex(470, 180);
        curveVertex(370, 137);
        curveVertex(350, 240);
        endShape();
    }
    

    //eyes (randomly pick eyes)
    if (randomEyes <= 1){ //round eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(280, 230, eyeWidth, eyeHeight); //left black part of round eyes 
    fill(255, 255, 255);
    ellipse(280, 236, 15, 17); //left white part of round eyes
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(360, 230, eyeWidth, eyeHeight); //right black part of round eyes 
    fill(255, 255, 255);
    ellipse(360, 236, 15, 17); //right white part of round eyes
    
    } else if (randomEyes <= 2){ //line eyes
    fill(0, 0, 0); //black
    rect(260, 230, 30, 5); //left line eyes
    rect(350, 230, 30, 5); //right line eyes
    
    } else { //reptile eyes
    fill(0, 0, 0); //black 
    circle(275, 230, 50); //left black part of reptile eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(275, 230, 5, 50); //left inside part of reptile eyes
    fill(0, 0, 0); //black 
    circle(365, 230, 50); //right black part of reptile eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(365, 230, 5, 50); //right inside part of reptile eyes
    }
    

    //nose (randomly pick nose)
    fill(faceColorR + 50, faceColorG + 35, faceColorB + 10); //nose color slightly darker than face color
    
    if (randomNose <= 1) { //pig snout
    ellipse(width/2, height/2 + 30, 70, 40); //pig snout outside
    ellipse(width/2 -10, height/2 +30, 8, 15); //pig snout left nostril
    ellipse(width/2 +10, height/2 +30, 8, 15); //pig snout right nostril
    
    } else if (randomNose <= 2) { //triangle nose
    triangle(width/2 - 10, height/2 + 30, width/2 + 10, height/2 + 30, width/2, height/2 + 45); //triangle nose
    
    } else { //curvy mouth + whiskers
    fill(faceColorR, faceColorG, faceColorB);
    arc(width/2 - 10, height/2 + 50, 20, 20, 0, radians(200)); //curvy mouth left
    arc(width/2 + 10, height/2 + 50, 20, 20, radians(-20), PI); //curvy mouth right
    fill(0, 0, 0); //black 
    line(240, 270, 180, 240); //left top whisker
    line(400, 270, 460, 240); //right top whisker
    line(240, 275, 175, 275); //left middle whisker
    line(400, 275, 465, 275); //right middle whisker
    line(240, 280, 180, 310); //left bottom whisker
    line(400, 280, 460, 310); //right bottom whisker
    }
  
}

function mousePressed(){
    faceWidth = random(200, 250);
    faceHeight = random(200, 250);
    faceColorR = random(80, 170);
    faceColorG = random(50, 150);
    faceColorB = random(60, 200);
    randomEars = random(0, 3);
    randomEyes = random(0, 3);
    randomNose = random(0, 3);
    eyeWidth = random(20, 35);
    eyeHeight = random(30, 38);
    eyeColorR = random(185, 220);
    eyeColorG = random (190, 235);
    eyeColorB = random (130, 250);
}

The most interesting part of the project was testing out the code and seeing how the facial features change and create unique combinations. However, I did find it a bit challenging and time-consuming to design each of the variations.

Leave a Reply