variable face cb
var eyeWidth = 55;
var eyeHeight = 70;
var eyeColor = 10;
var earHeight = 180;
var faceWidth = 300;
var faceHeight = 230;
var backgroundR = 245;
var backgroundG = 200;
var backgroundB = 175;
var dressR = 240;
var dressG = 90;
var dressB = 160;
var blushWidth = 30;
var blushHeight = 15;
var bodyWidth = 120;
function setup() {
createCanvas(640, 480);
}
function draw() {
var centerX = width / 2
var centerY = height / 2
background(backgroundR, backgroundG, backgroundB);
//body
noStroke();
fill(95, 130, 255);
ellipse(centerX, centerY + 120, bodyWidth, 50);
rect(centerX - (bodyWidth / 2), centerY + 120, bodyWidth, 300);
//ears
var earLX = centerX - 55
var earRX = centerX + 55
var earLH = centerY - earHeight
var earRH = centerY - earHeight
stroke(95, 130, 255);
strokeWeight(10);
fill(255, 130, 130);
triangle(centerX - 115, centerY - 60, earLX, centerY - 60, centerX - 70, earLH);
triangle(centerX + 115, centerY - 60, earRX, centerY - 60, centerX + 70, earRH);
//dress
noStroke();
fill(dressR, dressG, dressB);
triangle(centerX - 60, height, centerX + 60, height, centerX, centerY - 100);
//face
noStroke();
fill(95, 130, 255);
ellipse(centerX, centerY, faceWidth, faceHeight);
//hair
//left
noStroke();
fill(0, 30, 130);
beginShape();
curveVertex(centerX, centerY - 100);
curveVertex(centerX, centerY - 100);
curveVertex(centerX - 35, centerY - 90);
curveVertex(centerX - 50, centerY - 50);
curveVertex(centerX - 40, centerY - 50);
curveVertex(centerX, centerY - 100);
curveVertex(centerX, centerY - 100);
endShape();
//center
noStroke();
fill(0, 30, 130);
beginShape();
curveVertex(centerX, centerY - 100);
curveVertex(centerX, centerY - 100);
curveVertex(centerX - 15, centerY - 70);
curveVertex(centerX, centerY - 35);
curveVertex(centerX + 15, centerY - 70);
curveVertex(centerX, centerY - 100);
curveVertex(centerX, centerY - 100);
endShape();
//right
noStroke();
fill(0, 30, 130);
beginShape();
curveVertex(centerX, centerY - 100);
curveVertex(centerX, centerY - 100);
curveVertex(centerX + 35, centerY - 90);
curveVertex(centerX + 50, centerY - 50);
curveVertex(centerX + 40, centerY - 50);
curveVertex(centerX, centerY - 100);
curveVertex(centerX, centerY - 100);
endShape();
//eyes
var eyeLX = centerX - faceWidth * 0.25;
var eyeRX = centerX + faceWidth * 0.25;
noStroke();
fill(255);
ellipse(eyeLX, centerY, eyeWidth, eyeHeight);
ellipse(eyeRX, centerY, eyeWidth, eyeHeight);
//eye black
noStroke();
fill(eyeColor);
ellipse(eyeLX - 5, centerY + 5, 48, 60);
ellipse(eyeRX - 5, centerY + 5, 48, 60);
//eye highlight
noStroke();
fill(255);
triangle(eyeLX, centerY, eyeLX + 20, centerY - 10, eyeLX + 20, centerY + 10);
triangle(eyeRX, centerY, eyeRX + 20, centerY - 10, eyeRX + 20, centerY + 10);
//blush
noStroke();
fill(210, 150, 170);
ellipse(eyeLX + 2, centerY + 55, blushWidth, blushHeight);
ellipse(eyeRX + 2, centerY + 55, blushWidth, blushHeight);
//mouth
if (mouseY <= (centerY)) {
//smile
noFill();
stroke(0, 30, 130);
strokeWeight(5);
beginShape();
curveVertex(centerX - 32, centerY + 60);
curveVertex(centerX - 32, centerY + 60);
curveVertex(centerX - 25, centerY + 70);
curveVertex(centerX, centerY + 60);
curveVertex(centerX + 25, centerY + 70);
curveVertex(centerX + 32, centerY + 60);
curveVertex(centerX + 32, centerY + 60);
endShape();
} else if (mouseY > centerY) {
//frown
noFill();
stroke(0, 30, 130);
strokeWeight(5);
beginShape();
curveVertex(centerX - 25, centerY + 70);
curveVertex(centerX - 25, centerY + 70);
curveVertex(centerX, centerY + 60);
curveVertex(centerX + 25, centerY + 70);
curveVertex(centerX + 25, centerY + 70);
endShape();
}
}
function mousePressed() {
faceWidth = random(280, 330);
faceHeight = random(210, 300);
eyeWidth = random(50, 60);
eyeHeight = random(65, 75);
eyeColor = random(0, 100);
backgroundR = random(170, 255);
backgroundG = random(170, 170);
backgroundB = random(170, 200);
blushWidth = random(25, 40);
blushHeight = random(5, 25);
bodyWidth = random(110, 150);
dressR = random(130, 255);
dressG = random(80, 170);
dressB = random(110, 150);
earHeight = random(160, 200);
}
My inspiration for this project was Rosie, a character from the game Animal Crossing. I played around with the variability of the size of the eyes, face, blush, and body as well as the color of the eyes, background, and dress. When creating the two mouth facial expressions, I also explored if statements and curves. Below is a picture of Rosie and my initial Illustrator sketch!