Variable Face

var x = 150;
var y = 220;
var faceWidth = 150;
var faceHeight = 200;
var hairLength = 180;
var mouthSize = 20;
var eyeL = 40;
var eyeW = 20;
var pupiL = 15;
var bgR = 225;
var bgG = 123;
var bgB = 138;
var bodThic = 100;



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

function draw() {

    //original face but made dependant on itself not coords make teh stuff in relation to the face width
    background(bgR, bgG, bgB);

    fill(0)
    rect(width/2-0.6*faceWidth, height/2-0.2*faceHeight, (width/2+0.6*faceWidth)-(width/2-0.6*faceWidth), hairLength)

    fill(255-bgR, 225-bgG,225-bgB);
    ellipse(width / 2, height, bodThic, height);

    fill(253,227,220);
    strokeWeight(0);
    ellipse(width/2, height/2, faceWidth, faceHeight);    //face

    fill(0);
    quad(width/2-0.25*faceWidth, height/2-0.5*faceHeight, width/2+0.25*faceWidth, height/2-0.5*faceHeight, width/2+0.6*faceWidth, height/2-0.2*faceHeight, width/2-0.6*faceWidth, height/2-0.2*faceHeight)    //trap bang

    fill(225,199,190);
    triangle(width/2, height/2 ,width/2-0.07*faceWidth,height/2+0.23*faceHeight,width/2+0.07*faceWidth,height/2+0.23*faceHeight);    //nose

    strokeWeight(3);
    stroke(239,94,94);
    noFill();
    ellipse(width/2, height/2+0.35*faceHeight, mouthSize);


    fill(245,249,255); 
    strokeWeight(0);
    ellipse(width/2-0.25*faceWidth, height/2-0.0025*faceHeight, eyeL, eyeW);    //eye left
    ellipse(width/2+0.25*faceWidth, height/2+0.0025*faceHeight, eyeL, eyeW);    // eye right

    fill(127,71,42);
    strokeWeight(0);
    ellipse(width/2-0.25*faceWidth, height/2-0.0025*faceHeight, pupiL);   //pupil left
    ellipse(width/2+0.25*faceWidth, height/2+0.0025*faceHeight, pupiL);    // pupil right 

    fill(253,227,220);
   // rect((width/2-0.25*faceWidth) - (eyeL / 2), (height/2-0.0025*faceHeight) - (eyeW / 2), eyeL, eyeW / 2);    //lids left
  
    fill(10)
    rect ((width/2-0.25*faceWidth) - (eyeL / 2), (height/2-0.0025*faceHeight) - (eyeW / 2), eyeL, 2);   //eyebrow left
    rect ((width/2+0.25*faceWidth) - (eyeL / 2), (height/2+0.0025*faceHeight) - (eyeW / 2), eyeL, 2);   //eyebrow left

}


function mousePressed(){
    faceWidth = random(75, 200);
    faceHeight = random(100, 300);
    hairLength = random(100, 300);
    mouthSize = random(5, 40);
    eyeL = random(20, 50);
    eyeW = random(10, 50);
    pupiL = random(5, 20);
    bgR = random(0, 225);
    bgG = random(0, 225);
    bgB = random(0, 225);
    bodThic = random(100, width);
}