Forked from: norahiko's 花火 - fireworks diff(43)

forked: 花火 - fireworks

norahiko

2011-07-02 02:40:25

License: MIT License

Fork: 0

Fav: 3

View: 2130

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 262 lines
HTML 14 lines
CSS 3 lines

forked: 花火 - fireworks

// forked from norahiko's "花火 - fireworks" http://jsdo.it/norahiko/ls6x
// =================================
// Const
// =================================
var PI = Math.PI;
var PI_2 = PI * 2;

// =================================
// Config
// =================================
var defaultConfig = {
    duration: 2000,         // ms
    delay: 0,               // ms
    radius: 5,              // px
    amount: 100,            // particle number
    speed: 12,
    gravity: 0.05,
    friction: 0.96,         
    reduction: 0.98,
    left: 0.5,
    top: 0.3,
    color: "#ff0000"
};

// =================================
// Main
// =================================
window.addEventListener("load", function(){
    Canvas.canvas = document.querySelector("canvas");
    Canvas.canvas.width = document.documentElement.clientWidth;
    Canvas.canvas.height = document.documentElement.clientHeight;
    Canvas.context = Canvas.canvas.getContext("2d");
    Canvas.context.fillStyle = "rgba(0, 0, 0, 0.05)";
    
    var num = 20;
    for(var i = 0; i < num; i++){
        Canvas.add(new Firework({
            duration: 800,
            delay: 50 * i,
            amount: 20,
            left: 1 / num * i,
            top:  0.3,
            gravity: 0.5,
            reduction: 1,
            radius: 2,
            friction: 0.9,
            speed: 15,
            color: "#ff6"
        }));
    }
    
    Canvas.start();
}, false);
// =================================
// Firework
// =================================
function Firework(config){
    this.setConfig(config || {});
    this.particleImage = createParticleImage(this.radius, this.color);
    this.diameter = this.radius * 2;
    this.isActive = true;
    this.fadeoutOpacity = 1;
}

Firework.prototype = {
    setConfig: function(config){
        for(var key in defaultConfig){
            if(config[key] === undefined){
                this[key] = defaultConfig[key];
            }else{
                this[key] = config[key];
            }
        }
    },
        
    initParticles: function(){
        this.particles = [];
        var x = this.canvas.width * this.left;
        var y = this.canvas.height * this.top;
        var maxSpeed = (this.speed / 2) * (this.speed / 2);
        
        while(this.particles.length < this.amount){
            var vx = (Math.random() - 0.5) * this.speed;
            var vy = (Math.random() - 0.5) * this.speed;         
            if(vx*vx + vy*vy <= maxSpeed){
                this.particles.push(new Particle(x, y, vx, vy));
            }
        }
    },
    
    update: function(passed){
        if(this.isActive === false ||
           this.started(passed) === false) return;
        
        if(this.ended(passed)){
            this.fadeout();
            return;
        }        
        this.move();
        this.render();
    },
    
    move: function(){
        var particles = this.particles;
        var particle;
        for(var i = 0, len = particles.length; i < len; i++){
            particle = particles[i];
            particle.vx *= this.friction;
            particle.vy = particle.vy * this.friction + this.gravity;
            particle.x += particle.vx;
            particle.y += particle.vy;
        }
    },
    
    render: function(){
        this.context.globalAlpha = 1;
        this.renderParticles();
    },
    
    renderParticles: function(){
        var diameter = this.diameter *= this.reduction;
        var context = this.context;
        var particles = this.particles;
        var particleImage = this.particleImage;
        var p;
        for(var i = 0, len = particles.length; i < len; i++){
            p = particles[i];
            context.drawImage(particleImage, p.x, p.y, diameter, diameter);
        }
    },
    
    started: function(passed){
        return this.delay < passed;
    },
    
    ended: function(passed){
        return this.duration + this.delay < passed;
    },
    
    fadeout: function(){
        this.fadeoutOpacity -= 0.1;
        if(this.fadeoutOpacity <= 0) {
            this.isActive = false;
            return;
        }
        this.move();
        this.context.globalAlpha = this.fadeoutOpacity;
        this.renderParticles();
    }
};

