Fireworks

by Chris Watson

HTML

<canvas><!--
        +-----------------------------------------------------------+
        | (c) 2012 Chris Watson - do not copy without permission :) |
        +-----------------------------------------------------------+
--></canvas>
<form>
<input type="hidden" name="bang"...

CSS

body, html{
    height:100%;
    overflow:hidden;
}
canvas{
    background: #000;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}
#infoMsg{
    z-index:2;
    position:absolute;
    width:100%;
    height:100%;
    border:0;
    top:0;
    left:0;
}

JavaScript

var data = document.forms[0];
var bangData = data.bang.value;
var popData = data.pop.value;
var crackleData = data.crackle.value;
var screechData = data.screech.value;
var launchData = data.launch.value;
var w = window.innerWidth;
window.h = window.innerHeight; // accessible when masked by local variable h, in firework object
var b = document.body;
var canvas = document.getElementsByTagName('canvas')[0];

if (canvas.getContext){
infoMsg();
fillCanvasToPage();
var ctx = canvas.getContext('2d');
var x = w / 2, y = h; // centred coords
var fireworks = [];
var isRendering = true, autoLaunch = true;
var saveMsg = 'The background colour will not be saved.'
            + '\n\nThe exported PNG supports opacity, so a background can be added.';
    
b.onkeydown = function(e){ // for FF - http://www.quirksmode.org/js/keys.html
    var k = e.keyCode;
    switch(k){
        case 19 : case 80 : togglePause(); break; // pause | p
        case 66 :
            var bg = canvas.style.background;
            canvas.style.background =
                prompt('Background colour:'
                     + '\n  -  hexadecimal code'
                     + '\n  -  HTML colour name'
                     + '\n  -  RGB(A) / HSL(A)',
                       bg == '' ? '#000' : bg); break; // b
        case 32 :
            var f = fireworks[fireworks.length] = createRandomFirework(true); break; // space
        case 13 : case 48 :
            generateRandomFireworks(prompt('Number of fireworks:')); break; // enter | 0
        case 83 :
            var t = 'NOTE: there are currently no fireworks on the page.';
            if(saveMsg != null){
                alert(saveMsg + (fireworks.length == 0 ? '\n\n' + t : ''));
                saveMsg = null
            }
            else if(fireworks.length == 0)
                alert(t);
            window.open(canvas.toDataURL()); break; // s
        case 46 : fireworks.splice(0,1); break; // delete
        case 8 :...