playing around with Processing JS

eyes.p5.js

let e1, e2
let h = 0
let s = 0
let b = 0
let hue = 0

let minHue = 0
let maxHue = 360
let direction = +1

function setup() {
  createCanvas(820, 600)
  noStroke()
  
  colorMode(HSB);
  // HSB colormode stands for hue, saturation, brightness
  // hue goes from 0 (red) - 360 (also red) 180 is cyan
  // saturation goes from 0 - 100 (black and white to color)
  // brightness goes from 0 - 100 (black to white)
  
  e1 = new Eye(164, 185, 80);
  e2 = new Eye(284, 185, 80);
}

function draw() {
  background(h, s, b)
  
  h++;
  if( h >= 360){
   h = 0; 
  }
  
  e1.update(mouseX, mouseY);
  e2.update(mouseX, mouseY);
  e1.display();
  e2.display();
}

function Eye(tx, ty, ts) {
  this.x = tx;
  this.y = ty;
  this.size = ts;
  this.angle = 0;

  this.update = function(mx, my) {
    this.angle = atan2(my - this.y, mx - this.x);
  };

  this.display = function() {

    hue = hue + direction
    
    if (hue >= maxHue || hue < minHue) {
      direction = direction * -1
    }
    
    
    
    push();
    translate(this.x, this.y);
    fill(0, 0, 100);
    ellipse(0, 0, this.size, this.size);
    rotate(this.angle);
    // fill(random(0, 50), 100, 100);
    fill(hue, 100, 100);
    ellipse(this.size / 4, 0, this.size / 2, this.size / 2);
    fill(0, 0, 0);
    ellipse(this.size / 4 + (this.size / 32) , 0, this.size / 4, this.size / 4);
    pop();
  };
}