PointerPointer Clone for Reddit (untried / untested, probably buggy)

PonterPointerClone.js

// usage: var PPC = new PointerPointerClone();
// you need to actually put images in; i haven't
// fill in at least one for each quadrant, starting at line 24
// use the centers of each quadrant: (0.25,0.25), (0.25,0.75), (0.75,0.25), (0.75),(0.75)
// then you'll be able to see it working



function PointerPointerClone(Target, MoveThreshhold, MinTimeThreshhold) {

    // Target is the DOM node of the image to update, use eg document.getGetElementById('yourTarget')
    // MoveThreshhold is the unit scaled distance the mouse may move in one frame before an update is triggered
    // MinTimeThreshhold is how long, in 60 frame per second frame count, the app will wait before it will update again

    'use strict';

    MoveThreshhold    = MoveThreshhold    || 0.01;
    MinTimeThreshhold = MinTimeThreshhold || 30;

    var ended     = false,  // halt() sets this to true and kills the requestAnimationFrame loop
        timeSince = 0,      // frame time remaining since an update

        CMouseX   = 0,      // Current mouse x/y
        CMouseY   = 0,

        PMouseX   = 0,      // Previous mouse x/y
        PMouseY   = 0,

        Pointers  = [       // The actual images
            { x: 0.73, y: 0.91, link: 'http://...' },    // locations normalized to the range 0-1
            { x: 0.38, y: 0.23, link: 'http://...' },    // creates some distortion because of screen aspect
            { x: 0.99, y: 0.14, link: 'http://...' }     // too busy not caring to care
        ];

    // capture up to date mouse behavior
    function handleMouseEvent(event) {
        event   = event || window.event;  // lol ie
        CMouseX = event.clientX;          // this assumes you want things relative to the whole window
        CMouseY = event.clientY;          // if not, scale mouse position here, as appropriate
    }

    // remember what it was last frame
    function updatePriorMousePosition() {
        PMouseX = CMouseX;
        PMouseY = CMouseY;
    }

    // update with the screen 
    // in production you'd have to play games over whether rAF actually exists
    function rAFloop() {
        if (timeSince > 0) { --timeSince; }
        else               { if (currentMouseDistance() > MoveThreshhold) { updateTarget(); } }

        updateMousePosition();
        if (!ended) { window.requestAnimationFrame(rAFloop); }
    }

    // you could fix the aspect distortion here if you cared
    function closeness(Xc, Yc, Xp, Yp) {
        function square(I) { return I*I; }
        return Math.sqrt( square(Xc-Yc) + square(Xp-Yp) );
    }

    // how far, on the [0,1] grid, the mouse is from last frame's
    function currentMouseDistance() {
        return closeness(CMouseX, CMouseY, PMouseX, PMouseY);
    }

    // look up the row index of the image which best matches the given position
    function closestTo(X,Y) {
        var BestD  = 2,  // highest possible 2d [0-1] unit distance is sqrt2 ~= 1.44, so this is infinity-ish
            BestIs = null;

        for (var i in Pointers) {
            var thisComparison = closeness(X,Y, Pointers[i].x,Pointers[i].y);
            if (thisComparison < BestD) {
                BestD  = thisComparison;
                BestIs = i;
            }
        }

        return BestIs;
    }

    function linkFor(X,Y) {
        return Pointers[closestTo(X,Y)].link;
    }

    function setToTarget(target, X,Y) {
        target.src = linkFor(X,Y);
    }

    function updateTargetTo(X,Y) {
        setToTarget(Target, X, Y);
    }

    function updateTarget() {
        updateTargetTo(MouseX, MouseY);
        timeSince = MoveThreshhold;
    }

    function halt() {
        ended = true;
    }

    // start the requestAnimationFrame loop running with a good mouse initial position
    updateMousePosition();
    rAFloop();

    return {
        info    : closestTo,
        match   : linkFor,
        setTo   : setToTarget,
        update  : updateTarget,
        destroy : halt
    };

}