ナイアガラ

fireworks.js

(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);

index.html

<canvas id="hanabi"></canvas>

style.css

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #000;
}
canvas {
  padding: 0;
  margin: 0;
}