What is the mathematical explanation behind this implementation of simulating eyeballs roll in eyes?

Question

I want to simulate eyeballs roll in eyes and I have found and forked this implementation in codepen.io. This is exactly what I need.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var border = 10;
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = 40;

var radiusEye = 12;

var faceCenterX = centerX;
var faceCenterY = border+radius + 60;

var radiusEyeIn = 6;

var eyeYPosition = faceCenterY-8
    
var reyedx = faceCenterX+(radiusEyeIn/2)+13;
var reyedy = eyeYPosition;

var leyedx = faceCenterX-(radiusEyeIn/2)-13;
var leyedy = eyeYPosition;

var eyesgap = 4;

var eyeXGap = (radiusEye/2)+9;

var reyedxafter = reyedx;
var reyedyafter = reyedy;

var leyedxafter = leyedx;
var leyedyafter = leyedy;



function drawscreen(){

  ctx.beginPath();
  ctx.arc(faceCenterX, faceCenterY, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(100,100,100,0.5)';
  ctx.fill();
  ctx.stroke();

  var radiusEye = 12;
  ctx.beginPath();
  ctx.arc(faceCenterX-eyeXGap, eyeYPosition, radiusEye, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(255,255,255,1)';
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(faceCenterX+eyeXGap, eyeYPosition, radiusEye, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(255,255,255,1)';
  ctx.fill();
  ctx.stroke();
}

function draweyes() {
  
  ctx.beginPath();
  ctx.arc(reyedxafter, reyedyafter, radiusEyeIn, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(0,0,0,1)';
  ctx.fill();
  
  ctx.beginPath();
  ctx.arc(leyedxafter, leyedyafter, radiusEyeIn, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(0,0,0,1)';
  ctx.fill();
}

//$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

function mouseMove(e) {
        var mouseX = e.pageX - this.offsetLeft - faceCenterX;
        var mouseY = e.pageY - this.offsetTop - eyeYPosition;
  
        var ratioX = Math.abs(mouseX)/(Math.abs(mouseX)+Math.abs(mouseY));
        var ratioY = Math.abs(mouseY)/(Math.abs(mouseX)+Math.abs(mouseY));
  
        
        if(mouseX > 0){
          reyedxafter = reyedx + (ratioX*eyesgap);        
        } else {
          reyedxafter = reyedx - (ratioX*eyesgap);
        }
        
        if(mouseY > 0){
          reyedyafter = reyedy + (ratioY*eyesgap);
        } else {
          reyedyafter = reyedy - (ratioY*eyesgap);         
        }
  
        if(mouseX > 0){
          leyedxafter = leyedx + (ratioX*eyesgap);
        } else {
          leyedxafter = leyedx - (ratioX*eyesgap);
        }
  
        if(mouseY > 0){
          leyedyafter = leyedy + (ratioY*eyesgap);
        } else {
          leyedyafter = leyedy - (ratioY*eyesgap);
        }
  
        ctx.clearRect(0, 0, c.width, c.height);
        drawscreen();
        draweyes();
}

function init() {
    //c.addEventListener('mousedown', mouseDown, false);
   // c.addEventListener('mouseup', mouseUp, false);
    c.addEventListener('mousemove', mouseMove, false);
    drawscreen();
    draweyes();
}

init();

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;">
</canvas>

I can just use this one but I don't understand the mathematical explanation behind this solution. I can only think of limiting the movement of the eyeballs in the eyes. Why do I have to do it like this one? What is the purpose of calculating ratioX and ratioY? Is there a simpler way to do similar simulation?

Answer 1

It's much easier to just get the vectors of the point between the two eyes and the mouse, subtract the face vector from the mouse and normalize the result. The vector you get is the position of the pupils relative to the center of the eyes.

normalize(mouse - face)

You'll need a vector library for this. Without vectors:

x = mouseX - faceX
y = mouseY - faceY
mag = √(x² + y²)
if mag > 0 then
    x /= mag
    y /= mag