let darkBlue = '#2A1E46'

var eyeWhite, eyeBall, eyeShine, ballAngle, shineAngle

let easing = 0.25

​

function setup() {

  createCanvas(windowWidth, windowHeight)

  // eyes

  eyeWhite = {

    x: width / 2,

    y: height / 2,

    w: 250,

    h: 250

  }

  eyeBall = {

    x: width / 2,

    y: height / 2,

    w: 75,

    h: 150

  }

  eyeShine = {

    x: width / 2 - 35,

    y: height / 2 - 35,

    w: 40,

    h: 22.5

  }

  // font

  textFont('Space Mono');

  textSize(64)

  textAlign(CENTER, CENTER)

  noLoop()

}

​

function draw() {

  // background

  background(skyBlue);

  fill(darkBlue)

  text('eye can see', width/2, 40)

}

​

function mouseMoved() {

  // eye white

  fill(255)

  noStroke()

  ellipse(eyeWhite.x, eyeWhite.y, eyeWhite.w, eyeWhite.h)

  // angle

  angle = atan2(mouseY - eyeBall.y, mouseX - eyeBall.x)

  // eye ball

  fill(darkBlue)

  noStroke()

  // ellipse(eyeBall.x, eyeBall.y, eyeBall.w, eyeBall.h)

  ellipse((eyeBall.x + (eyeBall.w / 1.5) * cos(angle) * easing), 

          (eyeBall.y + (eyeBall.y / 4) * sin(angle) * easing), 

          eyeBall.w, 

          eyeBall.h)

​

  // eye shine

  fill(255)

  ellipse((eyeShine.x + (eyeShine.w / 1.5) * cos(angle) * easing), 

          (eyeShine.y + (eyeShine.y / 4) * sin(angle) * easing), 

          eyeShine.w, 

          eyeShine.h)

  noStroke()

}