Mouse Trottle Graph

by secretgspot

HTML

<div id="mousemove"></div>

CSS

* {
    margin: 0; padding: 0;
}
body {
    overflow: hidden;
    background: #000 no-repeat scroll 0 0;
}
#mousemove {
    position: absolute;
    top: 39px; left: 74px;
    width: 65px; height: 11px;
    background: no-repeat scroll 0 0;
    z-index: 2;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
}
@-webkit-keyframes blink {
      0% { opacity: 0; }
     75% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
      0% { opacity: 0; }
     75% { opacity: 1; }
    100% { opacity: 1; }
}
canvas {
    position: absolute;
    top: 13px; left: 13px;
    z-index: 1;
}

#mousemove...

JavaScript

(function(win, doc) {

"use strict";

/////////////////////////////////////////////////

win.addEventListener("DOMContentLoaded", main, false);

function main() {
    var throttle = new Throttle(100),
        graph    = new Graph(439, 439);
    
    doc.addEventListener("mousemove", handleMouseMove, true);
    
    function handleMouseMove() {
        // そのまま
        graph.plot(-20, "#f06");
        
        // 間引く
        throttle.exec(function() {
            graph.plot(20, "#0f6");
        });
    }
}

/////////////////////////////////////////////////

/**
 *  @param  {number} minInterval
 *  @return {Object.&lt;function&gt;}
 */
function Throttle(minInterval) {
    /*-------------------------------------------
        PRIVATE
    -------------------------------------------*/
    var _timeStamp = 0,
        _timerId;
    
    /*-------------------------------------------
        PUBLIC
    -------------------------------------------*/
    /**
     *  @param  {function} func
     *  @return {undefined}
     */
    function exec(func) {
        var now   = +new Date,
            delta = now - _timeStamp;
        
        clearTimeout(_timerId);
        if (delta >= minInterval) {
            _timeStamp = now;
            func();
        } else {
            _timerId = setTimeout(function() {
                exec(func);
            }, minInterval - delta);
        }
    }
    /*-------------------------------------------
        EXPORT
    -------------------------------------------*/
    return {
        exec : exec
    };
}

/////////////////////////////////////////////////

/**
 *  @param  {uint} width
 *  @param  {uint} height
 *  @return {Object.&lt;function&gt;}
 */
function Graph(width, height) {
    /*--------------------------------------------
        PRIVATE
    --------------------------------------------*/
    var _cvs   = doc.createElement("canvas"),
        _ctx   = _cvs.getContext("2d"),
        _queue = [];
    
   ...