// =================================
// Particle
// =================================
function Particle(x, y, vx, vy){
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
}

// =================================
// Canvas
// =================================
var Canvas = {
    fireworks: [],
    
    add: function(firework){
        firework.canvas = this.canvas;
        firework.context = this.context;
        firework.initParticles();
        this.fireworks.push(firework);
    },
    
    start: function(){
        this.startTime = Number(new Date());
        this.update();
    },
    
    fill: function(){
        this.context.globalAlpha = 1;
        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
    },
    
    // main loop
    update: function(){
        this.fill();
        var passed = new Date() - this.startTime;
        var activeFireworkCount = 0;
        this.fireworks.forEach(function(firework){
            if(firework.isActive){
                firework.update(passed);
                activeFireworkCount++;
            }
        }.bind(this));
        
        if(0 < activeFireworkCount){
            requestAnimationFrame(this.update.bind(this));
        }else{
            requestAnimationFrame(this.fadeout.bind(this, 20));
        }
    },
    
    fadeout: function(count){
        if(count < 0){
            this.context.fillStyle = "black";
            this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
            return;    // animation end
        }
        this.context.globalAlpha = 1;
        this.context.fillStyle = "rgba(0, 0, 0, 0.15)";
        this.fill();
        requestAnimationFrame(this.fadeout.bind(this, count - 1));
    }
};

// =================================
// Utils
// =================================
if (Function.prototype.bind === undefined){
  Function.prototype.bind = function( obj ) {
    var slice = [].slice,
        args = slice.call(arguments, 1), 
        self = this, 
        bound = function () {
          return self.apply( obj || window ,  args.concat( slice.call(arguments) ) );    
        };
    bound.prototype = this.prototype;
    return bound;
  };
}

function createParticleImage(radius, color){
    var size = radius * 2;
    var canvas = document.createElement("canvas");
    canvas.width = canvas.height = size;
    var context = canvas.getContext("2d");
    
    var gradient = context.createRadialGradient(radius, radius, 0, radius, radius, size);
    gradient.addColorStop(0, "white");
    gradient.addColorStop(0.1, "white");
    gradient.addColorStop(0.3, color);
    gradient.addColorStop(1, "rgba(0, 0, 0, 0)");

context.fillStyle = gradient;
    context.beginPath();
    context.arc(radius, radius, radius, 0, PI_2, true);
    context.fill();
    //return canvas

var particle = new Image();
    particle.src = canvas.toDataURL();
    return particle;
}

//set window.requestAnimationFrame
(function (w, r) {
    w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
})(window, 'equestAnimationFrame');

forked: 花火 - fireworks

