mmiller5_Project-2

sketch

var faceWidth = 225;
var faceHeight = 225;
var faceType = 1;
var earSize = 50;
var earType = 1;
var earStroke = 10;
var faceR = 225;
var faceG = 184;
var faceB = 153;
var eyeSize = 30;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
var eyeStroke = 1;
var mouthSize = 40;
var mouthType = 1;
var types = [1,2,3]; // faces, ears, and mouths have 3 different versions which will get randomly chosen
 
function setup() {
    createCanvas(480, 640);
    rectMode(CENTER);
}
 
function draw() {
    background(255-faceR, 255-faceG, 255-faceB); //background color is inverse color of face
    fill(faceR, faceG, faceB);


    //Ear types
    strokeWeight(earStroke);
    stroke(faceR - 10, faceG - 10, faceB - 30);
    if(earType == 2){
	ellipse(width/2 - faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
	ellipse(width/2 + faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
    }
    if(earType == 3){
	triangle(width/2 - faceWidth/4, height/2 - faceHeight/5,
		 width/2, height/2 - faceHeight/3,
		 width/2 - faceWidth/2, height/2 - faceHeight/2 - earSize/2);
	triangle(width/2 + faceWidth/4, height/2 - faceHeight/5,
		 width/2, height/2 - faceHeight/3,
		 width/2 + faceWidth/2, height/2 - faceHeight/2 - earSize/2);
    }

    
    //Face types
    strokeWeight(5);
    if(faceType == 1){
	ellipse(width/2, height/2, faceWidth, faceHeight);
    }
    if(faceType == 2){
	rect(width/2, height/2, faceWidth, faceHeight);
    }
    if(faceType == 3){
	triangle(width/2 - faceWidth/2, height/2 - faceHeight/2,
		 width/2 + faceWidth/2, height/2 - faceHeight/2,
		 width/2, height/2 + faceHeight/2);
    }

    //Eye Sockets
    strokeWeight(0);
    fill(faceR - 30, faceG - 30, faceB - 50);
    ellipse(width/2 - faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
    ellipse(width/2 + faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
    
    //Eyes will follow mouse (kinda)
    strokeWeight(eyeStroke);
    stroke(eyeR/5, eyeG/5, eyeB/3);
    fill(eyeR, eyeG, eyeB);
    var eyeXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/15, width/2 - faceWidth/6 + eyeSize/15);
    var eyeY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/15, height/2 - faceHeight/6 + eyeSize/15);
    var eyeXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/15, width/2 + faceWidth/6 + eyeSize/15);
    ellipse(eyeXL, eyeY, eyeSize, eyeSize);
    ellipse(eyeXR, eyeY, eyeSize, eyeSize);

    //Pupils will follow mouse (kinda)
    fill(0);
    strokeWeight(0);
    var pupilXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/4, width/2 - faceWidth/6 + eyeSize/4);
    var pupilY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/4, height/2 - faceHeight/6 + eyeSize/4);
    var pupilXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/4, width/2 + faceWidth/6 + eyeSize/4);
    ellipse(pupilXL, pupilY, eyeSize/2, eyeSize/2);
    ellipse(pupilXR, pupilY, eyeSize/2, eyeSize/2);
    
    //Mouth
    fill(eyeR/3, eyeG/5, eyeB/5);
    if(mouthType == 1){
	strokeWeight(mouthSize/10);
	line(width/2 - mouthSize/2, height/2 + faceHeight/6, width/2 + mouthSize/2, height/2 + faceHeight/6);
    }
    if(mouthType == 2){
	strokeWeight(mouthSize/5);
	point(width/2, height/2 + faceHeight/6);
    }

}
 
function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 300);
    faceType = random(types);
    
    earSize = random(75, 125);
    earType = random(types);
    earStroke = random(5, 20);
    //Skin colors are setup so as to mostly resemble realistic skin tones
    faceR = random(70,255);
    faceG = random(faceR/4, faceR);
    faceB = random(faceR/4, faceG);
    
    eyeSize = random(20, 35);
    eyeR = random(0, 255);
    eyeB = random(0, 255);
    eyeG = random(0, 255);
    eyeStroke = random(1, 4);
    
    mouthSize = random(30, 60);
    mouthType = random(types);
    }

I really wanted to focus on creating different types of features rather than just adjusting the same feature by changing variables, and so I found out about using arrays from which the program makes a selection to decide which version of a feature to use, if any.  I wanted to make it even more interactive, so I tried to make the eyes follow the mouse (it kinda worked, but I know there’s a different way to do it that I’ll probably try later).