Erin Lim – Project 02 – Variable Face

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.

Erin Lim – Project 02

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);
}