In my process of making this face, I learned a lot about using variables to code. I also experimented a lot with “else” and “if” to produce what I want to happen.
var eyeSize = 30;
var faceWidth = 260;
var faceHeight = 320;
var noseX = 275;
var noseY = 270;
var noseSize = 15;
var faceX = 300;
var faceY = 265;
var eyecolor = 255;
var pupilcolor = 0;
var lefteyeX = 250;
var eyeY = 200;
var righteyeX = 350;
var leftpupilX = 250;
var rightpupilX = 350;
var pupilY = 200;
var pupilWidth = 10;
var pupilHeight = 10;
var browHeight = 160;
var leftbrowX = 220;
var rightbrowX = 330;
var browY = 160;
var leftbrowWidth = 270;
var rightbrowWidth = 380;
var earHeight = 45;
var earY = 250;
var leftearX = 150;
var rightearX = 450;
var mouthX = 300;
var mouthY = 350;
var mouthSize = 45;
var r = 255;
var g = 241;
var b = 209;
function setup() {
createCanvas(640, 480);
// background(220);
// noStroke(0);
}
function draw() {
background(227, 103, 84);
noStroke(0);
fill(255, 241, 209); //face Q: HOW DO I USE VARIABLES FOR THIS?
ellipse(faceX, faceY, faceWidth, faceHeight);
fill(eyecolor, eyecolor, eyecolor); //left eye
ellipse(lefteyeX, eyeY, eyeSize, eyeSize);
fill(eyecolor, eyecolor, eyecolor); //right eye
ellipse(righteyeX, eyeY, eyeSize, eyeSize);
fill(pupilcolor, pupilcolor, pupilcolor); //right pupil
ellipse(rightpupilX, pupilY, pupilWidth, pupilHeight);
if (mouseX < width*0.33) { // HOW DO I CHANGE FACE COLOR?
fill(255, 0, 0);
} else if (mouseX > width*0.66) {
fill(0, 255, 0);
} else {
fill(0, 0, 255);
}
fill(pupilcolor, pupilcolor, pupilcolor); //left pupil
ellipse(leftpupilX, pupilY, pupilWidth, pupilHeight);
if (mouseX < width*0.33) { // HOW DO I CHANGE FACE COLOR?
fill(255, 0, 0);
} else if (mouseX > width*0.66) {
fill(0, 255, 0);
} else {
fill(0, 0, 255);
}
circle(mouthX, mouthY, mouthSize); // mouth
stroke(0, 0, 0); // left eyebrow
line(220, 160, 270, 160);
stroke(0, 0, 0); // right eyebrow
line(330, 160, 380, 160);
fill(255, 241, 209); // left ear
circle(150, 250, 45);
fill(255, 241, 209); // right ear
circle(450, 250, 45);
fill(0); // nose
ellipse(275, 270, 15, 15);
ellipse(275 + 20, 270, 15, 15);
}
function mousePressed() {
faceWidth = random(260, 300);
faceHeight = random(320, 400);
eyeSize = random(10, 50);
noseX = random(275, 300);
noseY = random(270, 300);
leftbrowWidth = random(270, 300);
rightbrowWidth = random(380, 400);
}