Variable Face

// Simple beginning template for variable face.
var eyeWidth = 30;
var eyeLength = 38;
var faceWidth = 220;
var faceHeight = 180;
var earWidth = 50;
var inEar = 30
var noseWidth = 22;
var noseHeight = 9;
var blushWidth = 40;
var blushHeight = 21;
var snoutWidth = 73
var BlushR = 159;
var BlushG = 66;
var BlushB = 76;
var OutlineR = 106;
var OutlineG = 44;
var OutlineB = 76;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
	
	//EARS
	fill(139, 94, 60);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	var earLX = width / 2 - faceWidth * 0.3;
    var earRX = width / 2 + faceWidth * 0.3;
	var earHt = height / 2 - faceHeight * 0.4;
    ellipse(earLX, earHt, earWidth, earWidth);
    ellipse(earRX, earHt, earWidth, earWidth);
	
	fill(BlushR, BlushG, BlushB);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	ellipse(earLX, earHt, inEar, inEar);
	ellipse(earRX, earHt, inEar, inEar);
    
	//FACE
	fill(139, 94, 60);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	ellipse(width / 2, height / 2, faceWidth,  faceHeight); 


	//EYES
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	var eyeLX = width / 2 - faceWidth * 0.25; //EYE
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, height - 180, eyeWidth, eyeLength, radians(0),radians(180), OPEN);
	arc(eyeRX, height - 180, eyeWidth, eyeLength, radians(0),radians(180), OPEN);
    
	//SNOUT
	fill(169, 124, 80);
	noStroke();
	beginShape();
    vertex(width/2, width / 2 - faceWidth * 0.2);
    vertex(width / 2 + faceWidth * 0.2, width/2);
    vertex(width/2, width / 2 + faceWidth * 0.2);
    vertex(width / 2 - faceWidth * 0.2, width/2);
    endShape(CLOSE);
	
	//MOUTH
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	beginShape();
    vertex(width/2, height / 2 - faceHeight * 0.1);
	vertex(width/2, height / 2 + faceHeight * 0.02);
    vertex(width / 2 + faceWidth * 0.08, width / 2 + faceWidth * 0.05);
	endShape();
	beginShape();
    vertex(width/2, height / 2 - faceHeight * 0.1);
	vertex(width/2, height / 2 + faceHeight * 0.02);
    vertex(width / 2 - faceWidth * 0.08, width / 2 + faceWidth * 0.05);
	endShape();
	
	//NOSE
	fill(OutlineR, OutlineG, OutlineB);
	noStroke();
	var noseHt = height / 2 - faceHeight * 0.1;
	ellipse(width/ 2, noseHt, noseWidth, noseHeight);
	
	
	//BLUSH
	fill(BlushR, BlushG, BlushB);
	noStroke();
	var blushLx = width / 2 - faceWidth * 0.32;
	var blushRx = width / 2 + faceWidth * 0.32; 
	ellipse(blushLx, height - 150, blushWidth, blushHeight); 
	ellipse(blushRx, height - 150, blushWidth, blushHeight);
}
 
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(130, 230);
    faceHeight = random(120, 200);
    eyeWidth = random(10, 30);
	eyeLength = random(10, 50);
	earWidth = random(40, 60);
	inEar = random(10, 30);
	noseWidth = random(22, 28);
	noseHeight = random(9,15);
	blushWidth = random(10,40);
	blushHeight = random(10,21);
	BlushR = random(140,180);
    BlushG = random(40,80);
    BlushB = random(60,80);
	OutlineR = random(0,200);
    OutlineG = random(0,200);
    OutlineB = random(0,200);
}