(click on the center of the canvas to change the faces)
sketch
//random colors used by all functions
var r;
var g;
var b;
//other variables
var rand_shape = 1;
var brow_shape = 1;
var eyeWidth = 20;
var eyeHeight = 40;
var nosehole = 20;
var mouthWidth = 60;
var mouthHeight = 30;
var ellipseWidth = 250;
var ellipseHeight = 300;
var pupilWidth = 5;
var pupilHeight = 10;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(180, 210, 231);
var r = 0;
var x = width / 2;
var y = height / 2;
fill(0, 12);
noStroke();
//eyes
fill(0);
ellipse(x - 40, y - 20, eyeWidth, eyeHeight);
ellipse(x + 40, y - 20, eyeWidth, eyeHeight);
//pupils
fill(255);
ellipse(x - 40, y - 20, pupilWidth, pupilHeight);
ellipse(x + 40, y - 20, pupilWidth, pupilHeight);
//mouth
fill(255);
beginShape();
curveVertex(x - (mouthWidth/2), y + mouthHeight);
curveVertex(x - (mouthWidth/2), y + mouthHeight);
curveVertex(x, y + (mouthHeight*2));
curveVertex(x + (mouthWidth/2), y + mouthHeight);
curveVertex(x + (mouthWidth/2), y + mouthHeight);
endShape();
//brows
strokeWeight(5);
stroke(r, g);
fill(r, g, 120);
if (brow_shape == 1) {
beginShape();
curveVertex(x - 60, y - 60);
curveVertex(x - 60, y - 60);
curveVertex(x - 40, y - 70);
curveVertex(x - 40, y - 70);
endShape();
beginShape();
curveVertex(x + 60, y - 60);
curveVertex(x + 60, y - 60);
curveVertex(x + 40, y - 70);
curveVertex(x + 40, y - 70);
endShape();
} else if (brow_shape == 2) {
noFill();
bezier(x - 50, y - 90, x - 50, y - 80, x - 25, y - 65, x - 25, y - 50);
bezier(x + 50, y - 90, x + 50, y - 80, x + 25, y - 65, x + 25, y - 50);
} else if (brow_shape == 3) {
noFill();
beginShape();
curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
curveVertex(x - (eyeWidth + 4), y - (eyeHeight + 20));
curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
endShape();
beginShape();
curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
curveVertex(x + (eyeWidth + 4), y - (eyeHeight + 20));
curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
endShape();
}
//face shape
strokeWeight(1);
stroke(r, g, b);
fill(r, g, b, 120);
if (rand_shape == 1) {
ellipse(x, y, ellipseWidth, ellipseHeight);
} else if (rand_shape == 2) {
triangle(x - 200, y - 140, x + 200, y - 140, x, y + 140);
} else if (rand_shape == 3) {
rect(160, 100, x, y);
} else {
quad(x, y - 160, x + 160, y, x, y + 140, x - 160, y)
}
//crown
/*point(270, 103);
point(320, 120);
point(355, 110);
point(370, 103);
point(270, 103);
point(270, 54);
point(300, 75);
point(320, 45);
point(340, 75);
point(370, 54);*/
strokeWeight(1);
fill(g, b, 200);
beginShape();
curveVertex(270, 103);
curveVertex(270, 103);
curveVertex(320, 120);
curveVertex(355, 110);
curveVertex(370, 103);
curveVertex(370, 103);
curveVertex(370, 54);
curveVertex(370, 54);
curveVertex(340, 75);
curveVertex(340, 75);
curveVertex(320, 45);
curveVertex(320, 45);
curveVertex(300, 75);
curveVertex(300, 75);
curveVertex(270, 54);
curveVertex(270, 54);
curveVertex(270, 103);
curveVertex(270, 103);
endShape();
}
function mousePressed() {
//face
rand_shape = random([1, 2, 3, 4]);
//eyes
eyeWidth = random(20, 60);
eyeHeight = random(40, 80);
//pupil
pupilWidth = random(2, 10);
pupilHeight = random(2, 10);
//mouth
mouthWidth = random(20, 90);
mouthHeight = random(20, 50);
//brows
brow_shape = random([1, 2, 3]);
//changing colors
var d = dist(mouseX, mouseY, 320, 240);
if (d < 100) {
r = random(255);
g = random(255);
b = random(255);
}
}
Creating this was a fun process overall. I wanted to change my style up a bit and create a character that’s more abstract, so I used different shapes for the heads. I wanted the style to be more cartoon-y so I tried to use more pastel, and brighter colors in the color randomization. I learned a lot about different ways to randomize the varying components of my piece. A challenge I faced was definitely getting the colors to show up right.