The main challenges in constructing my face were primarily around the placement of each element and how to control their heights so pieces didn’t overlap in ugly ways or stick out, but also to keep the overall identity of the face. I wanted each face to seem a little larger than life, while generating a completely new and cartoonish, albeit simple, face every time. I wanted simple elements based off of the original code, but that used that basic template given to us to create really weird and outrageous faces.
cowboyedit
var eyeSize = 20; ////how large the outside eyes get
var faceWidth = 100; ////width of face
var faceHeight = 150; ////height of face
var glasses = 40 ////size of glasses lens
var hatWidth = 125 ////width of the brim
var hatHeight = 35 ////height of the brim
var hatX = 25 ////position of the top corner of the rectangular portion of the hat
var hatTall = 150 ////length of the rectangular portion of the hat
var bandannaSize = 80 ///width of the bandanna
var bandannaY = 380 ///bottom corner of the bandanna
function setup() {
createCanvas(640, 480);
}
function draw() {
background(180);
var hatSize = hatX * 2 ////determines width of the hat based on distance from the center
var eyeLX = width / 2 - faceWidth * 0.25; ////size of left eye
var eyeRX = width / 2 + faceWidth * 0.25; ////size of right eye
var noseLength = 40 ////furthest position of nose
var noseX1 = (width / 2, height / 2) - (.35 * faceWidth) ////first x of nose triangle
var noseY1 = height / 2 + faceHeight / 10 ////first y of nose triangle
var noseX2 = (width / 2, height / 2) + (.75 * faceWidth) ////2nd x of nose triangle
var noseY2 = height / 2 + faceHeight / 10 ////2nd y of nose triangle
var noseX3 = faceWidth / 2 ////x position of noise point
var noseY3 = (height / 2) + noseLength ////height of nose point
var bandanna1 = (width / 2) - bandannaSize ////right x of bandanna, based on distance from center
var bandanna2 = (width / 2) + bandannaSize ///left x of bandanna, based on distance from center
var bandannaLength = 400 ////y of bandanna point
rect((width / 2) - hatX, 4, hatSize, hatTall) ////rectangle of hat
ellipse(width / 2, height / 2, faceWidth, faceHeight); ////face
triangle(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3) ////nose
ellipse(eyeLX, height / 2, eyeSize, eyeSize); /////left eye
ellipse(eyeRX, height / 2, eyeSize, eyeSize); /////right eye
if (faceWidth > 200) { ////condition for glasses when face is wide
line(eyeRX, height / 2, eyeLX, height / 2)
ellipse(eyeRX, height / 2, glasses)
ellipse(eyeLX, height / 2, glasses)
} else { ////otherwise pupils of eyes
ellipse(eyeRX, height / 2, 4)
ellipse(eyeLX, height / 2, 4)
}
ellipse(width / 2, (height / 2) - ((faceHeight / 2) * .85), hatWidth, hatHeight); /////hat brim
triangle(bandanna1, bandannaY , bandanna2, bandannaY, width / 2, bandannaLength) ////bandanna
noLoop()
}
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.
redraw()
faceWidth = random(75, 280);
faceHeight = random(75, 280);
eyeSize = random(10, 30);
glasses = random(40, 65)
hatWidth = random(120, 240)
hatHeight = random(40, 80)
hatX = random(10, 40)
hatTall = random(160, 280)
bandannaSize = random(100, 300)
bandannaY = random(260, 300)
bandannaLength = random(400, 550)
}