shunito/fireworks.html

## fireworks.html
<!doctype html>

<html lang="jp">

<head>
    <meta charset="utf-8">
    <title>Fireworks Niagara</title>
    <meta name="description" content="Fireworks Niagara">
    <meta name="author" content="Shunsuke Ito">
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }

        canvas {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <canvas id="hanabi"></canvas>
    <script>
        (function (win) {

            Math.Radian = Math.PI * 2;

            var quantity = 1000,
                speed = 4,
                top = 30,
                left = 10,

                canvas = document.getElementById("hanabi"),
                ctx, cvW, cvH,

                angle, xyst,
                count = 0,
                first = null,
                old, i, p,

                py1, py2,
                nextY, nextX,

                b = document.body,
                d = document.documentElement,

                color = 0,
                colors_a = ['rgba(255,255,255,1)', 'rgba(255,255,170,1)', 'rgba(0,191,255,1)', 'rgba(0,255,0,1)',
                    'rgba(255,0,255,1)'
                ],
                colors_b = ['rgba(255,255,255,0.03)', 'rgba(255,255,170,0.03)', 'rgba(0,191,255,0.03)',
                    'rgba(0,255,0,0.03)', 'rgba(255,0,255,0.03)'
                ],
                color_a = colors_a[color],
                color_b = colors_b[color],
                cols = colors_a.length;

            ctx = canvas.getContext("2d");
            cvW = canvas.width = Math.max(b.clientWidth, b.scrollWidth, d.scrollWidth, d.clientWidth);
            cvH = canvas.height = Math.max(b.clientHeight, b.scrollHeight, d.scrollHeight, d.clientHeight);

            var span = 40,
                step = -1,
                line = Math.floor(cvW / span),
                length, l2;

            length = cvH > 400 ? 400 : Math.floor(cvH * 0.8);
            l2 = length + 200;

            win.requestAnimationFrame = (function () {
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback, element) {
                        window.setTimeout(callback, 1000 / 60);
                    };
            })();

            function Particle() {
                this.initialize.apply(this, arguments);
            }

            Particle.prototype = {
                /** コンストラクタ */
                initialize: function (x, y) {
                    this.x = x;
                    this.y = y;
                },
                x: 0, // X座標
                y: 0, // X座標
                vx: 0, // X方向の速さ
                vy: 0, // Y方向の速さ
                next: null // LinkedListの参照
            };

            for (i = 0; i < quantity; i++) {
                angle = Math.Radian / 4 + Math.random() * 0.1 - 0.05;
                xyst = Math.random() * speed + speed;
                p = new Particle(-30, top);

                p.vx = Math.cos(angle) * xyst;
                p.vy = Math.sin(angle) * xyst;

                if (first === null) {
                    first = old = p;
                } else {
                    old.next = p;
                    old = p;
                }
            }


            ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
            ctx.lineWidth = 1;
            ctx.strokeStyle = "rgba(255, 255, 255, 1)";

            function animationLoop() {
                var n = first;

                ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
                ctx.fillRect(0, 0, cvW, cvH);
                ctx.strokeStyle = color_a;

                do {
                    nextY = n.y + n.vy;
                    nextX = n.x + n.vx;
                    ctx.beginPath();
                    ctx.moveTo(n.x, n.y);
                    ctx.lineTo(nextX, nextY);
                    ctx.stroke();

                    py2 = length + (length - nextY);

                    if (py2 < l2) {
                        py1 = length + ((length - nextY) + n.vy) / 10;
                        ctx.save();
                        ctx.strokeStyle = color_b;
                        ctx.beginPath();
                        ctx.moveTo(n.x, py1);
                        ctx.lineTo(nextX, py2);
                        ctx.stroke();
                        ctx.restore();
                    }

                    n.x = nextX;
                    n.y = nextY;

                    if (n.x < 0 || n.x > cvW || n.y < 0 || n.y > length) {
                        n.x = Math.floor(Math.random() * step + 1) * span;
                        n.y = top;
                    }

                } while (n = n.next);

                requestAnimationFrame(animationLoop);
                count++;
            }

            setInterval(function () {
                color = Math.floor(Math.random() * cols);
                color_a = colors_a[color];
                color_b = colors_b[color];
            }, 3000);

            setInterval(function () {
                if (step < line) {
                    step++;
                }
            }, 300);


            animationLoop();

        })(this);
    </script>
