Ultimate Hacking Keyboard hand animation code

uhk-animation.js

function animateHands(svgParam) {
    'use strict';

    var TYPING_DURATION = 1000;
    var TYPING_REGION_X = 50;
    var TYPING_REGION_Y = 20;
    var HAND_SPEED_FACTOR = 2;
    var HAND_MOVEMENT_INSIDE_DURATION = 150;
    var HAND_MOVEMENT_OUTSIDE_DURATION = 500;
    var HAND_FINGERS_POSITION_OFFSET_Y = 150;

    var svg;
    var leftHand;
    var rightHand;
    var durationSum = 0;

    function random(min, max) {
        return Math.round((max-min)*Math.random()) + min;
    }

    function initHand(handSelector, isActive) {
        var handElement = svg.select(handSelector);
        var ownCoordinates = handElement.getBBox();
        ownCoordinates.cy -= HAND_FINGERS_POSITION_OFFSET_Y;

        var element;
        var targetCoordinates = [];
        for (var position=1; element=svg.select(handSelector + '-position-' + position); position++) {
            var boundingBox = element.getBBox();
            targetCoordinates.push({
                x: boundingBox.cx - ownCoordinates.cx,
                y: boundingBox.cy - ownCoordinates.cy
            });
        }

        return {
            element: handElement,
            state: 'inside',
            targetCoordinates: targetCoordinates,
            ownCoordinates: handElement.getBBox(),
            isActive: isActive
        };
    }

    function animateHand(hand) {
        var targetCoordinate;
        if (hand.state === 'enteringOutside') {
            targetCoordinate = hand.targetCoordinates[random(0, hand.targetCoordinates.length-1)];
        } else {
            targetCoordinate = {
                x: random(-TYPING_REGION_X, TYPING_REGION_X),
                y: random(-TYPING_REGION_Y, TYPING_REGION_Y)
            };
        }

        var handBoundingBox = hand.element.getBBox();
        var xHand = handBoundingBox.x-hand.ownCoordinates.x;
        var yHand = handBoundingBox.y-hand.ownCoordinates.y;
        var xDistance = xHand - targetCoordinate.x;
        var yDistance = yHand - targetCoordinate.y;
        var distance = Math.sqrt(xDistance*xDistance + yDistance*yDistance);
        var duration = Math.max(HAND_SPEED_FACTOR*distance, HAND_MOVEMENT_INSIDE_DURATION);

        if (hand.isActive) {
            durationSum += duration;
        }

        duration = hand.state === 'inside'
            ? Math.max(duration, HAND_MOVEMENT_INSIDE_DURATION)
            : Math.max(duration, HAND_MOVEMENT_OUTSIDE_DURATION);

        if (hand.state === 'inside' && hand.isActive && durationSum > TYPING_DURATION && hand.targetCoordinates.length > 0) {
            hand.state = 'enteringOutside';
        } else if (hand.state === 'enteringOutside') {
            hand.state = 'leavingOutside';
        } else if (hand.state === 'leavingOutside') {
            hand.state = 'inside';
            durationSum = 0;

            var otherHand = hand === leftHand ? rightHand : leftHand;
            if (otherHand.targetCoordinates.length > 0) {
                leftHand.isActive = !leftHand.isActive;
                rightHand.isActive = !rightHand.isActive;
            }
        }

        hand.element.animate({transform:Snap.format('t{x},{y})', targetCoordinate)},
                             duration, mina.easeinout, animateHand.bind(null, hand));
    }

    svg = svgParam;
    leftHand = initHand('.left-hand', false);
    rightHand = initHand('.right-hand', true);

    return {
        startAnimation: function() {
            animateHand(leftHand);
            animateHand(rightHand);
        },

        stopAnimation: function() {
            leftHand.element.stop();
            rightHand.element.stop();
        }
    }
}

jQuery(document).ready(function($) {
    "use strict";

    ['uhk-typing', 'regular-keyboard-typing', 'uhk-mouse', 'regular-keyboard-mouse'].forEach(function(selector) {
        $('#' + selector).bind('inview', function(event, isContainerInView) {
            if (isContainerInView) {
                $(this).unbind('inview');
            } else {
                return;
            }

            Snap.load('/wordpress/wp-content/uploads/' + selector + '.svg', function(loadedFragment) {
                var svg = Snap('#' + selector);
                svg.append(loadedFragment);
                var animatedHands = animateHands(svg);

                $('#' + selector + ' svg').bind('inview', function(event, isSvgInView) {
                    if (isSvgInView) {
                        animatedHands.stopAnimation();
                        animatedHands.startAnimation();
                    } else {
                        animatedHands.stopAnimation();
                    }
                });
            });
        });
    });
});