Difference between revisions of "Widget:Logo"

From Hackerspace ACKspace
Jump to: navigation, search
(created initial logo widget)
 
m (fixed JS copy-paste error, removed category)
Line 27: Line 27:
 
== Copy to your site ==
 
== 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.
 
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.
−
[[Category:SpaceAPI]]
+
 
 
</noinclude><includeonly><script type="text/javascript">
 
</noinclude><includeonly><script type="text/javascript">
 
(function( )
 
(function( )
Line 33: Line 33:
 
     "use strict";
 
     "use strict";
  
−
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 start = null;
+
    function blink()
−
var oldTimestamp = null;
+
    {
−
var maxFlakes = 200;
+
        treeLights[ nToggle ].on = !treeLights[ nToggle ].on;
−
var snowFlakes = [];
 
−
var dynamicImage = null;
 
−
var width = null;
 
−
var height = null;
 
−
var ctx = null;
 
−
var offsetY = 50;
 
−
var alphaDir = 0.01;
 
−
var alpha = 0;
 
  
−
function blink()
+
        nToggle++;
−
{
+
        if ( nToggle >= treeLights.length )
−
    treeLights[ nToggle ].on = !treeLights[ nToggle ].on;
+
            nToggle = 0;
−
 
+
     }
−
    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 ) )
+
     var nToggle = 0;
−
         snowFlakes.push( { "x" : ( Math.random( ) * width ) | 0, "y" : 0 } );
+
    var treeLights = [
−
     oldTimestamp = _timestamp;
+
        { "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 }
 +
     ];
  
−
     if ( snowFlakes.length )
+
     var oldTimestamp = null;
 +
    function snowFall( _timestamp )
 
     {
 
     {
−
         // Fetch a random flake
+
         // Smooth progress
−
         var pixelPos;
+
         if ( !start )
−
         var nFlakeNot = ( Math.random( ) * snowFlakes.length ) | 0;
+
            start = _timestamp;
 +
         var progress = _timestamp - start;
  
−
         var delta = _timestamp - oldTimestamp;
+
         if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) )
 +
            snowFlakes.push( { "x" : ( Math.random( ) * width ) | 0, "y" : 0 } );
 
         oldTimestamp = _timestamp;
 
         oldTimestamp = _timestamp;
  
−
         for ( var nFlake = 0; nFlake < snowFlakes.length; nFlake++ )
+
         if ( snowFlakes.length )
 
         {
 
         {
−
             // Skip some flakes
+
             // Fetch a random flake
−
             if ( Math.random() > 0.8 )
+
             var pixelPos;
−
                continue;
+
            var nFlakeNot = ( Math.random( ) * snowFlakes.length ) | 0;
 +
 
 +
            var delta = _timestamp - oldTimestamp;
 +
            oldTimestamp = _timestamp;
  
−
             var flake = snowFlakes[ nFlake ];
+
             for ( var nFlake = 0; nFlake < snowFlakes.length; 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
+
                 // Skip some flakes
−
                pixelPos = ( flake.x + width * flake.y ) * 4;
+
                if ( Math.random() > 0.8 )
−
                dynamicImage.data[ pixelPos + 0 ] = 255;
+
                    continue;
−
                dynamicImage.data[ pixelPos + 1 ] = 255;
+
 
−
                dynamicImage.data[ pixelPos + 2 ] = 255;
+
                var flake = snowFlakes[ nFlake ];
−
                dynamicImage.data[ pixelPos + 3 ] = 255;
+
                // 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 ] = 255;
 +
                    dynamicImage.data[ pixelPos + 1 ] = 255;
 +
                    dynamicImage.data[ pixelPos + 2 ] = 255;
 +
                    dynamicImage.data[ pixelPos + 3 ] = 255;
 +
 
 +
                    // Generate new flake
 +
                    flake = { "x" : ( Math.random( ) * width ) | 0, "y" : 0 };
 +
                }
 +
 
 +
                // Store the updated or newly created flake.
 +
                snowFlakes[ nFlake ] = flake;
  
−
                 // Generate new flake
+
                 // Draw the dynamic image
−
                 flake = { "x" : ( Math.random( ) * width ) | 0, "y" : 0 };
+
                 ctx.putImageData( dynamicImage, 0, 0 );
 
             }
 
             }
  
−
             // Store the updated or newly created flake.
+
             // Draw all flakes
−
             snowFlakes[ nFlake ] = flake;
+
            ctx.fillStyle = 'white';
 +
            ctx.shadowBlur = 0;
 +
 
 +
            for ( nFlake = 0; nFlake < snowFlakes.length; nFlake++ )
 +
             {
 +
                flake = snowFlakes[ nFlake ];
 +
                ctx.fillRect( flake.x, flake.y, 1, 1 );
 +
            }
  
−
             // Draw the dynamic image
+
             // Draw all tree lights
−
             ctx.putImageData( dynamicImage, 0, 0 );
+
             for ( var t = 0; t < treeLights.length; t++ )
−
        }
+
                drawTreeLight( treeLights[t], false );
  
−
        // Draw all flakes
+
            // Draw the glowing ACK bit
−
        ctx.fillStyle = 'white';
+
            ctx.strokeStyle = ctx.shadowColor = 'red';
−
        ctx.shadowBlur = 0;
+
            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();
 +
            }
  
