How do you make the eyes move and follow the cursor? I honestly dont know what to do from here

user_14898661 0
Viewed 763

Am I meant to draw the eyes in an alternative way for it to follow the cursor? Please help :) I am completely lost from here and have tried online solutions but they all require css in which my code doesn't. I want to run all of this purely from javascript, any tips?

function drawEyes() {
  const c = document.getElementById("canvasEyes")
  const ctx = c.getContext('2d');

  //left eye
  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, Math.PI * 2, false);
  ctx.stroke();

  //iris
  ctx.beginPath();
  ctx.arc(75, 75, 30, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.fillStyle = "black";
  ctx.fill();
  //pupil
  ctx.beginPath();
  ctx.arc(75, 75, 15, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.fillStyle = "blue";
  ctx.fill();

  //right eye
  ctx.beginPath();
  ctx.arc(225, 75, 50, 0, Math.PI * 2, false);
  ctx.stroke();
  //iris
  ctx.beginPath();
  ctx.arc(225, 75, 30, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.fillStyle = "black";
  ctx.fill();
  //pupil
  ctx.beginPath();
  ctx.arc(225, 75, 15, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.fillStyle = "blue";
  ctx.fill();
}
html5-canvas canvas javascript
1 Answers

Basic 2D eyes that follow mouse

The eyes follow mouse by scaling the mouse coordinates to the range of motion that the iris & pupil have within the radius of the eye.

The lookat position is relative to the top left of the canvas and assumes that the eyes are at the center of the canvas.

The scaled lookat position is then set relative to the canvas center (center of both eyes)

To prevent the iris & pupil from being drawn outside the eye use the canvas clip function to clip the iris & pupil if outside the circles of the eye.

More details

It is possible to add more details

Consider adding shading, highlights, eyelids, blink, etc.. to give the animation more depth and life, for instance...

Spheres

Eyes are spheres, you can use ellipses to draw the iris & pupil, Flattening the ellipses of the iris & pupil as they get near the edge, also rotate the ellipse in the direction of the mouse. This will make the eyes look rounder in the 3rd dimention.

Example

Basic 2D eyes. See comments for details

const ctx = canvas.getContext("2d");

// Object to hold mouse coords
const lookat = {x: 150, y: 75};
// details need to make eye look at mouse coords
const eye = {
  radius: 50,
  iris: 30,
  // limits of movement
  limMin: -0.1,
  limMax: 1.1,
};

// add mouse move listener to whole page
addEventListener("mousemove",e => {

    // make mouse coords relative to the canvas  ignoring scroll in this case
    const bounds = canvas.getBoundingClientRect();
    lookat.x = e.pageX - bounds.left;// - scrollX;
    lookat.y = e.pageY - bounds.top;// - scrollY;    
   
    ctx.clearRect(0, 0, 300, 150);
    drawEyes(lookat);
});


drawEyes(lookat);
function drawEyes(lookat) {
  var {x,y} = lookat;
  
  // normalise lookat range from 0 to 1 across and down canvas
  x /= canvas.width;
  y /= canvas.height;
  
  // limit eye movement to -0.1 to 1.1  or what ever you prefer
  x = x < eye.limMin ? eye.limMin : x > eye.limMax ? eye.limMax : x;  
  y = y < eye.limMin ? eye.limMin : y > eye.limMax ? eye.limMax : y;  
  
  // move lookat so that 0.5 is center
  x -= 0.5;
  y -= 0.5;
  
  // get range of movement of iris
  const range = (eye.radius - eye.iris) * 2;
  
  // scale the lookats to the range of movement
  x *= range;
  y *= range;
  
  

  // draw outer eyes  left, right
  ctx.beginPath();
  ctx.arc(75, 75, eye.radius, 0, Math.PI * 2, false);
  ctx.moveTo(225 + eye.radius, 75);
  ctx.arc(225, 75, eye.radius, 0, Math.PI * 2, false);
  ctx.stroke();
  
  // use eyes to create a clip so iris does not draw outside the eye.
  // first save canvas state so clip can be turned off at end
  ctx.save();
  // turn on clip which will use the two circles currently the active path
  ctx.clip();
  
  // draw  iris & pupil are offset by x,y within the clip

  //iris left, right
  ctx.fillStyle = "blue";
  ctx.beginPath();
  ctx.arc(75 + x, 75 + y, eye.iris, 0, Math.PI * 2, false);
  ctx.moveTo(225 + x + eye.iris, 75 + y);
  ctx.arc(225 + x, 75 + y, eye.iris, 0, Math.PI * 2, false);
  ctx.fill();  
  
  //pupil left, right
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(75 + x, 75 + y, 15, 0, Math.PI * 2, false);
  ctx.moveTo(225 + x + 15, 75 + y);
  ctx.arc(225 + x, 75 + y, 15, 0, Math.PI * 2, false);
  ctx.fill();
  
  // turn the clip off by restoring canvas state 
  ctx.restore();
}
<canvas id="canvas" width="300" height="150"></canvas>

user_38777260
Related