var noseSize = 20;
var noseWidth = 150;
var noseHeight = 100;
var faceWidth = 250;
var faceHeight = 250;
var earX = 80;
var earY = 66;
var eyeWidth = 25;
var eyeHeight = 40;
var eyeX = 150;
var eyeY = 160;
var eyeSize = 8;
var earnoseColor = 221;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(180,180,180);
//draw the ears
stroke(225,110,110);
strokeWeight(3);
fill(246,earnoseColor,earnoseColor);
triangle(width/4, height/3, width/8*3, height/9*2, earX, earY);
triangle(width/4*3, height/3, width/8*5, height/9*2, width-earX, earY);
//draw the face
fill(246,221,221);
ellipse(width/2, height/2, faceWidth, faceHeight);
//draw the eyes
noStroke();
fill(128,128,128);
ellipse(width/8*3, height/5*2, eyeWidth, eyeHeight);
ellipse(width/8*5, height/5*2, eyeWidth, eyeHeight);
fill(250);
ellipse(eyeX, eyeY, eyeSize, eyeSize);
ellipse(width-eyeX, eyeY, eyeSize, eyeSize);
//draw the nose outline
fill(235,184,184);
ellipse(width/2, height/5*3, noseWidth, noseHeight);
//draw the nose inside
var noseLX = width/2 - noseWidth*0.25;
var noseRX = width/2 + noseWidth*0.25;
fill(246,earnoseColor,earnoseColor);
ellipse(noseLX, height/5*3, noseSize, noseSize);
ellipse(noseRX, height/5*3, noseSize, noseSize);
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges.
noseWidth = random(100, 200);
noseHeight = random(80, 150);
noseSize = random(10, 40);
faceHeight = random(200, 300);
faceWidth = random(250, 350);
earX = random(50, 90);
earY = random(55, 75);
eyeWidth = random(30,45);
eyeHeight = random(30,60);
eyeX = random(140,160);
eyeY = random(150,170);
earnoseColor = random(110,221);
}
When I designed this variable face, I want it to be a cartoon and cute face. That’s why I chose to do pig.