Monday, March 16th, 2009

JavaScript version of XEyes

Category: Fun, JavaScript

Let’s start out the week with a bit of fun. David King has a little “port” of the good ‘ole xeyes into JavaScript and it is a surprisingly small amount of code.

He goes into how it all works in his article, covering the code like this:


  1. // Get the distance with pythagoras
  2. var difX = mouseX - eyeX;
  3. var difY = mouseY - eyeY;
  4. var dist = Math.sqrt ((difX * difX) + (difY * difY));
  6. // Now get the angle of the dangle
  7. var dTan = Math.atan2 (difX, difY);
  9. // Now we get to work out where the pupil should be
  10. var maxDist = 600;
  11. dist = Math.sin ((dist > maxDist ? 1 : dist / maxDist));
  12. var newX = Math.round (Math.sin (dTan) * dist);
  13. var newY = Math.round (Math.cos (dTan) * dist);

Happy Monday.

Posted by Dion Almaer at 7:48 am

3.4 rating from 38 votes


Comments feed TrackBack URI

Reminds me of my early days on the Mac.

Here an adaptation where the eyes move 5 times as smooth thanks to subpixel-animation:

Comment by Lon42 — March 16, 2009

I haven’t seen someone do this in JavaScript in about ten years. At least it has a smaller code footprint this time, I guess.

Comment by shawn — March 16, 2009

Old School baby!

@Lon42 – I didn’t know the browsers were up to that! Kudos!

Comment by oopstudios — March 16, 2009

I remember seeing xeyes implemented in JS a long time ago, without canvas. Couldn’t find a date, but it was several years back.

Comment by excalo — March 17, 2009

Leave a comment

You must be logged in to post a comment.