The idea behind my code was to use randomization as well as variable-relations to create any number of faces on its own. The random variables include colors as well as the sizes of some aspects, like the eyes and face size. The eyes I made separately in order to create an abstract feel, along with the randomly changing background.
Abstract FacesDownload
//Variable Faces
var strokeSize = 1;
var faceWidth = 400;
var faceHeight = 600;
var faceColor = 135;
var eyeColor = 30;
var lEyeWidth = 100;
var lEyeHeight = 100;
var rEyeWidth = 100;
var rEyeHeight = 100;
var pupilColor = 135;
var noseColor = 200;
var mouthColor = 185;
var mouthWidth = 180;
var mouthHeight = 80;
var backTri = 220;
var backSquare = 220;
var backCirc = 220
var backEllipse = 220;
var backRect = 220;
function setup() {
createCanvas(480, 640);
}
function draw() {
//randomizes the color of the background square
var colorRA = random(0, 255);
var colorGA = random(0, 255);
var colorBA = random(0, 225);
//randomizes the color of the background triangle
var colorRB = random(0, 255);
var colorGB = random(0, 255);
var colorBB = random(0, 225);
//randomizes the color of the background circle
var colorRC = random(0, 255);
var colorGC = random(0, 255);
var colorBC = random(0, 225);
//randomizes the color of the background ellipse
var colorRD = random(0, 255);
var colorGD = random(0, 255);
var colorBD = random(0, 225);
//randomizes the color of the background rectangle
var colorRE = random(0, 255);
var colorGE = random(0, 255);
var colorBE = random(0, 225);
//randomizes the color of the background
var colorRF = random(0, 255);
var colorGF = random(0, 255);
var colorBF = random(0, 225);
//creates a random background color
background(colorRF, colorGF, colorBF);
noStroke();
frameRate(3); //slows looping speed
fill(colorRA, colorGA, colorBA);
square(width - 300, 0, 300); //background square
fill(colorRB, colorGB, colorBB);
triangle(0, 0, 100, 200, 400, 100); //background triangle
fill(colorRC, colorGC, colorBC);
circle(width - 100, height - 100, 250); //background circle
fill(colorRE, colorGE, colorBE);
rect(0, height * .3, width, .4 * height); //background rectangle
fill(colorRD, colorGD, colorBD);
ellipse(.25 * width, height - 80, 225, 400); //background ellipse
strokeWeight(strokeSize);
stroke(0); //makes the strokes black
//creates the face with a random strokeWeight
fill(faceColor);
ellipse(width / 2, height /2 , faceWidth, faceHeight);
//creates the left eye
fill(eyeColor);
ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, lEyeWidth, lEyeHeight);
ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, rEyeWidth, rEyeHeight);
//creates the right eye
fill(pupilColor);
ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * lEyeWidth, .3 * lEyeHeight);
ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * rEyeWidth, .3 * rEyeHeight);
//creates the nose
fill(noseColor);
beginShape();
curveVertex(width / 2, height / 2);
curveVertex(width / 2, height / 2);
curveVertex(width / 2 - .05 * faceWidth, height / 2 + .1 * faceHeight);
curveVertex(width / 2 - .1 * faceWidth, height / 2 + .15 * faceHeight);
curveVertex(width / 2, height / 2 + .2 * faceHeight);
curveVertex(width / 2, height / 2 + .22 * faceHeight);
endShape();
//creates the mouth
fill(mouthColor);
arc(width / 2, height / 2 + faceHeight * .3, faceWidth * .2, faceHeight * .2, 0, PI, CHORD);
}
//creates the randomization when mouse is clicked
function mouseClicked() {
strokeSize = random(1, 5); //randomizes the stroke size of the face
faceWidth = random(250,400); //randomizes face width
faceHeight = random(250, 600); //randomizes face height
//randomizes the color of the face
faceColor = color(random(0, 255), random(0, 255), random(0, 255));
//randomization of eye sizes and colors
eyeColor = color(random(0, 255), random(0, 255), random(0, 255));
lEyeWidth = random(20, .3 * faceWidth);
lEyeHeight = random(20, .3 * faceHeight);
rEyeWidth = random(20, .3 * faceWidth);
rEyeHeight = random(20, .3 * faceHeight);
pupilColor = color(random(0, 255), random(0, 255), random(0, 255));
//randomizes nose color
noseColor = color(random(0, 255), random(0, 255), random(0, 255));
//randomizes mouth color
mouthColor = color(random(0, 255), random(0, 255), random(0, 255));
}