
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var mask;

    var pointCount = 1200;
    var str = "MENÚ PRINCIPAL.";
    var fontStr = "bold 65pt sans-serif";

    ctx.font = fontStr;
    ctx.textAlign = "center";
    c.width = ctx.measureText(str).width;
    c.height = 90; // Set to font size

    var whitePixels = [];
    var points = [];
    var point = function (x, y, vx, vy) {
        this.x = x;
        this.y = y;
        this.vx = vx || 1;
        this.vy = vy || 1;
    }
    point.prototype.update = function () {
        ctx.beginPath();
        ctx.fillStyle = "#95a5a6";
        ctx.arc(this.x, this.y, 1, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();

        // Change direction if running into black pixel
        if (this.x + this.vx >= c.width || this.x + this.vx < 0 || mask.data[coordsToI(this.x + this.vx, this.y, mask.width)] != 255) {
            this.vx *= -1;
            this.x += this.vx * 2;
        }
        if (this.y + this.vy >= c.height || this.y + this.vy < 0 || mask.data[coordsToI(this.x, this.y + this.vy, mask.width)] != 255) {
            this.vy *= -1;
            this.y += this.vy * 2;
        }

        for (var k = 0, m = points.length; k < m; k++) {
            if (points[k] === this)
                continue;

            var d = Math.sqrt(Math.pow(this.x - points[k].x, 2) + Math.pow(this.y - points[k].y, 2));
            if (d < 5) {
                ctx.lineWidth = .2;
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(points[k].x, points[k].y);
                ctx.stroke();
            }
            if (d < 20) {
                ctx.lineWidth = .1;
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(points[k].x, points[k].y);
                ctx.stroke();
            }
        }

        this.x += this.vx;
        this.y += this.vy;
    }

    function loop() {
        ctx.clearRect(0, 0, c.width, c.height);
        for (var k = 0, m = points.length; k < m; k++) {
            points[k].update();
        }
    }

    function init() {
        // Draw text
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.rect(0, 0, c.width, c.height);
        ctx.fill();
        ctx.font = fontStr;
        ctx.textAlign = "left";
        ctx.fillStyle = "#fff";
        ctx.fillText(str, 0, c.height / 2 + (c.height / 2));
        ctx.closePath();

        // Save mask
        mask = ctx.getImageData(0, 0, c.width, c.height);

        // Draw background
        ctx.clearRect(0, 0, c.width, c.height);

        // Save all white pixels in an array
        for (var i = 0; i < mask.data.length; i += 4) {
            if (mask.data[i] == 255 && mask.data[i + 1] == 255 && mask.data[i + 2] == 255 && mask.data[i + 3] == 255) {
                whitePixels.push([iToX(i, mask.width), iToY(i, mask.width)]);
            }
        }

        for (var k = 0; k < pointCount; k++) {
            addPoint();
        }
    }

    function addPoint() {
        var spawn = whitePixels[Math.floor(Math.random() * whitePixels.length)];

        var p = new point(spawn[0], spawn[1], Math.floor(Math.random() * 2 - 1), Math.floor(Math.random() * 2 - 1));
        points.push(p);
    }

    function iToX(i, w) {
        return ((i % (4 * w)) / 4);
    }
    function iToY(i, w) {
        return (Math.floor(i / (4 * w)));
    }
    function coordsToI(x, y, w) {
        return ((mask.width * y) + x) * 4;

    }

    setInterval(loop, 350);
    init();

</script>








