FLocal/static/js/machichara/fractalsnow-bg-specific.js

/*
* Snowing routine based on one <canvas> element dynamically 
* injected in the background of the page.
* 
* The code is not optimized, feel free to make your own edits!
*
* Copyright 2010 by David Flanagan
* http://creativecommons.org/licenses/by-nc-sa/3.0/
*
* Modified by Giorgio Sardo
* http://blogs.msdn.com/Giorgio
*/
(function () {

    // Start Animation only if browser support <canvas>
    if (document.createElement('canvas').getContext) {
        if (document.readyState === 'complete')
            Snow();
        else
            window.addEventListener('DOMContentLoaded', Snow, false);
    } else {
        return;
    }

    var deg = Math.PI / 180;         // For converting degrees to radians
    var sqrt3_2 = Math.sqrt(3) / 2;  // Height of an equilateral triangle
    var flakes = [];               // Things that are dropping
    var scrollspeed = 64;   // How often we animate things
    var snowspeed = 500;    // How often we add a new snowflake
    var maxflakes = 20;     // Max number of flakes to be added at the same time
    var rand = function (n) { return Math.floor(n * Math.random()); }

    var canvas, sky;
    var snowingTimer;
    var invalidateMeasure = false;

    function Snow() {
        canvas = document.createElement('canvas');
        canvas.style.position = 'fixed';
        canvas.style.top = '0px';
        canvas.style.left = '0px';
        canvas.style.zIndex = '-1';
        document.body.insertBefore(canvas, document.body.firstChild);
        sky = canvas.getContext('2d');

        ResetCanvas();

        snowingTimer = setInterval(createSnowflake, snowspeed);
        setInterval(moveSnowflakes, scrollspeed);

        window.addEventListener('resize', ResetCanvas, false);
    }

    function ResetCanvas() {
        invalidateMeasure = true;
        canvas.width = document.body.offsetWidth;
        canvas.height = window.innerHeight;
        sky.strokeStyle = '#0066CC';
        sky.fillStyle = 'white';
    }

    function drawFlake(x, y, size, order) {
        sky.save();
        sky.translate(x, y);
        snowflake(order, 0, Math.floor(sqrt3_2 * y), size);
        sky.fill();
        sky.stroke();
        sky.restore();
    }

    function snowflake(n, x, y, len) {
        sky.save();           // Save current transformation
        sky.beginPath();
        sky.translate(x, y);   // Translate to starting point
        sky.moveTo(0, 0);      // Begin a new subpath there
        leg(n);             // Draw the first leg of the fractal
        sky.rotate(-120 * deg); // Rotate 120 degrees anticlockwise
        leg(n);             // Draw the second leg
        sky.rotate(-120 * deg); // Rotate again.
        leg(n);             // Draw the final leg
        sky.closePath();      // Close the subpath
        sky.restore();        // Restore original transformation

        // Draw a single leg of a level-n Koch snowflake.
        // This function leaves the current point at the end of
        // the leg it has drawn and translates the coordinate
        // system so the current point is (0,0). This means you
        // can easily call rotate() after drawing a leg.
        function leg(n) {
            sky.save();               // Save current transform
            if (n == 0) {           // Non-recursive case:
                sky.lineTo(len, 0);   //   Just a horizontal line
            }
            else { // Recursive case:           _  _
                //     draw 4 sub-legs like:  \/
                sky.scale(1 / 3, 1 / 3);   // Sub-legs are 1/3rd size
                leg(n - 1);           // Draw the first sub-leg
                sky.rotate(60 * deg);   // Turn 60 degrees clockwise
                leg(n - 1);           // Draw the second sub-leg
                sky.rotate(-120 * deg); // Rotate 120 degrees back
                leg(n - 1);           // Third sub-leg
                sky.rotate(60 * deg);   // Back to original heading
                leg(n - 1);           // Final sub-leg
            }
            sky.restore();            // Restore the transform
            sky.translate(len, 0);    // Translate to end of leg
        }
    }

    function createSnowflake() {
        var order = 2;
        var size = 10 + rand(90);
        var t = (document.body.offsetWidth - 964) / 2;
        var x = (rand(2) == 0) ? rand(t) : t + 964 + rand(t); // Make it fit with my blog
        var y = window.pageYOffset;

        flakes.push({ x: x, y: y, vx: 0, vy: 3 + rand(3), size: size, order: order });

        if (flakes.length > maxflakes) clearInterval(snowingTimer);
    }

    function moveSnowflakes() {
        sky.clearRect(0, 0, canvas.width, canvas.height);

        var maxy = canvas.height;

        for (var i = 0; i < flakes.length; i++) {
            var flake = flakes[i];

            flake.y += flake.vy;
            flake.x += flake.vx;

            if (flake.y > maxy) flake.y = 0;
            if (invalidateMeasure) {
                var t = (canvas.width - 964) / 2;
                flake.x = (rand(2) == 0) ? rand(t) : t + 964 + rand(t);
            }

            drawFlake(flake.x, flake.y, flake.size, flake.order);

            // Sometimes change the sideways velocity
            if (rand(4) == 1) flake.vx += (rand(11) - 5) / 10;
            if (flake.vx > 2) flake.vx = 2;
            if (flake.vx < -2) flake.vx = -2;
        }
        if (invalidateMeasure) invalidateMeasure = false;
    }

} ());