</body>

</html>
	<!doctype html>

	<html lang="jp">

	<head>
	<meta charset="utf-8">
	<title>Fireworks Niagara</title>
	<meta name="description" content="Fireworks Niagara">
	<meta name="author" content="Shunsuke Ito">
	<style>
	body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	background-color: #000;
	}

	canvas {
	padding: 0;
	margin: 0;
	}
	</style>
	</head>

	<body>
	<canvas id="hanabi"></canvas>
	<script>
	(function (win) {

	Math.Radian = Math.PI * 2;

	var quantity = 1000,
	speed = 4,
	top = 30,
	left = 10,

	canvas = document.getElementById("hanabi"),
	ctx, cvW, cvH,

	angle, xyst,
	count = 0,
	first = null,
	old, i, p,

	py1, py2,
	nextY, nextX,

	b = document.body,
	d = document.documentElement,

	color = 0,
	colors_a = ['rgba(255,255,255,1)', 'rgba(255,255,170,1)', 'rgba(0,191,255,1)', 'rgba(0,255,0,1)',
	'rgba(255,0,255,1)'
	],
	colors_b = ['rgba(255,255,255,0.03)', 'rgba(255,255,170,0.03)', 'rgba(0,191,255,0.03)',
	'rgba(0,255,0,0.03)', 'rgba(255,0,255,0.03)'
	],
	color_a = colors_a[color],
	color_b = colors_b[color],
	cols = colors_a.length;

	ctx = canvas.getContext("2d");
	cvW = canvas.width = Math.max(b.clientWidth, b.scrollWidth, d.scrollWidth, d.clientWidth);
	cvH = canvas.height = Math.max(b.clientHeight, b.scrollHeight, d.scrollHeight, d.clientHeight);

	var span = 40,
	step = -1,
	line = Math.floor(cvW / span),
	length, l2;

	length = cvH > 400 ? 400 : Math.floor(cvH * 0.8);
	l2 = length + 200;

	win.requestAnimationFrame = (function () {
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function (callback, element) {
	window.setTimeout(callback, 1000 / 60);
	};
	})();

	function Particle() {
	this.initialize.apply(this, arguments);
	}

	Particle.prototype = {
	/** コンストラクタ */
	initialize: function (x, y) {
	this.x = x;
	this.y = y;
	},
	x: 0, // X座標
	y: 0, // X座標
	vx: 0, // X方向の速さ
	vy: 0, // Y方向の速さ
	next: null // LinkedListの参照
	};

	for (i = 0; i < quantity; i++) {
	angle = Math.Radian / 4 + Math.random() * 0.1 - 0.05;
	xyst = Math.random() * speed + speed;
	p = new Particle(-30, top);

	p.vx = Math.cos(angle) * xyst;
	p.vy = Math.sin(angle) * xyst;

	if (first === null) {
	first = old = p;
	} else {
	old.next = p;
	old = p;
	}
	}


	ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "rgba(255, 255, 255, 1)";

	function animationLoop() {
	var n = first;

	ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
	ctx.fillRect(0, 0, cvW, cvH);
	ctx.strokeStyle = color_a;

	do {
	nextY = n.y + n.vy;
	nextX = n.x + n.vx;
	ctx.beginPath();
	ctx.moveTo(n.x, n.y);
	ctx.lineTo(nextX, nextY);
	ctx.stroke();

	py2 = length + (length - nextY);

	if (py2 < l2) {
	py1 = length + ((length - nextY) + n.vy) / 10;
	ctx.save();
	ctx.strokeStyle = color_b;
	ctx.beginPath();
	ctx.moveTo(n.x, py1);
	ctx.lineTo(nextX, py2);
	ctx.stroke();
	ctx.restore();
	}

	n.x = nextX;
	n.y = nextY;

	if (n.x < 0 \|\| n.x > cvW \|\| n.y < 0 \|\| n.y > length) {
	n.x = Math.floor(Math.random() * step + 1) * span;
	n.y = top;
	}

	} while (n = n.next);

	requestAnimationFrame(animationLoop);
	count++;
	}

	setInterval(function () {
	color = Math.floor(Math.random() * cols);
	color_a = colors_a[color];
	color_b = colors_b[color];
	}, 3000);

	setInterval(function () {
	if (step < line) {
	step++;
	}
	}, 300);


	animationLoop();

	})(this);
	</script>
	</body>

	</html>