Making the Eyes of an Image Follow The Mouse

Ben Tasker

2024-11-07 19:45

Following a discussion on Fedi, I ended up looking up some javascript that I previously wrote to have webpage objects "follow" the mouse - the idea being to repurpose it so that the eyes in an image could look at wherever the mouse pointer is (or, on mobile, where the user last tapped).

That code turned out to be something of a hurriedly written car-crash, so I decided to ignore it.

This post talks through the process of having the eyes of an image look at the mouse's cursor (as well as some other ways that we can have images react to mouse position).

Choosing an Image

It almost goes without saying: you need an image that you want to add eyes to.

There are a few things that you can do here to make your life easier

Eyes should be the same size
Profile should be relatively flat on

They're not hard criteria, it's perfectly possible to work on an image that doesn't satisfy them, but it is more difficult.

For the purposes of this post, I'll use my current fediverse avatar:

Photo of a racoon staring down the lens

Cutting Eye Holes

In almost all cases, you'll want to position eyes behind the image (and therefore behind eyelids etc), otherwise you end up with more of a googley eye effect:

Googley eyes have their place (everywhere!) but aren't always what you want.

Use your image editor of choice (I use GIMP) to give the image a transparent background and then cut the eyes out:

Screenshot of the racoon image in GIMP with the eyes cut out

Save the image as a PNG (use a different format if you want, but it must support transparency).

HTML

The markup is fairly simple, as we just need to

Embed the image
Provide a canvas for the eyes to be drawn on
Provide a fallback image (so that users without javascript don't get an eyeless face staring at them)

Actually positioning the eyes requires a bit of trial and error, so to begin with, we just drop them into the page.

Create a HTML file with some supporting CSS.

<html>
<head>

<style type="text/css">
/* Image needs to have a fixed width */
img {width: 600px;}

#image_wrap {
    position: relative;
}

#image_wrap canvas {
    position: absolute;
    /* We'll mess with these soon */
    left: 390px;
    top: 115px;

    /* Make the eyeballs white */
    background-color: white;

    /* Put the eyes on top for now */
    z-index: 1000;
}

#image_wrap img {
  position: relative;
  z-index: 50;
}
</style>
</head>

Note: the CSS provides an absolute size for the image - you need to do this because the javascript which animates the eyes draws the eyes using absolute sizes.

Add the image embeds and a canvas to draw the eyes on

<body>
<div id="image_wrap" style="position: relative">
    <noscript>
      <!-- Version with normal eyes -->
      <img src="racoon.jpg" />
    </noscript>
    <!-- Transparent and canvas are hidden by default-->
    <img src="racoon_no_eyes.png" style="display: none" id="noeyes" />
    <canvas id="canvas" width="300" height="150" style="display: none"></canvas>
</div>

Next, we add some config to define the eyes:

<script type="text/javascript">
// Set the config
const eye = {
  // limits of movement
  limMin: 0.0,
  limMax: 1.1,

  // Left eye position
  leye_left: 120,
  leye_top: 80,
  leye_radius: 20,
  leye_iris: 11,
  leye_pupil: 5,  

  // Right eye position
  reye_left: 70,
  reye_top: 80,
  reye_radius: 20,
  reye_iris: 11,
  reye_pupil: 5,

  pupil_colour: "black",
  iris_colour: "#ff6699",

  // Set bounds on how far away the mouse is
  // considered to be
  //
  // If your eye holes aren't perfectly round, you may
  // need to adjust these to prevent one of the irises
  // rolling out of view
  //
  // These are are all relative to the image
  max_up: 125,
  max_down: 40
};
</script>

Finally embed the script to trigger it:

<!-- Include the script to apply the eyes -->
<script type="text/javascript" src="https://projectsstatic.bentasker.co.uk/MISC/animating_eyes/eyes.js"></script>
</body>
</html>

Note: rather than (re)figuring out the maths of translating relative positions into an angle for the eyes to move to, I found an existing script (licensed under CC BY-SA 4.0) and adjusted it to better suit my needs.

Opening the file in a browser should now display the eyes, though (predictably) they're in the wrong location

Screenshot of the eyeless racoon with eyes visible next to its face

The next step is to tweak the CSS to move the canvas until it sits behind the eye holes.

I opened Firefox's developer tools and tweaked the CSS until the canvas was about where I wanted it:

