Difference between revisions of "Widget:Logo"

From Hackerspace ACKspace
Jump to: navigation, search
(since colon is not allowed anymore: URLs will be without protocol and may well be relative)
(updated flake snow -> confetti)
Line 82: Line 82:
  
 
         if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) )
 
         if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) )
−
             snowFlakes.push( { "x" : ( Math.random( ) * width ) | 0, "y" : 0 } );
+
             snowFlakes.push( { "x" : ( Math.random( ) * width ) | 0, "y" : 0, "c" : getRndColor() } );
 
         oldTimestamp = _timestamp;
 
         oldTimestamp = _timestamp;
  
Line 103: Line 103:
 
                 // Calculate the new position of the flake.
 
                 // 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 it can't move anywhere down (3 positions): fixate it in the dynamic image and reset the flake
−
                 if ( debug ? ( !updateFlakeCanvas( flake, bufferContext ) ) : ( !updateFlake( flake, dynamicImage ) ) )
+
                 if ( !updateFlake( flake, dynamicImage ) )
 
                 {
 
                 {
 
                     // Fixate flake
 
                     // Fixate flake
−
                     if ( debug )
+
                     pixelPos = ( flake.x + width * flake.y ) * 4;
−
                    {
+
                    dynamicImage.data[ pixelPos + 0 ] = flake[0];
−
                        bufferContext.fillRect( flake.x, flake.y, 1, 1 );
+
                    dynamicImage.data[ pixelPos + 1 ] = flake[1];
−
                    }
+
                    dynamicImage.data[ pixelPos + 2 ] = flake[2];
−
                    else
+
                    dynamicImage.data[ pixelPos + 3 ] = 255;
−
                    {
 
−
                        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
 
                     // Generate new flake
−
                     flake = { "x" : ( Math.random( ) * width ) | 0, "y" : 0 };
+
                     flake = { "x" : ( Math.random( ) * width ) | 0, "y" : 0, "c" : getRndColor() };
 
                 }
 
                 }
  
Line 131: Line 124:
  
 
             // Draw the dynamic image
 
             // Draw the dynamic image
−
             if ( debug )
+
             ctx.putImageData( dynamicImage, 0, 0 );
−
            {
 
−
                ctx.clearRect( 0, 0, width, height )
 
−
                ctx.drawImage( buffer, 0, 0 );
 
−
            }
 
−
            else
 
−
            {
 
−
                ctx.putImageData( dynamicImage, 0, 0 );
 
−
            }
 
  
 
             // Draw all flakes
 
             // Draw all flakes
Line 148: Line 133:
 
             {
 
             {
 
                 flake = snowFlakes[ nFlake ];
 
                 flake = snowFlakes[ nFlake ];
 +
                ctx.fillStyle = 'rgb(' + flake.c[0] + ',' + flake.c[1] + ',' + flake.c[2] + ')';
 
                 ctx.fillRect( flake.x, flake.y, 1, 1 );
 
                 ctx.fillRect( flake.x, flake.y, 1, 1 );
 
             }
 
             }
Line 181: Line 167:
  
 
         window.requestAnimationFrame( snowFall );
 
         window.requestAnimationFrame( snowFall );
 +
    }
 +
 +
    function getRndColor()
 +
    {
 +
        // Thanks to Adafruit's NeoPixel lib
 +
        var wheelPos = Math.random() * 255 | 0;
 +
        if( wheelPos < 85 )
 +
        {
 +
            return [ (255 - wheelPos * 3), 0, (wheelPos * 3) ];
 +
        }
 +
 +
        if( wheelPos < 170 )
 +
        {
 +
            wheelPos -= 85;
 +
            return [ 0, (wheelPos * 3), (255 - wheelPos * 3) ];
 +
        }
 +
        wheelPos -= 170;
 +
        return [ (wheelPos * 3), (255 - wheelPos * 3), 0 ];
 
     }
 
     }
  
Line 276: Line 280:
 
         // Check the alpha channel (apparently, our logo has opacity < 250)
 
         // Check the alpha channel (apparently, our logo has opacity < 250)
 
         if ( _dynamicImage.data[ ( newFlake.x + width * newFlake.y ) * 4 + 3 ] > 220 )
 
         if ( _dynamicImage.data[ ( newFlake.x + width * newFlake.y ) * 4 + 3 ] > 220 )
−
            return null;
 
−
 
−
        // All test cases valid, return the resulting flake
 
−
        return newFlake;
 
−
    }
 
−
 
−
    function updateFlakeCanvas( _flake, _bufferContext )
 
−
    {
 
−
        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 = tryCreateFlakeCanvas( _flake, n, 1, _bufferContext );
 
−
            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 tryCreateFlakeCanvas( _flake, _x, _y, _bufferContext )
 
−
    {
 
−
        // 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 };
 
−
 
−
        var rgba = _bufferContext.getImageData( newFlake.x, newFlake.y, 1, 1 ).data;
 
−
        // Check the alpha channel (apparently, our logo has opacity < 250)
 
−
        if ( rgba[ 3 ] > 220 )
 
 
             return null;
 
             return null;
  
Line 359: Line 311:
 
         buffer.height = logo.height;
 
         buffer.height = logo.height;
 
         bufferContext = buffer.getContext('2d');
 
         bufferContext = buffer.getContext('2d');
−
 
−
        if ( debug )
 
−
        {
 
−
            console && console.log( "composite test" );
 
−
            //ctx.globalCompositeOperation = "copy";
 
−
            //bufferContext.globalCompositeOperation = "copy";
 
−
        }
 
  
 
         var img = document.getElementById("img");
 
         var img = document.getElementById("img");

Revision as of 17:05, 1 March 2016

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=/w/images/e/e9/ACKsmass_logo.png
|width=600px
|height=200px
|padding=8px
|float=right
}}

This will give the following result:

Notes

  • 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 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=5891"