Difference between revisions of "Widget:Logo"
(See: didn't have enough time to even write the preparations properly) |
(added new way to draw flakes) |
||
| Line 48: | Line 48: | ||
var buffer; | var buffer; | ||
var bufferContext; | var bufferContext; | ||
| + | var hashParams = location.hash.split("#").slice(1); | ||
| + | var debug = hashParams.indexOf("debug"); | ||
| + | //mw.config.set("debug", true) | ||
function blink() | function blink() | ||
| Line 97: | Line 100: | ||
// 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 ( !updateFlake( flake, dynamicImage ) ) | + | if ( debug ? (!updateFlakeCanvas( flake, bufferContext )) : (!updateFlake( flake, dynamicImage )) ) |
{ | { | ||
// Fixate flake | // Fixate flake | ||
| − | pixelPos = ( flake.x + width * flake.y ) * 4; | + | if ( debug ) |
| − | + | { | |
| − | + | bufferContext.fillRect( flake.x, flake.y, 1, 1 ); | |
| − | + | } | |
| − | + | else | |
| − | + | { | |
| − | + | 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 | ||
| Line 117: | Line 124: | ||
// Draw the dynamic image | // Draw the dynamic image | ||
| − | ctx. | + | if ( debug ) |
| − | + | ctx.drawImage( bufferContext, 0, 0 ); | |
| − | + | else | |
| + | ctx.putImageData( dynamicImage, 0, 0 ); | ||
} | } | ||
| Line 246: | Line 254: | ||
// 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 264: | Line 324: | ||
function window_load() | function window_load() | ||
{ | { | ||
| − | console && console.log( "winter:", is_winter() ); | + | if ( debug ) |
| − | + | { | |
| + | console && console.log( "winter:", is_winter() ); | ||
| + | console && console.log( "winter holiday:", is_winter_holiday() ); | ||
| + | } | ||
var logo = document.getElementById( "logo" ); | var logo = document.getElementById( "logo" ); | ||
| Line 275: | Line 338: | ||
bufferContext = buffer.getContext('2d'); | bufferContext = buffer.getContext('2d'); | ||
bufferContext.drawImage( logo, 0, 0, buffer.width, buffer.height ); | bufferContext.drawImage( logo, 0, 0, buffer.width, buffer.height ); | ||
| + | bufferContext.fillStyle = 'white'; | ||
| + | bufferContext.shadowBlur = 0; | ||
var img = document.getElementById("img"); | var img = document.getElementById("img"); | ||
Revision as of 11:25, 15 January 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=https://ackspace.nl/w/images/e/e9/ACKsmass_logo.png
|width=600px
|height=200px
|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.