Positioning the canvas behind the racoons face - I've used developer tools to work out the best location

Then, I updated the CSS in the file to use the same values

#image_wrap canvas {
    position: absolute;
    /* We'll mess with these soon */
    left: 150px;
    top: 115px;

    /* Put the eyes on top for now */
    z-index: 1000;
}

With the canvas in roughly the right place, we now need to position the eyes.

They're located in much the same way, using a left & top coordinate that's relative to the edge of the canvas

const eye = {
  // limits of movement
  limMin: 0.0,
  limMax: 1.1,

  // Left eye position
  leye_left: 105,
  leye_top: 70,
  leye_radius: 20,
  leye_iris: 11,
  leye_pupil: 5,  

  // Right eye position
  reye_left: 207,
  reye_top: 70,
  reye_radius: 20,
  reye_iris: 11,
  reye_pupil: 5,

  pupil_colour: "black",
  iris_colour: "#ff6699",

  // Used to set bounds on how far away the mouse is
  // considered to be
  //
  // These are are all relative to the image
  max_up: 125,
  max_down: 40
};

The aim is to get the centre of each eye where the centre of the character's eyeball would be. If needed, you can also increase or decrease the radius of the eye but it works best if you can keep the two the same (otherwise one iris will move more than the other)

Once you think you're got the eyes positioned, update the CSS again to reduce the z-index of the canvas, moving the eyes behind the image

#image_wrap canvas {
    position: absolute;
    /* We'll mess with these soon */
    left: 390px;
    top: 115px;

    /* Put the eyes behind the image */
    z-index: 1;
}

A refresh will soon tell you whether you've positioned things correctly - if they're not quite right, it'll start to look like something out of South Park:

Screenshot of racoon, the eys are out of alignment

In this case, the right eye needs moving up (if you look, you can even see the outline of the circle) and the left could probably do with moving over a bit more.

The aim is to get to the point that each iris can disappear behind the edges but only a little:

Taking Things Further

It's not just eyes that can be animated.

The script works by calculating the position of the cursor relative to the canvas and then (re)drawing the eyes based on some slightly more complex calculations.

Calculating the mouse's relative position is quite easy though:

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

    // Get location of the image
    const bounds = canvas.getBoundingClientRect();

    // mouse position
    mouse_x = e.pageX
    mouse_y = e.pageY

    // If we want to know the distance
    // we can subtract bounds from mouse
    difference_x = mouse_x - bounds.left;
    difference_y = mouse_y - bounds.top;

    // Alternatively, we can check whether it's above or below
    above = (mouse_y >= bounds.top)

    // etc ...
    });

We can call getBoundingClientRect() on other elements too, so our calculations don't necessarily need to be tied to a canvas.

Reactive CSS Changes

This means that we can, for example, change an image's CSS attributes based upon mouse location:


<img id="rac" src="racoon.jpg" />
<script type="text/javascript">

addEventListener("mousemove",e => {

    // Get location of the image
    const ele = document.getElementById("rac");
    const bounds = ele.getBoundingClientRect();

    // how far away?
    difx = e.pageX - bounds.left;
    difrx = e.pageX - bounds.right;
    dify = e.pageY - bounds.top;
    difby = e.pageY - bounds.bottom;

    // Is the user too close?
    if ((difx > -20 && difrx < 20) || (dify > -20 && difby < 20)){
       // yes, look mean
       ele.style.filter = "invert(1)";
    }else{
       // No, look normal
       ele.style.filter = "invert(0)";
    }
});

</script>

This uses CSS's invert() to invert the colours of the image if the mouse gets too close:

Of course, CSS isn't the only thing that we can change - we could also update the src attribute to change the image entirely, or make some other element visible (perhaps, to display some teeth).

Follow The Cursor

It's also possible to have an image quite literally follow the cursor, tracking it around the page:

<style type="text/css">
#homer_gif {
  width: 30px;
  position: absolute;
  z-index: 5000;
}
</style>

<img src="homer_shrunk.gif" alt="gif of Homer simpson" id="homer_gif">

<script type="text/javascript">
addEventListener("mousemove",e => {
    // Get location of the image
    const ele = document.getElementById("homer_gif"); 
    // Position to be alongside the mouse
    ele.style.top = e.pageY;
    ele.style.left = e.pageX - 30;
    });
</script>