Monday, March 16th, 2009
JavaScript version of XEyes
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:
JAVASCRIPT:
// Get the distance with pythagoras
var difX = mouseX - eyeX;
var difY = mouseY - eyeY;
var dist = Math.sqrt ((difX * difX) + (difY * difY));
var difX = mouseX - eyeX;
var difY = mouseY - eyeY;
var dist = Math.sqrt ((difX * difX) + (difY * difY));
// Now get the angle of the dangle
var dTan = Math.atan2 (difX, difY);
// Now we get to work out where the pupil should be
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);
Happy Monday.
Reminds me of my early days on the Mac.
Here an adaptation where the eyes move 5 times as smooth thanks to subpixel-animation:
http://quento.q42.net/eyefollowyou/index.html
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.
Old School baby!
@Lon42 – I didn’t know the browsers were up to that! Kudos!
I remember seeing xeyes implemented in JS a long time ago, without canvas. Couldn’t find a date, but it was several years back.
http://javascript.internet.com/image-effects/xeyes.html