−
        for ( nFlake = 0; nFlake < snowFlakes.length; nFlake++ )
+
            // Draw all tree lights overlay: either on or off
−
        {
+
            ctx.shadowBlur = 0;
−
            flake = snowFlakes[ nFlake ];
+
            for ( var t = 0; t < treeLights.length; t++ )
−
            ctx.fillRect( flake.x, flake.y, 1, 1 );
+
                drawTreeLight( treeLights[t], true );
 
         }
 
         }
  
−
         // Draw all tree lights
+
         window.requestAnimationFrame( snowFall );
−
        for ( var t = 0; t < treeLights.length; t++ )
+
    }
−
            drawTreeLight( treeLights[t], false );
+
 
 +
    function drawTreeLight( _treeLight, _glow )
 +
    {
 +
        ctx.strokeStyle = ctx.shadowColor = _treeLight.color;
  
−
         // Draw the glowing ACK bit
+
         if ( !_glow )
−
        ctx.strokeStyle = ctx.shadowColor = 'red';
 
−
        ctx.globalAlpha = 1;
 
−
        ctx.lineWidth = 10;
 
−
        ctx.shadowBlur = 70;
 
−
        for ( var n = 0; n < 10; n++ )
 
 
         {
 
         {
 +
            // Draw the light
 +
            ctx.lineWidth = 3;
 +
            ctx.globalAlpha = 1;
 
             ctx.beginPath();
 
             ctx.beginPath();
−
             ctx.rect( 292, 92 + offsetY, 1, 1 );
+
             ctx.arc( _treeLight.x, _treeLight.y + offsetY, 2, 0, 2 * Math.PI );
 
             ctx.stroke();
 
             ctx.stroke();
 
         }
 
         }
−
 
+
        else if ( _treeLight.on )
−
         // Draw all tree lights overlay: either on or off
+
         {
−
        ctx.shadowBlur = 0;
+
            // Let it glow!
−
        for ( var t = 0; t < treeLights.length; t++ )
+
            ctx.lineWidth = 1;
−
             drawTreeLight( treeLights[t], true );
+
            for ( var n = 0; n < 20; n++ )
−
    }
+
             {
−
 
+
                ctx.globalAlpha = n / 30;
−
    window.requestAnimationFrame( snowFall );
+
                ctx.beginPath();
−
}
+
                ctx.arc( _treeLight.x, _treeLight.y + offsetY, 22 - n, 0, 2 * Math.PI );
−
 
+
                ctx.stroke();
−
function drawTreeLight( _treeLight, _glow )
+
            }
−
{
+
         }
−
    ctx.strokeStyle = ctx.shadowColor = _treeLight.color;
+
         else
−
 
 
−
    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;
+
            // Add dark 'off' mask
 +
            ctx.strokeStyle = ctx.shadowColor = "rgba( 0,0,0,0.3)";
 +
            ctx.lineWidth = 3;
 +
             ctx.globalAlpha = 1;
 
             ctx.beginPath();
 
             ctx.beginPath();
−
             ctx.arc( _treeLight.x, _treeLight.y + offsetY, 22 - n, 0, 2 * Math.PI );
+
             ctx.arc( _treeLight.x, _treeLight.y + offsetY, 2, 0, 2 * Math.PI );
 
             ctx.stroke();
 
             ctx.stroke();
 
         }
 
         }
 
     }
 
     }
