View source for Widget:Logo

<noinclude>__NOTOC__
This widget creates an animated themed ACKspace logo.

Created by [[User:Xopr|xopr]]

== Using this widget ==
To insert this widget, use the following code:

 <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
|image=/w/images/e/e9/ACKsmass_logo.png
|width=600px
|height=200px
|padding=8px
|float=right
}}</nowiki>

This will give the following result:<br/>
{{#widget:{{PAGENAME}}
|image=/w/images/e/e9/ACKsmass_logo.png
|width=600px
|height=200px
|padding=8px
|float=right
}}<br/>
'''Notes'''
* it will display snow in December - March and will show Christmas lights between 7 December and 7 January
* '''image''' is mandatory, the rest is optional.
*: it also must be written without protocol since colon (''':''') is not allowed, and may be relative, for example: ''//ackspace.nl/w/images/e/e9/ACKsmass_logo.png'' or ''/w/images/e/e9/ACKsmass_logo.png''
* You must provide a unit for the sizes (i.e. px, %, etc.)

== Copy to your site ==
To use this widget on your site, just install [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article.

</noinclude><includeonly>
<canvas id="logo" width="<!--{$width|escape:html|default:auto}-->" height="<!--{$height|escape:html|default:auto}-->" style="float:<!--{$float|escape:html|default:none}-->"><img id="img" src="<!--{$image|escape:urlpathinfo}-->"/></canvas>
<script type="text/javascript">
(function( )
{
    "use strict";

    var start = null;
    var oldTimestamp = null;
    var maxFlakes = 200;
    var snowFlakes = [];
    var dynamicImage = null;
    var width = null;
    var height = null;
    var ctx = null;
    var offsetY = 50;
    var alphaDir = 0.01;
    var alpha = 0;
    var buffer;
    var bufferContext;
    var hashParams = location.hash.split("#").slice(1);
    var debug = ( hashParams.indexOf("debug") !== -1 );
    //mw.config.set("debug", true)

    function blink()
    {
        treeLights[ nToggle ].on = !treeLights[ nToggle ].on;

        nToggle++;
        if ( nToggle >= treeLights.length )
            nToggle = 0;
    }

    var nToggle = 0;
    var treeLights = [
        { "x" :  84, "y": 16, "color" : "red",    "on" : false },
        { "x" : 101, "y": 40, "color" : "orange", "on" : false },
        { "x" :  87, "y": 60, "color" : "pink",   "on" : false },
        { "x" :  64, "y": 79, "color" : "#36f",   "on" : false },
        { "x" : 119, "y": 91, "color" : "yellow", "on" : false }
    ];

    var oldTimestamp = null;
    function snowFall( _timestamp )
    {
        // Smooth progress
        if ( !start )
            start = _timestamp;
        var progress = _timestamp - start;

        if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) )
            snowFlakes.push( { "x" : ( Math.random( ) * width ) | 0, "y" : 0, "c" : getRndColor() } );
        oldTimestamp = _timestamp;

        if ( snowFlakes.length )
        {
            // Fetch a random flake
            var pixelPos;
            var nFlakeNot = ( Math.random( ) * snowFlakes.length ) | 0;

            var delta = _timestamp - oldTimestamp;
            oldTimestamp = _timestamp;

            for ( var nFlake = 0; nFlake < snowFlakes.length; nFlake++ )
            {
                // Skip some flakes
                if ( Math.random() > 0.8 )
                    continue;

                var flake = snowFlakes[ nFlake ];
                // Calculate the new position of the flake.
                // If it can't move anywhere down (3 positions): fixate it in the dynamic image and reset the flake
                if ( !updateFlake( flake, dynamicImage ) )
                {
                    // Fixate flake
                    pixelPos = ( flake.x + width * flake.y ) * 4;
                    dynamicImage.data[ pixelPos + 0 ] = flake.c[0];
                    dynamicImage.data[ pixelPos + 1 ] = flake.c[1];
                    dynamicImage.data[ pixelPos + 2 ] = flake.c[2];
                    dynamicImage.data[ pixelPos + 3 ] = 255;

                    // Generate new flake
                    flake = { "x" : ( Math.random( ) * width ) | 0, "y" : 0, "c" : getRndColor() };
                }

                // Store the updated or newly created flake.
                snowFlakes[ nFlake ] = flake;

            }

            // Clear the current frame

            // Draw the dynamic image
            ctx.putImageData( dynamicImage, 0, 0 );

            // Draw all flakes
            ctx.fillStyle = 'white';
            ctx.shadowBlur = 0;

            for ( nFlake = 0; nFlake < snowFlakes.length; nFlake++ )
            {
                flake = snowFlakes[ nFlake ];
                ctx.fillStyle = 'rgb(' + flake.c[0] + ',' + flake.c[1] + ',' + flake.c[2] + ')';
                ctx.fillRect( flake.x, flake.y, 1, 1 );
            }

            // Draw all tree lights (only during holiday season
            if ( is_winter_holiday() )
            {
                for ( var t = 0; t < treeLights.length; t++ )
                    drawTreeLight( treeLights[t], false );
            }

            // Draw the glowing ACK bit
            ctx.strokeStyle = ctx.shadowColor = 'red';
            ctx.globalAlpha = 1;
            ctx.lineWidth = 10;
            ctx.shadowBlur = 70;
            for ( var n = 0; n < 10; n++ )
            {
                ctx.beginPath();
                ctx.rect( 292, 92 + offsetY, 1, 1 );
                ctx.stroke();
            }

            ctx.save();
            ctx.translate( 307, 110 + offsetY );
            ctx.rotate( -0.1 );

            // Draw a glowing red '5'
            ctx.fillStyle = "red";
            ctx.font = "bold 65px sans-serif";
            ctx.lineWidth = 1;
            ctx.fillText( "5", 0, 0 );
            ctx.strokeText( "5", 0, 0 );
            ctx.textBaseline = "bottom";

            ctx.restore();

            // Draw all tree lights overlay: either on or off
            ctx.shadowBlur = 0;
            // Draw all tree lights (only during holiday season
            if ( is_winter_holiday() )
            {
                for ( var t = 0; t < treeLights.length; t++ )
                    drawTreeLight( treeLights[t], true );
            }
        }

        window.requestAnimationFrame( snowFall );
    }

    function getRndColor()
    {
        // Thanks to Adafruit's NeoPixel lib
        var wheelPos = Math.random() * 255 | 0;
        if( wheelPos < 85 )
        {
            return [ (255 - wheelPos * 2), 85, (85 + wheelPos * 2) ];
        }

        if( wheelPos < 170 )
        {
            wheelPos -= 85;
            return [ 85, (85 + wheelPos * 2), (255 - wheelPos * 2) ];
        }
        wheelPos -= 170;
        return [ (85 + wheelPos * 2), (255 - wheelPos * 2), 85 ];
    }

    function drawTreeLight( _treeLight, _glow )
    {
        ctx.strokeStyle = ctx.shadowColor = _treeLight.color;

        if ( !_glow )
        {
            // Draw the light
            ctx.lineWidth = 3;
            ctx.globalAlpha = 1;
            ctx.beginPath();
            ctx.arc( _treeLight.x, _treeLight.y + offsetY, 2, 0, 2 * Math.PI );
            ctx.stroke();
        }
        else if ( _treeLight.on )
        {
            // Let it glow!
            ctx.lineWidth = 1;
            for ( var n = 0; n < 20; n++ )
            {
                ctx.globalAlpha = n / 30;
                ctx.beginPath();
                ctx.arc( _treeLight.x, _treeLight.y + offsetY, 22 - n, 0, 2 * Math.PI );
                ctx.stroke();
            }
        }
        else
        {
            // Add dark 'off' mask
            ctx.strokeStyle = ctx.shadowColor = "rgba( 0,0,0,0.3)";
            ctx.lineWidth = 3;
            ctx.globalAlpha = 1;
            ctx.beginPath();
            ctx.arc( _treeLight.x, _treeLight.y + offsetY, 2, 0, 2 * Math.PI );
            ctx.stroke();
        }
    }

    function updateFlake( _flake, _dynamicImage )
    {
        var newFlake;

        // Check each next possible 'y' pixel, and add it to the list of possibilities
        var possibilities = [];

        // Try three flake possibilities
        for ( var n = -1; n <= 1; n++ )
        {
            newFlake = tryCreateFlake( _flake, n, 1, _dynamicImage );
            if ( newFlake )
                possibilities.push( newFlake );
        }

        if ( !possibilities.length )
        {
            newFlake = tryCreateFlake( _flake, -2, 1, _dynamicImage );
            if ( newFlake )
                possibilities.push( newFlake );

            newFlake = tryCreateFlake( _flake, 2, 1, _dynamicImage );
            if ( newFlake )
                possibilities.push( newFlake );
        }

        // No possibilities means, no update: will fixate this flake
        if ( !possibilities.length )
            return false;

        // Pick a flake
        var newFlake = possibilities[ ( Math.random( ) * possibilities.length ) | 0 ];
        _flake.x = newFlake.x;
        _flake.y = newFlake.y;

        // Flake updated
        return true;
    }

    function tryCreateFlake( _flake, _x, _y, _dynamicImage )
    {
        // Don't create flake if we're off the bottom of the screen
        if ( ( _flake.y + _y ) >= height )
            return null;

        // Don't allow to go off the sides of the screen
        if ( ( _flake.x + _x ) < 0 )
            return null;

        if ( ( _flake.x + _x ) >= width )
            return null;

        var newFlake = { "x" : _flake.x + _x, "y" : _flake.y + _y, "c" : _flake.c };

        // Check the alpha channel (apparently, our logo has opacity < 250)
        if ( _dynamicImage.data[ ( newFlake.x + width * newFlake.y ) * 4 + 3 ] > 220 )
            return null;

        // All test cases valid, return the resulting flake
        return newFlake;
    }

    function is_winter()
    {
        return (new Date( "1 april " + (new Date() ).getFullYear() )).valueOf() > Date.now() || (new Date( "1 december " + (new Date() ).getFullYear() )).valueOf() < Date.now();
    }

    function is_winter_holiday()
    {
        return (new Date( "7 january " + (new Date() ).getFullYear() )).valueOf() > Date.now() || (new Date( "7 december " + (new Date() ).getFullYear() )).valueOf() < Date.now();
    }

    function window_load()
    {
        if ( debug )
        {
            console && console.log( "winter:", is_winter() );
            console && console.log( "winter holiday:", is_winter_holiday() );
        }

        var logo = document.getElementById( "logo" );
        ctx = logo.getContext("2d");

        buffer = document.createElement('canvas');
        buffer.width = logo.width;
        buffer.height = logo.height;
        bufferContext = buffer.getContext('2d');

        var img = document.getElementById("img");
        ctx.drawImage( img, 0, offsetY );

        bufferContext.drawImage( img, 0, offsetY );
        bufferContext.fillStyle = 'white';
        bufferContext.shadowBlur = 0;

        width = logo.width;
        height = logo.height;
        dynamicImage = ctx.getImageData( 0, 0, width, height );
        if ( is_winter() )
        {
            window.requestAnimationFrame( snowFall );
            setInterval( blink, 1500 );
        }
    }

    window.addEventListener( "load", window_load, false );
}( ));
</script>
</includeonly>