Project: Variable Faces

The challenging part of this project was figuring out how much to constrain the random function for the various elements that are generated.

sketchDownload
var eyeSize = 10;
var foreheadWidth = 200;
var foreheadHeight = 100;
var cheekWidth = 300;
var cheekHeight = 120;
var chinWidth = 30;
var chinHeight = 30;
var mouthWidth = 120;
var mouthHeight = 3;
var hairColor = 0;
var earSize = 57;
var fill = 67;
var noseWidth = 20;
var noseHeight = 15;
var eyebrowAngle = 0; //shifts eyebrow up and down to create expressions

function setup() {
    createCanvas(480, 640);
    background(67);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	noFill();
	stroke(random(0,255),random(0,255),random(0,255));
	strokeWeight(1);
	circle(random(0,480),random(0,640),random(40,500)); //hypnotic background generator
	circle(random(0,480),random(0,640),random(40,500)); //repetition to increase speed of generator
	var foreheadY = height/2 - (cheekHeight/2);
	var chinY = height/2 + (cheekHeight/2);
	noStroke();
	fill(255,223,64);
	beginShape(); // yellow 
	    vertex(width/2, chinY + 10);
	    curveVertex(width/2 + 150, chinY + 40);
	    curveVertex(width/2 + 220, height);
	    vertex(width/2, height);
	endShape(CLOSE);
	fill(161,156,35,100);
	beginShape(); // yellow cloak shaodw 
	    vertex(width/2, chinY + 15);
	    curveVertex(width/2 + 148, chinY + 43);
	    curveVertex(width/2 + 218, height);
	    vertex(width/2, height);
	endShape(CLOSE);
    fill(207,165,93); 
	beginShape(); //body
	    vertex((width/2-chinWidth/2) -10,height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        curveVertex(width - 100, height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        vertex(width - 50, height);
    endShape(CLOSE);
	fill(225,204,115);
	ellipse(width/2 - foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //left ear
	ellipse(width/2 + foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //right ear
	fill(hairColor);
    circle(width/2, foreheadY,foreheadWidth + 25); //hair
	fill(207,165,93);
	rect((width/2-chinWidth/2) -10, height/2 + (cheekHeight/2) - (chinHeight/2), chinWidth + 20, cheekHeight*.75); //neck
	fill(225,204,115);
    ellipse(width/2, foreheadY, foreheadWidth, foreheadHeight); //forehead
    ellipse(width/2, height/2, cheekWidth, cheekHeight); //cheeks
    fill(179,30,90,100);
    circle(width/2 - (cheekWidth/4 + 10), height/2, cheekWidth/8); //left rosy cheek
    circle(width/2 + (cheekWidth/4+ 10), height/2, cheekWidth/8); //right rosy cheek
    var eyeposLX = (width/2 - foreheadWidth/4);
    var eyeposRX = (width/2 + foreheadWidth/4);
    var eyeposY = (height/2 - foreheadHeight/2);
    fill(0);
    circle(eyeposLX,eyeposY,eyeSize); //left eye
    circle(eyeposRX,eyeposY,eyeSize); //right eye
    fill(200,60,20);
    beginShape(); //monk robe
        vertex(0,height);
        curveVertex(width*.25,height*.6875);
        curveVertex(width/2, chinY + 20);
        vertex(width - 50, height - 20);
        vertex(width - 40, height);
    endShape(CLOSE);
    fill(105,40,30,150);
    triangle(0,height, width*.25, height*.6875, width*.25 + -70, height); //red cloak shadow
    triangle(width*.25 + 40,(height*.6875) +30, width*.25 + 20, height, width*.25 - 20, height); //red cloak shadow
    triangle(width*.25 + 70, height, width*.25 + 80,(height*.6875) + 25, width*.25 + 170, height);
    triangle(width*.25 + 230, height, width*.25 + 195, height - 100, width*.25 + 300, height); 
    fill(225,204,115);
    ellipse(width/2, height/2 + (cheekHeight/2), chinWidth, chinHeight); //chin
    fill(0);
    ellipse(width/2,height/2 + cheekHeight/4 ,mouthWidth,mouthHeight); //mouth
    fill(135,108,61);
    beginShape(); //nose
        vertex(width/2 - noseWidth, height/2 - 10);
        curveVertex(width/2, height/2);
        vertex(width/2 + noseWidth, height/2 - 10);
        curveVertex(width/2, height/2 + noseHeight);
    endShape(CLOSE);
    stroke(0);
    noFill();
    strokeWeight(5);
    line(eyeposLX - 10, eyeposY - 15, eyeposLX + 20, (eyeposY - 15) + eyebrowAngle); //left eyebrow
    line(eyeposRX - 20, (eyeposY - 15) + eyebrowAngle, eyeposRX + 10, eyeposY - 15); //right eyebrow
}

function mousePressed() {
	cheekWidth = random(200, 325);
	cheekHeight = random(120,200);
	foreheadWidth = random(150, (cheekWidth - 100));
	foreheadHeight = random(80, (cheekHeight/2));
	chinWidth = random(30,80);
	chinHeight = random(30,70);
	mouthHeight = random(1,30);
	mouthWidth = random (40, cheekWidth/2);
	background(random(0,255),random(0,255),random(0,255));
	hairColor = random(0,250);
	earSize = random(40, 70);
	noseWidth = random(10,30);
	noseWidth = random(10,40);
	eyebrowAngle = random(-10,20);
	eyeSize = random(10,20);
}



Leave a Reply