GraceSimmons-Project02-VariableFaces

When I was making this face, my main focus was changing colors, but still keeping a cohesive looking piece. I thought it would be interesting to have imaginative colors for the eyes, but keep within a range of more realistic colors for the skintone. The ears stay within a range of brown, and the hair within a range of orange. By keeping the face size constant, the different identities were all dependent on the features shifting. This creates a very slight identity change sometimes, but it can also result in a starkly different visual appearance at other times.

sketch-73.js

var noseWidth   =30;
var noseHeight  =60;
var mouthWidth  =100;
var mouthHeight =30;
var earWidth    =30;
var earHeight   =50;
var hairWidth   =300;
var hairHeight  =200;
var ebWidth     =40; //eyebrow width
var ebHeight    =5;  //eyebrow height

//rgb for eyes
var eyeColor1   =72; //first rgb value
var eyeColor2   =136; //second rgb value
var eyeColor3   =216; //third rgb value

//rgb for face
var skinTone1   =240; 
var skinTone2   =200;
var skinTone3   =170;

//rgb for eyes
var earColor1   =150; 
var earColor2   =90;
var earColor3   =50;

//rgb for hair
var hairColor1  =240; 
var hairColor2  =120;
var hairColor3  =30;

var ebYaxis     =250; //to shift eyebrows up and down

function setup() {
    createCanvas(480, 680);
}

function draw() {
	background(246,211,53);
	fill(hairColor1,hairColor2,hairColor3);
	stroke(hairColor1,hairColor2,hairColor3);
	ellipse(width/2,height/3,hairWidth,hairHeight); // hair bubble
	fill(earColor1,earColor2,earColor3);
	stroke(earColor1,earColor2,earColor3);
	rect(width/5,height/2.25,earWidth,earHeight); //left ear
	rect(3.57/5*width,height/2.25,earWidth,earHeight); //right ear
	fill(skinTone1,skinTone2,skinTone3);
	stroke(skinTone1,skinTone2,skinTone3);
	ellipse(width/2,height/2,width/2,height/2); //face
	fill(eyeColor1,eyeColor2,eyeColor3);
	stroke(eyeColor1,eyeColor2,eyeColor3);
	ellipse((4/10)*width,.45*height,.05*width,.05*height); //left eye
	ellipse((6/10)*width,.45*height,.05*width,.05*height); //right eye
	fill('red');
	stroke('red');
	ellipse(width/2,height/2*1.25,mouthWidth,mouthHeight); //mouth
	fill(255,110,150); 
	stroke(255,110,150);
	ellipse(width/2,height/2,noseWidth,noseHeight); //nose
	fill(148,120,95);
	stroke(148,120,95);
	ellipse((4/10)*width,ebYaxis,ebWidth,ebHeight); //left eyebrow
	ellipse((6/10)*width,ebYaxis,ebWidth,ebHeight); //right eyebrow
}

function mousePressed() {
	mouthWidth  = random(60,130);
	mouthHeight = random(05,70);
	noseWidth   = random(10,50);
	noseHeight  = random(20,90);
	eyeColor1   = random(170,255);
	eyeColor2   = random(130,203);
	eyeColor3   = random(150,255);
	skinTone1   = random(235,255);
	skinTone2   = random(195,215);
	skinTone3   = random(160,180);
	earWidth    = random(20,60);
	earHeight   = random(40,80);
	earColor1   = random(140,170);
	earColor2   = random(85,110);
	earColor3   = random(45,75);
	hairWidth   = random(200,400);
	hairHeight  = random(150,300);
	hairColor1  = random(235,255);
	hairColor2  = random(100,160);
	hairColor3  = random(0,55);
	ebWidth     = random(20,60);
	ebHeight    = random(3,10);
	ebYaxis     = random(230,280);
}