MediaWiki:Gadget-Confetti.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// == Confetti Effect ==
( function () {
    'use strict';

    var canvas, ctx, particles, animId;

    function random( min, max ) {
        return Math.random() * ( max - min ) + min;
    }

    function createParticle() {
        return {
            x:     random( 0, window.innerWidth ),
            y:     random( -20, 0 ),
            w:     random( 7, 14 ),
            h:     random( 4, 8 ),
            color: 'hsl(' + Math.floor( random( 0, 360 ) ) + ',90%,60%)',
            speed: random( 2, 6 ),
            angle: random( -0.4, 0.4 ),
            spin:  random( -0.15, 0.15 ),
            rot:   random( 0, Math.PI * 2 ),
            wobble: random( 0, Math.PI * 2 ),
            wobbleSpeed: random( 0.05, 0.12 )
        };
    }

    function launch( count ) {
        canvas = document.createElement( 'canvas' );
        canvas.style.cssText =
            'position:fixed;top:0;left:0;width:100%;height:100%;' +
            'pointer-events:none;z-index:99999;';
        canvas.width  = window.innerWidth;
        canvas.height = window.innerHeight;
        document.body.appendChild( canvas );
        ctx = canvas.getContext( '2d' );

        particles = [];
        for ( var i = 0; i < ( count || 150 ); i++ ) {
            particles.push( createParticle() );
        }

        function step() {
            ctx.clearRect( 0, 0, canvas.width, canvas.height );
            var alive = false;

            for ( var j = 0; j < particles.length; j++ ) {
                var p = particles[ j ];
                p.y       += p.speed;
                p.x       += Math.sin( p.wobble ) * 1.5;
                p.wobble  += p.wobbleSpeed;
                p.rot     += p.spin;

                if ( p.y < canvas.height + 20 ) {
                    alive = true;
                    ctx.save();
                    ctx.translate( p.x, p.y );
                    ctx.rotate( p.rot );
                    ctx.fillStyle = p.color;
                    ctx.fillRect( -p.w / 2, -p.h / 2, p.w, p.h );
                    ctx.restore();
                }
            }

            if ( alive ) {
                animId = requestAnimationFrame( step );
            } else {
                cancelAnimationFrame( animId );
                canvas.parentNode.removeChild( canvas );
            }
        }

        step();

        window.addEventListener( 'resize', function () {
            canvas.width  = window.innerWidth;
            canvas.height = window.innerHeight;
        } );
    }

    // Fire confetti when the DOM is ready
    mw.loader.using( 'mediawiki.util' ).done( function () {
        launch( 150 );
    } );

}() );