laserpointer.js

laserpointer.js

var LaserPointer = (function () {

    var module = {};
    var canvas;
    var points = [];
    var timer;
    var mousePos;
    var prevPos;
    var maxLength = 15;
    var maxWidth = 5;
    var minWidth = 3.0;
    var maxCologGB = 200;
    var minColorGB = 150.0;
    var zIndex = 1000;

    module.init = function() {
        canvas = document.createElement("canvas");
        canvas.width = window.innerWidth;
        canvas.height = "100%";
        canvas.style.position = "absolute";
        canvas.style.margin = 0;
        canvas.style.padding = 0;
        canvas.style.left = 0;
        canvas.style.top = 0;
        canvas.style["z-index"] = zIndex;

        var body = document.getElementsByTagName('body')[0];
        if (body === undefined) {
            return;
        }
        if (body.childNodes.length > 0) {
            body.insertBefore(canvas, body.childNodes[0]);
        } else {
            body.appendChild(canvas);
        }

        start();
    };

    function start() {
        timer = setInterval(update, 30);
        window.onmousemove = handleMouseMove;
        mousePos = null;
        prevPos = null;
    }

    function update() {
        if (points.length > 0) {
            points.splice(0, 2);
            redraw();
        }
    }

    function samplePointer() {
        if (mousePos === null) {
            return;
        }

        console.log(prevPos, mousePos);

    }

    function redraw() {
        if (canvas.getContext) {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            var ctx = canvas.getContext('2d');
            drawCurve(ctx, points);
        }
    }

    function handleMouseMove(event) {
        event = event || window.event; // IE-ism
        prevPos = mousePos;
        mousePos = {
            x: event.clientX,
            y: event.clientY
        };

        if (prevPos !== null && prevPos.x == mousePos.x && prevPos.y == mousePos.y) {
            return;
        }

        points.push(mousePos.x);
        points.push(mousePos.y);

        if (points.length > maxLength) {
            points.splice(0, 2);
        }

        redraw();
    }

    function drawCurve(ctx, pts) {
        ctx.beginPath();

        drawLines(ctx, pts);

        ctx.restore();
    }

    function scale(unit, max, current) {
        return unit * current / max;
    }

    function drawLines(ctx, ppts) {
        ctx.moveTo(ppts[0], ppts[1]);

        var length = ppts.length - 3;
        for (var i = 0; i < length; i += 2) {
            var c = (ppts[i] + ppts[i+2]) / 2;
            var d = (ppts[i+1] + ppts[i+3]) / 2;
            
            var red = Math.floor(maxCologGB - scale(minColorGB, length, i));
            ctx.strokeStyle = "rgb(255, " + red + "," + red + ")";
            var width = Math.floor(scale(maxWidth, length, i + 1));
            if (i === 0) {
                width = 1;
            } else if (i === 2) {
                width = 2;
            }
            if (i === length - 1) {
                width -= 1;
            }
            
            ctx.lineWidth = width;
            ctx.quadraticCurveTo(ppts[i], ppts[i+1], c, d);
            console.log("length: " + length + ", i: " + i + ", width: " + width);
        }
        ctx.stroke();
    }

    module.init();
    return module;
}());