−
     else
+
 
 +
     function updateFlake( _flake, _dynamicImage )
 
     {
 
     {
−
         // Add dark 'off' mask
+
         var newFlake;
−
        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 )
+
        // Check each next possible 'y' pixel, and add it to the list of possibilities
−
{
+
        var possibilities = [];
−
    var newFlake;
 
  
−
    // Check each next possible 'y' pixel, and add it to the list of possibilities
+
        // Try three flake possibilities
−
    var possibilities = [];
+
        for ( var n = -1; n <= 1; n++ )
 +
        {
 +
            newFlake = tryCreateFlake( _flake, n, 1, _dynamicImage );
 +
            if ( newFlake )
 +
                possibilities.push( newFlake );
 +
        }
  
−
    // Try three flake possibilities
+
        // No possibilities means, no update: will fixate this flake
−
    for ( var n = -1; n <= 1; n++ )
+
         if ( !possibilities.length )
−
    {
+
             return false;
−
        newFlake = tryCreateFlake( _flake, n, 1, _dynamicImage );
 
−
         if ( newFlake )
 
−
             possibilities.push( newFlake );
 
−
    }
 
  
−
    // No possibilities means, no update: will fixate this flake
+
        // Pick a flake
−
    if ( !possibilities.length )
+
        var newFlake = possibilities[ ( Math.random( ) * possibilities.length ) | 0 ];
−
         return false;
+
         _flake.x = newFlake.x;
 +
        _flake.y = newFlake.y;
  
−
    // Pick a flake
+
        // Flake updated
−
    var newFlake = possibilities[ ( Math.random( ) * possibilities.length ) | 0 ];
+
        return true;
−
    _flake.x = newFlake.x;
+
     }
−
     _flake.y = newFlake.y;
 
  
−
     // Flake updated
+
     function tryCreateFlake( _flake, _x, _y, _dynamicImage )
−
    return true;
+
    {
−
}
+
        // Don't create flake if we're off the bottom of the screen
 +
        if ( ( _flake.y + _y ) >= height )
 +
            return null;
  
−
function tryCreateFlake( _flake, _x, _y, _dynamicImage )
+
        // Don't allow to go off the sides of the screen
−
{
+
        if ( ( _flake.x + _x ) < 0 )
−
    // Don't create flake if we're off the bottom of the screen
+
            return null;
−
    if ( ( _flake.y + _y ) >= height )
 
−
        return null;
 
  
−
    // Don't allow to go off the sides of the screen
+
        if ( ( _flake.x + _x ) >= width )
−
    if ( ( _flake.x + _x ) < 0 )
+
            return null;
−
        return null;
 
  
−
    if ( ( _flake.x + _x ) >= width )
+
        var newFlake = { "x" : _flake.x + _x, "y" : _flake.y + _y };
−
        return null;
 
  
−
    var newFlake = { "x" : _flake.x + _x, "y" : _flake.y + _y };
+
        // Check the alpha channel (apparently, our logo has opacity < 250)
 +
        if ( _dynamicImage.data[ ( newFlake.x + width * newFlake.y ) * 4 + 3 ] > 220 )
 +
            return null;
  
−
    // Check the alpha channel (apparently, our logo has opacity < 250)
+
         // All test cases valid, return the resulting flake
−
    if ( _dynamicImage.data[ ( newFlake.x + width * newFlake.y ) * 4 + 3 ] > 220 )
+
        return newFlake;
−
         return null;
+
    }
−
 
 
−
    // All test cases valid, return the resulting flake
 
−
    return newFlake;
 
−
}
 
  
 
     var logo = document.getElementById( "logo" );
 
     var logo = document.getElementById( "logo" );

Revision as of 12:12, 17 December 2015

This widget creates an animated themed ACKspace logo.

Created by xopr

Using this widget

To insert this widget, use the following code: 

{{#widget:Logo
|image=https://ackspace.nl/w/images/thumb/8/83/ACKlogo.png/600px-ACKlogo.png
|width=260px
|height=20px
|padding=8px
|float=right
}}

This will give the following result:

Note that image is mandatory, the rest is optional. Also, 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 MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:Logo article.


Retrieved from "https://ackspace.nl/w/index.php?title=Widget:Logo&oldid=5631"