Created
December 1, 2014 10:35
-
-
Save takatama/19d8fb8dd660a355ec74 to your computer and use it in GitHub Desktop.
花火
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
http://thecodeplayer.com/walkthrough/canvas-fireworks-tutorial | |
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
canvas { | |
display: block; | |
} | |
body { | |
background: #000; | |
margin: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<canvas id="canvas">Canvas is not supported in this browser.</canvas> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
var hue = 120; | |
var particles = []; | |
var canvas = document.getElementById('canvas'), | |
ctx = canvas.getContext('2d'), | |
cw = window.innerWidth, | |
ch = window.innerHeight; | |
canvas.width = cw; | |
canvas.height = ch; | |
function random(min, max) { | |
return Math.random() * (max - min) + min; | |
} | |
function Particle(x, y) { | |
this.x = x; this.y = y; | |
this.coordinates = []; | |
this.coordinateCount = 3; | |
while (this.coordinateCount--) { | |
this.coordinates.push([this.x, this.y]); | |
} | |
this.angle = random(0, Math.PI * 2); | |
this.speed = random(1, 10); | |
this.friction = 0.95; | |
this.gravity = 1; | |
this.hue = random(hue - 20, hue + 20); | |
this.brightness = random(50, 80); | |
this.alpha = 1; | |
//残像を残したければ小さくする | |
this.decay = random(0.01, 0.02); | |
} | |
Particle.prototype.update = function(index) { | |
this.coordinates.pop(); | |
this.coordinates.unshift([this.x, this.y]); | |
this.speed *= this.friction; | |
this.x += Math.cos(this.angle) * this.speed; | |
this.y += Math.sin(this.angle) * this.speed + this.gravity; | |
this.alpha -= this.decay; | |
if (this.alpha <= this.decay) { | |
particles.splice(index, 1); | |
} | |
}; | |
Particle.prototype.draw = function() { | |
ctx.beginPath(); | |
ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]); | |
ctx.lineTo(this.x, this.y); | |
ctx.strokeStyle = 'hsla(' + this.hue + ',100%,' + this.brightness + '%,' + this.alpha + ')'; | |
ctx.stroke(); | |
}; | |
function createParticles(x, y) { | |
var particlesCount = parseInt(random(50, 200)); | |
while (particlesCount--) { | |
particles.push(new Particle(x, y)); | |
} | |
} | |
window.requestAnimFrame = (function() { | |
return window.requestAnimationFrame || | |
window.webkitRequestAnimationFrame || | |
window.mozRequestAnimationFrame || | |
function (callback) { | |
window.setTimeout(callback, 1000 / 60); | |
}; | |
})(); | |
function createRandomParticles() { | |
var count = parseInt(random(1, 8)); | |
while(count--) { | |
setTimeout(function() { | |
hue += 30; | |
createParticles(random(0, cw), random(0, ch)); | |
}, parseInt(random(50, 300))); | |
} | |
} | |
var tick = 0, fireTick = 100; | |
function loop() { | |
requestAnimFrame(loop); | |
//軌跡はそのまま、透明度0.5で背景を黒で塗る | |
ctx.globalCompositeOperation = 'destination-out'; | |
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; | |
ctx.fillRect(0, 0, cw, ch); | |
//光が重なったら明るくする | |
ctx.globalCompositeOperation = 'lighter'; | |
var i = particles.length; | |
while(i--) { | |
particles[i].draw(); | |
particles[i].update(i); | |
} | |
tick++; | |
if (tick > fireTick) { | |
createRandomParticles(); | |
tick = parseInt(random(0, 50)); | |
} | |
hue += 50; | |
} | |
canvas.addEventListener('mousedown', function(e) { | |
var x = e.pageX - canvas.offsetLeft; | |
var y = e.pageY - canvas.offsetTop; | |
createParticles(x, y); | |
}); | |
window.onload = loop; | |
}()); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment