![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
wpf-variable-face
//Patrick Fisher, section B
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeColor = 2;
var mouthType = 1;
var noseType = 1;
var browLength = (1.15 * eyeSize);
var r = 0; //color value for eyebrows
var m = 1; //coefficent for for size of mouth and nose
var skinColor = 1;
function setup() {
createCanvas(480, 640);
}
function draw() {
var midX = width / 2; //intermediate varriable for half the canvas length
background(180);
if(skinColor == 1){ //chooses a variety of skin colors from paper white to dark brown
strokeWeight(1);
fill(255);
ellipse(midX, height / 2, faceWidth, faceHeight);
} else if(skinColor == 2){
strokeWeight(1);
fill(254, 219, 117);
ellipse(midX, height / 2, faceWidth, faceHeight);
} else if(skinColor == 3){
strokeWeight(1);
fill(241, 194, 125);
ellipse(midX, height / 2, faceWidth, faceHeight);
} else if(skinColor == 4){
strokeWeight(1);
fill(224, 172, 105);
ellipse(midX, height / 2, faceWidth, faceHeight);
} else if(skinColor == 5){
strokeWeight(1);
fill(198, 134, 66);
ellipse(midX, height / 2, faceWidth, faceHeight);
} else if(skinColor == 6){
strokeWeight(1);
fill(140, 85, 36);
ellipse(midX, height / 2, faceWidth, faceHeight);
} else if(skinColor == 7){
strokeWeight(1);
fill(54, 30, 2);
ellipse(midX, height / 2, faceWidth, faceHeight);
}
var eyeLX = midX - faceWidth * 0.25; //variable for x position of left eye
var eyeRX = midX + faceWidth * 0.25; //wariable for x position of left eye
var eyeBrowL = (eyeLX - (.65 * eyeSize)); //variable for left eyebrow x position based off of left eye position
var eyeBrowR = (eyeRX - (.5 * eyeSize)); //wariable for right eyebrow x position based off of the right eye position
strokeWeight(1);
fill(r);
rect(eyeBrowL, ((height / 2) - eyeSize), browLength, (0.25 * eyeSize)); //left eyebrow
strokeWeight(1);
fill(r);
rect(eyeBrowR, ((height / 2) - eyeSize), browLength, (0.25 * eyeSize)); //right eyebrow
strokeWeight(1);
fill(255);
ellipse(eyeLX, height / 2, eyeSize, eyeSize); //creates left eye
strokeWeight(1);
fill(255);
ellipse(eyeRX, height / 2, eyeSize, eyeSize); //creates right eye
if(eyeColor == 1){ //makes brown irises
strokeWeight(1);
fill(100,63,33);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(100,63,33);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
} else if(eyeColor == 2){ //makes green irises
strokeWeight(1);
fill(0,125,75);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(0,125,75);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
} else if(eyeColor == 3){ //makes blue irises
strokeWeight(1);
fill(35,164,242);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(35,164,242);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
} else if(eyeColor == 4){ //makes heterochromia, brown right blue left
strokeWeight(1);
fill(100,63,33);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(35,164,242);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
} else if(eyeColor == 5){ //makes heterochromia, blue right brown left
strokeWeight(1);
fill(35,164,242);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(100,63,33);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
} else if(eyeColor == 6){ //makes heterochromia, blue right green left
strokeWeight(1);
fill(0,125,75);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(35,164,242);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
} else if(eyeColor == 7){ //makes heterochromia, green right blue left
strokeWeight(1);
fill(35,164,242);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(0,125,75);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
} else if(eyeColor == 8){ //makes heterochromia, brown right green left
strokeWeight(1);
fill(0,125,75);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(100,63,33);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
} else if(eyeColor == 9){ //makes heterochromia, green right brown left
strokeWeight(1);
fill(100,63,33);
ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
strokeWeight(1);
fill(0,125,75);
ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
}
//variables for positioning and drawing the mouth
var mouthWidth = (faceWidth * (1/3));
var mouthHeight = (faceHeight * .25);
//intermediate variables for the x,y coordiantes for the tirangle nose type
var tx1 = midX;
var ty1 = ((height / 2) - (faceHeight / 16));
var tx2 = (midX - (faceWidth / 8));
var ty2 = ((height / 2) + (faceHeight / 6))
var tx3 = (midX + (faceWidth / 8));
var ty3 = ((height / 2) + (faceHeight / 6));
if(mouthType == 1){
strokeWeight(1);
fill(0);
arc(midX , ((height / 2) + (faceHeight * .25)), mouthWidth, mouthHeight, m * TWO_PI, m * PI); //creates a smiling mouth
} else if(mouthType == 2){ //creates a frowning mouth
strokeWeight(1);
fill(0);
arc(midX , ((height / 2) + (faceHeight * .375)), mouthWidth, mouthHeight, m * PI, m * TWO_PI,);
} else if(mouthType == 3) { //creates a neutral line mouth
strokeWeight(3);
line(m * (midX - (mouthWidth / 2)), ((height / 2) + (faceHeight * .25)), m * (midX + (mouthWidth / 2)), ((height / 2) + (faceHeight * .25)));
}
if(noseType == 1){ //creates a half circle nose
strokeWeight(1);
fill(255);
arc(((width * (51/100))), (height * (51/100)), (faceWidth / 4), (faceHeight / 6), m * HALF_PI, m * PI + HALF_PI);
}
else if(noseType == 2){ //creates a triangle nose
strokeWeight(1);
fill(255);
triangle(tx1, ty1, m * tx2, ty2, m * tx3, ty3);
}
else if(noseType == 3){ //creates a line nose
strokeWeight(3);
line(midX, m * ((height / 2) + (faceHeight / 8)),midX, ((height / 2) - (faceHeight / 8)));
}
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
browLength = random((eyeSize * .95), (eyeSize * 1.35));
eyeColor = floor(random(1,10)); //chooses one of the eye color combinations
mouthType = floor(random(1,4)); //choose the mouth type
noseType = floor(random(1,4)); //chooses the nose type
r = random(255); //changes eyebrow color
m = (random(.95,1.05));
skinColor = floor(random(1,8)); //changes the skin color
}I had a lot of fun with this project. It was interesting trying to come up with more and more ways to make the face different. One of my early troubles was a problem with my eye colors. I was using “if(eyeColor == x)…” and eyeColor = “random(1,10)” but most clicks would end with no irises at all. I then realized the problem was that random() gives a floating point number and I was asking for a specific integer, so the odds of getting one were super low, so I changed the line to “floor(random(1,10))” which thankfully fixed it.