sketch
//Joseph Kim
//Section D
var eyeWidth = 45;
var eyeHeight = 40;
var faceWidth = 200;
var faceHeight = 260;
var mouthWidth = 60;
var mouthHeight = 30;
let eColor = 180;
//eyes
let fColor = 80;
//face
let bgColor = 0;
//background
let mColor = 120;
//mouth
let earColor = 40;
//ear
let hColor = 20;
//hair
let bColor = 0;
//eyebrow
let iColor = 0;
//iris
function setup() {
createCanvas(640, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(bgColor);
noStroke();
fill(fColor);
rect((width / 2) - (faceWidth / 2), (height / 2) - (faceHeight / 2), faceWidth, faceHeight / 2);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
//face
fill(eColor);
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
arc(eyeLX, (height / 2) - 10, eyeWidth, eyeHeight, 0, PI, CHORD);
arc(eyeRX, (height / 2) - 10, eyeWidth, eyeHeight, 0, PI, CHORD);
//eyeball
fill(earColor);
var earLX = (width - faceWidth) / 2;
var earRX = width - ((width - faceWidth) / 2);
arc(earLX, height / 2, 30, 30, PI / 2, radians(270), CHORD);
arc(earRX, height / 2, 30, 30, radians(270), PI / 2, CHORD);
//ears
stroke(bColor);
strokeWeight(5);
strokeCap(SQUARE);
var eyebrowLX = width / 2 - faceWidth * 0.35;
var eyebrowRX = width / 2 + faceWidth * 0.35;
line(eyebrowLX, (height / 2) - faceHeight / 6, eyebrowLX + (faceWidth * 0.2), (height / 2) - faceHeight / 6);
line(eyebrowRX, (height / 2) - faceHeight / 6, eyebrowRX - (faceWidth * 0.2), (height / 2) - faceHeight / 6);
//eyebrow
fill(iColor);
noStroke();
circle((width / 2) - (faceWidth * 0.25), height / 2, 10);
circle((width / 2) + (faceWidth * 0.25), height / 2, 10);
//iris
noStroke();
fill(hColor);
arc((width - faceWidth) / 2, ((height - faceHeight) / 2), faceWidth, 90, 0, PI / 2, PIE);
arc(width - ((width - faceWidth) / 2), ((height - faceHeight) / 2), faceWidth, 90, PI / 2, PI, PIE);
//hair
noStroke();
fill(mColor);
arc((width / 2), (height / 2) + (faceHeight / 4), mouthWidth, mouthHeight, 0, PI);
//mouth
}
function mousePressed() {
faceWidth = random(120, 300);
faceHeight = random(200, 400);
eyeWidth = random(20, 70);
eyeHeight = random(40, 70);
mouthWidth = random(10, 100);
mouthHeight = random(10, 80);
mouthColor = random(30, 200);
eColor = color(random(255), random(255), random(255));
fColor = color(random(255), random(255), random(255));
bgColor = color(random(255), random(255), random(255));
mColor = color(random(255), random(255), random(255));
earColor = color(random(255), random(255), random(255));
hColor = color(random(255), random(255), random(255));
bColor = color(random(255), random(255), random(255));
iColor = color(random(255), random(255), random(255));
}
I first began with the sample code provided on the website. Then, I began customizing the shapes, and added facial features that I thought would be interesting. I found that using variables instead of specific coordinate points are actually easier to work with because I don’t have to be attentive of decimal points. A good part of my process was from trial and error, learning from mistakes. In order to add more visual interest, I had to do some research on how to apply variable color.