let eyeSize = 10;

let smile = 301;

let bgColor = 0;

let eyeColor = 0;

let eyeColor2 = 175;

let left_eyeColor = 255;

let smileColor = 50;

​

function setup() {

  //dynamic canvas that is created depending on size of window

  createCanvas(windowWidth, windowHeight);

  //This color mode is Hue, Saturation, and Brightness: https://p5js.org/reference/#/p5/colorMode. I use this to replicate the color wheel. 

  colorMode(HSB, 360, 100, 100, 100);

  background(bgColor);

}

​

function draw() {

  //placing background color in draw loop refreshes; using variable changes it over time

  //background(bgColor, 1);

  //Prints Mouse coordinates in consule

  print("x:", mouseX, "y:", mouseY, "eyeSize:", eyeSize);

  //Removes stroke or outline from shapes

  noStroke();

  // left eye

  // indicates color of shape. If there is one value, it will be black/grey/white scale (pure black = 0; pure white = 255)

  fill(left_eyeColor);

  //indicates where the x, y coordinates are located. 

  rectMode(CENTER);

  //rect(150, 100, 100, 10)

  rect(mouseX, mouseY, 100, 10);

  //right eye

  //changes the size of the eye based on mouse placement

  eyeSize = map(mouseX, 0, width, 10, 100);

  fill(eyeColor, 100, 100); 

  ellipse(500, 100, eyeSize, 100);

  fill(eyeColor2, 100, 100);

  ellipse(500, 100, 100, eyeSize);

    fill(eyeColor, 100, 100); 

  ellipse(200, 100, eyeSize, 100);

  fill(eyeColor2, 100, 100);

  ellipse(200, 100, 100, eyeSize);

  // mouth

  fill(smileColor, 100, 100);

  quad(100, 300, 250, smile, 500, smile, 600, 300);

  //increases

   bgColor++;

   smile++;

   eyeColor++;

   eyeColor2--;

   left_eyeColor--;

   smileColor = random(360);

   if (smile >= height){

     smile = 301;

   }

  if (bgColor >= 255){

    bgColor = 0;

  }

  if (eyeColor >= 360){

    eyeColor = 0;

  }

  if (eyeColor2 <= 0){

    eyeColor2 = 360;

  }

  if (left_eyeColor <= 0){

    left_eyeColor = 255;

  }

}