// forked from norahiko's "花火 - fireworks" http://jsdo.it/norahiko/ls6x // ================================= // Const // ================================= var PI = Math.PI; var PI_2 = PI * 2; // ================================= // Config // ================================= var defaultConfig = { duration: 2000, // ms delay: 0, // ms radius: 5, // px amount: 100, // particle number speed: 12, gravity: 0.05, friction: 0.96, reduction: 0.98, left: 0.5, top: 0.3, color: "#ff0000" }; // ================================= // Main // ================================= window.addEventListener("load", function(){ Canvas.canvas = document.querySelector("canvas"); Canvas.canvas.width = document.documentElement.clientWidth; Canvas.canvas.height = document.documentElement.clientHeight; Canvas.context = Canvas.canvas.getContext("2d"); Canvas.context.fillStyle = "rgba(0, 0, 0, 0.05)"; var num = 20; for(var i = 0; i < num; i++){ Canvas.add(new Firework({ duration: 800, delay: 50 * i, amount: 20, left: 1 / num * i, top: 0.3, gravity: 0.5, reduction: 1, radius: 2, friction: 0.9, speed: 15, color: "#ff6" })); } Canvas.start(); }, false); // ================================= // Firework // ================================= function Firework(config){ this.setConfig(config || {}); this.particleImage = createParticleImage(this.radius, this.color); this.diameter = this.radius * 2; this.isActive = true; this.fadeoutOpacity = 1; } Firework.prototype = { setConfig: function(config){ for(var key in defaultConfig){ if(config[key] === undefined){ this[key] = defaultConfig[key]; }else{ this[key] = config[key]; } } }, initParticles: function(){ this.particles = []; var x = this.canvas.width * this.left; var y = this.canvas.height * this.top; var maxSpeed = (this.speed / 2) * (this.speed / 2); while(this.particles.length < this.amount){ var vx = (Math.random() - 0.5) * this.speed; var vy = (Math.random() - 0.5) * this.speed; if(vx*vx + vy*vy <= maxSpeed){ this.particles.push(new Particle(x, y, vx, vy)); } } }, update: function(passed){ if(this.isActive === false || this.started(passed) === false) return; if(this.ended(passed)){ this.fadeout(); return; } this.move(); this.render(); }, move: function(){ var particles = this.particles; var particle; for(var i = 0, len = particles.length; i < len; i++){ particle = particles[i]; particle.vx *= this.friction; particle.vy = particle.vy * this.friction + this.gravity; particle.x += particle.vx; particle.y += particle.vy; } }, render: function(){ this.context.globalAlpha = 1; this.renderParticles(); }, renderParticles: function(){ var diameter = this.diameter *= this.reduction; var context = this.context; var particles = this.particles; var particleImage = this.particleImage; var p; for(var i = 0, len = particles.length; i < len; i++){ p = particles[i]; context.drawImage(particleImage, p.x, p.y, diameter, diameter); } }, started: function(passed){ return this.delay < passed; }, ended: function(passed){ return this.duration + this.delay < passed; }, fadeout: function(){ this.fadeoutOpacity -= 0.1; if(this.fadeoutOpacity <= 0) { this.isActive = false; return; } this.move(); this.context.globalAlpha = this.fadeoutOpacity; this.renderParticles(); } }; // ================================= // Particle // ================================= function Particle(x, y, vx, vy){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; } // ================================= // Canvas // ================================= var Canvas = { fireworks: [], add: function(firework){ firework.canvas = this.canvas; firework.context = this.context; firework.initParticles(); this.fireworks.push(firework); }, start: function(){ this.startTime = Number(new Date()); this.update(); }, fill: function(){ this.context.globalAlpha = 1; this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); }, // main loop update: function(){ this.fill(); var passed = new Date() - this.startTime; var activeFireworkCount = 0; this.fireworks.forEach(function(firework){ if(firework.isActive){ firework.update(passed); activeFireworkCount++; } }.bind(this)); if(0 < activeFireworkCount){ requestAnimationFrame(this.update.bind(this)); }else{ requestAnimationFrame(this.fadeout.bind(this, 20)); } }, fadeout: function(count){ if(count < 0){ this.context.fillStyle = "black"; this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); return; // animation end } this.context.globalAlpha = 1; this.context.fillStyle = "rgba(0, 0, 0, 0.15)"; this.fill(); requestAnimationFrame(this.fadeout.bind(this, count - 1)); } }; // ================================= // Utils // ================================= if (Function.prototype.bind === undefined){ Function.prototype.bind = function( obj ) { var slice = [].slice, args = slice.call(arguments, 1), self = this, bound = function () { return self.apply( obj || window , args.concat( slice.call(arguments) ) ); }; bound.prototype = this.prototype; return bound; }; } function createParticleImage(radius, color){ var size = radius * 2; var canvas = document.createElement("canvas"); canvas.width = canvas.height = size; var context = canvas.getContext("2d"); var gradient = context.createRadialGradient(radius, radius, 0, radius, radius, size); gradient.addColorStop(0, "white"); gradient.addColorStop(0.1, "white"); gradient.addColorStop(0.3, color); gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); context.fillStyle = gradient; context.beginPath(); context.arc(radius, radius, radius, 0, PI_2, true); context.fill(); //return canvas var particle = new Image(); particle.src = canvas.toDataURL(); return particle; } //set window.requestAnimationFrame (function (w, r) { w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); }; })(window, 'equestAnimationFrame');<canvas></canvas> <style> *{ margin: 0px; padding: 0px; } html, body{ width: 100%; height: 100%; background-color: #000; overflow: hidden; } </style>html{}

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/lifE/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/norahiko/lifE" title="forked: 花火 - fireworks">forked: 花火 - fireworks - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code