Javascript Eyes That Follow

A slight break from the "ask me" normality in that this is no-ones question, no-one asked me:

Hey dude - how do I make some eyes that follow my mouse around the page? I just need that action.

No, that never happenned. I do, however just fancy a bit of a play! So I'll explain some simple trigonometry and a little trick we can use to make them look believable...

Simple trigonometry

Assuming that we know the mouse position and the position of our eye element, we can easily figure out:

• The angle between the mouse and the eye
• The distance between the mouse and the eye

The distance...

...is the easiest of trig calculations - a lovely fella called Pythagoras tells us that the hypotenuse (in our case, the distance) is defined by:

The square of the hypotenuse of a right triangle is equal to the sum of the squares on the other two sides

And to go by the diagram above this is:

var difX = mouseX - eyeX;
var difY = mouseY - eyeY;
var dist = Math.sqrt ((difX * difX) + (difY * difY));

The angle...

...is somewhat more complex to calculate than the distance. Luckily javascript (and 99% of all languages) have the arctan function built in, so we don't have to think about it at all:

// Using the difX and difY variables from above:
var dTan = Math.atan2 (difX, difY);

Putting it into action

You might be wondering why we calculated the angle and the distance, and the answer is that knowing all of this information lets us calculate where to place the pupil to make it look like a realistic eye. Assuming this all makes sense:

• If your mouse is directly over the eye, it will be central.
• If your mouse is close to the eye, it will shift a little.
• If your mouse is far away from the eye, it will shift a lot.

then the process for calculating the eye position is basically what we did before in reverse!

// Again, using the variables calculated above
var maxDist = 600;
dist = Math.sin ((dist > maxDist ? 1 : dist / maxDist));
var newX = Math.round (Math.sin (dTan) * dist);
var newY = Math.round (Math.cos (dTan) * dist);

The reference to "600" is the limit - that is, anything further than 600 pixels we treat as "fully far away".

We can use these new values to position our pupils in whatever manner we choose. My eyes.js file allows you to create these things without much thought at all... read on!

Using my lovely eyes.js file!

I've spent a little extra time (as ever) making a nice javascript file that you can use to make eyes wherever you go. Use it like so:

<script type="text/javascript" src="eyes.js"></script>
<div id="myEye" style="width: 100px; height: 100px; background: url('white.png') center center no-repeat;">
  <img src="pupil.png" width="30" height="30" />
</div>
<script type="text/javascript">
  EYES.follow ('myEye');
</script>

Just make sure that:

• Your container is square
• Your image is square
• You use pngs (or gifs) for transparency

If you want more images or examples, please browse this folder to see what you can find!