For this project I did a simple cartoon face that I could exaggerate features on. I experimented a bit with curveVertex’s for the mouth and I think it turned out pretty good. The hardest part about this was deciding what needed to randomized and what I could lock in place.
// Ian Kaneko
// Section D
// ikaneko@andrew.cmu.edu
// Project-02 Variable Face
var headWidth = 250;
var headHeight = 250;
var noseWidth = 80;
var noseHeight = 80;
var noseY = 160 + noseHeight / 2;
var mouthTopLeftX = 175;
var mouthTopLeftY = 260;
var mouthTopRightX = 225;
var mouthTopRightY = 260;
var mouthBottomLeftX = 160;
var mouthBottomLeftY = 300;
var mouthBottomRightX = 240;
var mouthBottomRightY = 300;
var outsideBrowY = 120;
var insideBrowY = 120;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(140, 100, 80);
noStroke();
// Head
fill(200, 230, 250);
ellipse(200, 200, headWidth, headHeight);
// Mouth
fill(230, 200, 230);
point(mouthTopLeftX, mouthTopLeftY);
point(mouthBottomLeftX, mouthBottomLeftY);
point(mouthTopRightX, mouthTopRightY);
point(mouthBottomRightX, mouthBottomRightY);
beginShape();
curveVertex(mouthBottomLeftX, mouthBottomLeftY);
curveVertex(mouthBottomLeftX, mouthBottomLeftY);
curveVertex(mouthTopLeftX, mouthTopLeftY);
curveVertex(mouthTopRightX, mouthTopRightY);
curveVertex(mouthBottomRightX, mouthBottomRightY);
curveVertex(mouthBottomRightX, mouthBottomRightY);
endShape();
// Nose
fill(150, 200, 230);
ellipse(200, 160 + noseHeight / 2, noseWidth, noseHeight);
// Eyes
fill(130, 100, 150);
circle(150, 150, 30);
circle(250, 150, 30);
strokeWeight(7);
stroke(150, 200, 230);
line(120, outsideBrowY, 175, insideBrowY);
line(280, outsideBrowY, 225, insideBrowY);
// Randomize
}
function mousePressed() {
headWidth = random(245, 290);
headHeight = random(245, 290);
mouthBottomLeftX = random(150, 180);
mouthBottomLeftY = random(290, 310);
mouthBottomRightX = random(230, 250);
mouthBottomRightY = random(290, 310);
noseWidth = random(30, 70);
noseHeight = random(70, 180);
outsideBrowY = random(100, 140);
insideBrowY = random(100, 140);
}