Xin chào, năm hết tết sắp đến chạy quanh cũng kiếm được một vài kiểu pháo hoa đẹp mắt cho blogspot mang về chia sẻ để anh em sử dụng tạm.
Pháo Hoa 1.
Demo
Hướng Dẫn :
Bước 1:Thêm đoạn HTML vào ngay sau <body>
<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>Bước 2:Thêm javascript sau vào trước </body> <script type='text/javascript'>
//<![CDATA[
window.onload = function(){
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
cw = window.innerWidth,
ch = window.innerHeight,
fireworks = [],
particles = [],
hue = 120,
limiterTotal = 20,
limiterTick = 0,
timerTotal = 30,
randomTime = 0,
timerTick = 0,
mousedown = false,
mx,
my;
canvas.width = cw;
canvas.height = ch;
//$('canvas').css("background-size":cw);
// var snd = new Audio("http://soundjax.com/reddo/38563%5EFirework.mp3"); // buffers automatically when created
var snd = new Audio("http://soundjax.com/reddo/51715%5Efirework.mp3");
// now we are going to setup our function placeholders for the entire demo
// get a random number within a range
function random( min, max ) {
return min + Math.random()*(max-min);
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
return Math.sqrt((p1x-p2x)*(p1x-p2x) + (p1y-p2y)*(p1y-p2y));
}
// create firework
function Firework( sx, sy, tx, ty ) {
//actual coordinates
this.x = sx;
this.y = sy;
//starting coordinate
this.sx = sx;
this.sy = sy;
//target coordinates
this.tx = tx;
this.ty = ty;
this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
this.distanceTraveled = 0;
//track past coordinates to creates a trail effect
this.coordinates = [];
this.coordinateCount = 2;
while(this.coordinateCount--) {
this.coordinates.push( [this.x, this.y ]);
}
this.angle = Math.atan2(ty - sy, tx - sx);
this.speed = 1;
this.acceleration = 1.2;
this.brightness = random(50, 70);
this.tragetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
// if(this.distanceTraveled >= this.distanceToTarget ){
// fireworks.splice(index, 1);
// }
if( this.targetRadius < 8){
this.targetRadius += 0.3;
}else{
this.targetRadius = 1;
}
this.speed *= this.acceleration;
var vx = Math.cos(this.angle)*this.speed,
vy = Math.sin(this.angle)*this.speed;
this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);
if(this.distanceTraveled >= this.distanceToTarget ){
this.coordinates.pop();
this.coordinates.unshift([this.tx, this.ty]);
//this.x = this.tx; this.y = this.ty;
createParticles(this.x, this.y);
snd.play();
this.draw();
fireworks.splice(index, 1);
} else {
this.x += vx;
this.y += vy;
}
this.coordinates.pop();
this.coordinates.unshift([this.x, this.y]);
};
// draw firework
Firework.prototype.draw = function() {
ctx.beginPath();
// move to the last tracked coordinate in the set, then draw a line to the current x and y
ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
ctx.lineTo( this.x, this.y );
ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
ctx.stroke();
// ctx.beginPath();
// ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI*2);
// ctx.stroke();
}
// create particle
function Particle( x, y, type ) {
this.x = x;
this.y = y;
this.type = type;
// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
this.coordinates = [];
this.coordinateCount = 6;
while( this.coordinateCount-- ) {
this.coordinates.push( [ this.x, this.y ] );
}
// TO Be Improved //
switch (type)
{
case 1: var variation = random(1, 5);
if (variation < 2)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 4;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 50, hue + 50 );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.01, 0.02 );
}else if (variation < 3)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 5 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 50, hue );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else if (variation < 4)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 8 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue, hue + 50 );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 50, hue + 50 );
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.3 );
}
break;
case 2: var variation = random(1, 5);
if (variation < 2)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 10 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 4;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 100;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.01, 0.02 );
}else if (variation < 3)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 21 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 100;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else if (variation < 4)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 3 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 100;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 5 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the othis.hue = 100;
this.hue = 100;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.3 );
}
break;
case 3: var variation = random(1, 5);
// var hue = 10;
if (variation < 2)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 10, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 4;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 60;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.01, 0.02 );
}else if (variation < 3)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 11, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 10;
this.brightness = random( 10, 20);
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else if (variation < 4)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 11, 18 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 90;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 11, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 120;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.3 );
}
break;
case 4: var variation = random(1, 5);
if (variation < 2)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 10 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 4;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 300;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.01, 0.02 );
}else if (variation < 3)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 21 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 300;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else if (variation < 4)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 3 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 300;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 5 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the othis.hue = 100;
this.hue = 100;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.3 );
}
break;
default:
}
}
// update particle
Particle.prototype.update = function( index ) {
// slow down the particle
this.speed *= this.friction;
// apply velocity
this.x += Math.cos( this.angle ) * this.speed;
this.y += Math.sin( this.angle ) * this.speed + this.gravity;
// fade out the particle
// this.alpha -= this.decay * this.alpha;
this.alpha -= this.decay;
if (this.type == 4 && this.alpha <= 0.5){
this.brightness += 50;
this.hue += 200;
if (this.brightness >= 200)
this.brightness = 0;
}
// remove the particle once the alpha is low enough, based on the passed in index
if( this.alpha <= this.decay ) {
particles.splice( index, 1 );
}
// remove last item in coordinates array
this.coordinates.pop();
// add current coordinates to the start of the array
this.coordinates.unshift( [ this.x, this.y ] );
}
// draw particle
Particle.prototype.draw = function() {
ctx. beginPath();
// move to the last tracked coordinates in the set, then draw a line to the current x and y
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();
}
// create particle group/explosion
function createParticles( x, y ) {
var particleCount = 300;
var type = Math.floor(random(1, 5));
while(particleCount--){
particles.push(new Particle(x, y, type));
}
}
// main demo loop
function loop() {
//requestAnimFrame(loop);
hue += 0.5;
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
ctx.fillRect(0, 0, cw, ch);
ctx.globalCompositeOperation = "lighter";
var i = fireworks.length;
while(i--)
{
fireworks[i].draw();
fireworks[i].update(i);
}
// loop over each particle, draw it, update it
var i = particles.length;
while( i-- ) {
particles[ i ].draw();
particles[ i ].update( i );
}
if( timerTick >= timerTotal + randomTime ){
if (!mousedown){
/* uniform */
// fireworks.push( new Firework(cw/2, ch, 100, random(0, ch/2)));
/* 0 to cw/2, more to*/
// fireworks.push( new Firework(cw/2, ch, Math.floor(Math.sqrt(random(0, cw*cw/4))), random(0, ch/2)));
var xPos = Math.pow(Math.floor((random(-Math.pow(cw/2, 1/3), Math.pow(cw/2, 1/3)))), 3);
xPos += cw/2;
fireworks.push( new Firework(cw/2, ch, xPos, random(0, ch/2)));
// fireworks.push( new Firework(cw/2, ch, random(-10, 100), random(0, ch/2)));
timerTick = 0;
randomTime = Math.pow(random(2, 4), 2);
}
} else {
timerTick++;
}
// limit the rate at which fireworks get launched when mouse is down
if( limiterTick >= limiterTotal ) {
if( mousedown ) {
// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
fireworks.push( new Firework( cw / 2, ch, mx, my ) );
limiterTick = 0;
} else {
limiterTick= limiterTotal;
}
} else {
limiterTick++;
}
}
// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
mx = e.pageX - canvas.offsetLeft;
my = e.pageY - canvas.offsetTop;
});
// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
e.preventDefault();
mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
e.preventDefault();
mousedown = false;
});
setInterval(loop, 25);
// (function game(){
// loop();
// setTimeout(game, Math.floor(random(30, 30)));
// })();
};
//]]>
</script>Lưu Ý : - Chỉnh mật độ pháo hoa ở trị số timerTotal = 30,
- Càng nhỏ càng ào ạt.
Pháo Hoa 2:
Đây là code tạo pháo hoa cho nền body,với hiệu ứng này pháo hoa không ào ạt mà chỉ có tính chất điểm tô cho nền blogspot mà cụ thể chỉ thấy ở các khe trống giữa main và sidebar và toàn bộ body khi xem trên laptop.
Khi rê chuột vào vùng hiệu ứng có hiệu lực, chỏ chuột có hình dấu cộng và pháo hoa sẽ xuất hiện nếu nhấp chuột.
Khi rê chuột vào vùng hiệu ứng có hiệu lực, chỏ chuột có hình dấu cộng và pháo hoa sẽ xuất hiện nếu nhấp chuột.
Demo:
Hướng Dẫn:
Bước 1:
Dán đoạn css sau vào trước thẻ </head>
<style type='text/css'>
canvas{
cursor:crosshair;
position:fixed;
width:100%;
height:100%;
background:#222;
display:block
</style>Bước 2:Thêm HTML sau vào ngay sau <body>
<canvas id='canvas' ></canvas>Bước 3:Dán javascript sau vào trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
window.requestAnimFrame = ( function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
var canvas = document.getElementById( 'canvas' ),
ctx = canvas.getContext( '2d' ),
cw = window.innerWidth,
ch = window.innerHeight,
fireworks = [],
particles = [],
hue = 120,
limiterTotal = 5,
limiterTick = 0,
timerTotal = 80,
timerTick = 0,
mousedown = false,
mx,
my;
canvas.width = cw;
canvas.height = ch;
function random( min, max ) {
return Math.random() * ( max - min ) + min;
}
function calculateDistance( p1x, p1y, p2x, p2y ) {
var xDistance = p1x - p2x,
yDistance = p1y - p2y;
return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
function Firework( sx, sy, tx, ty ) {
this.x = sx;
this.y = sy;
this.sx = sx;
this.sy = sy;
this.tx = tx;
this.ty = ty;
this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
this.distanceTraveled = 0;
this.coordinates = [];
this.coordinateCount = 3;
while( this.coordinateCount-- ) {
this.coordinates.push( [ this.x, this.y ] );
}
this.angle = Math.atan2( ty - sy, tx - sx );
this.speed = 2;
this.acceleration = 1.05;
this.brightness = random( 50, 70 );
this.targetRadius = 1;
}
Firework.prototype.update = function( index ) {
this.coordinates.pop();
this.coordinates.unshift( [ this.x, this.y ] );
if( this.targetRadius < 8 ) {
this.targetRadius += 0.3;
} else {
this.targetRadius = 1;
}
this.speed *= this.acceleration;
var vx = Math.cos( this.angle ) * this.speed,
vy = Math.sin( this.angle ) * this.speed;
this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
if( this.distanceTraveled >= this.distanceToTarget ) {
createParticles( this.tx, this.ty );
fireworks.splice( index, 1 );
} else {
this.x += vx;
this.y += vy;
}
}
Firework.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 = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
ctx.stroke();
ctx.beginPath();
ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
ctx.stroke();
}
function Particle( x, y ) {
this.x = x;
this.y = y;
this.coordinates = [];
this.coordinateCount = 5;
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 - 50, hue + 50 );
this.brightness = random( 50, 80 );
this.alpha = 1;
this.decay = random( 0.015, 0.03 );
}
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 particleCount = 30;
while( particleCount-- ) {
particles.push( new Particle( x, y ) );
}
}
function loop() {
requestAnimFrame( loop );
hue= random(0, 360 );
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect( 0, 0, cw, ch );
ctx.globalCompositeOperation = 'lighter';
var i = fireworks.length;
while( i-- ) {
fireworks[ i ].draw();
fireworks[ i ].update( i );
}
var i = particles.length;
while( i-- ) {
particles[ i ].draw();
particles[ i ].update( i );
}
if( timerTick >= timerTotal ) {
if( !mousedown ) {
fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
timerTick = 0;
}
} else {
timerTick++;
}
if( limiterTick >= limiterTotal ) {
if( mousedown ) {
fireworks.push( new Firework( cw / 2, ch, mx, my ) );
limiterTick = 0;
}
} else {
limiterTick++;
}
}
canvas.addEventListener( 'mousemove', function( e ) {
mx = e.pageX - canvas.offsetLeft;
my = e.pageY - canvas.offsetTop;
});
canvas.addEventListener( 'mousedown', function( e ) {
e.preventDefault();
mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
e.preventDefault();
mousedown = false;
});
window.onload = loop;
//]]>
</script>Lưu ý:
Với trường hợp bạn muốn giữ nguyên màu nền blogspot thì thực hiện như sau:
- Bỏ qua bước 1.
- Bước 2 thay bằng code:
Pháo Hoa 3.
Demo
Hướng Dẫn:
Bước 1:Thêm đoạn HTML vào ngay sau <body>
Chúc Bạn Thành Công!
Với trường hợp bạn muốn giữ nguyên màu nền blogspot thì thực hiện như sau:
- Bỏ qua bước 1.
- Bước 2 thay bằng code:
<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>
Chú Ý:
- Mặc định mật độ pháo hoa với trị số 80 nếu bạn muốn pháo hoa ào ạt hơn cho sướng thì giảm trị số này đi: timerTotal = 80,
Demo
Hướng Dẫn:
Bước 1:Thêm đoạn HTML vào ngay sau <body>
<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>Bước 2:Thêm javascript sau vào trước </body> <canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>
<script type='text/javascript'>
//<![CDATA[
const PARTICLES_PER_FIREWORK = 150; // 100 - 400 or try 1000
const FIREWORK_CHANCE = 0.02; // percentage, set to 0 and click instead
const BASE_PARTICLE_SPEED = 0.6; // between 0-4, controls the size of the overall fireworks
const FIREWORK_LIFESPAN = 600; // ms
const PARTICLE_INITIAL_SPEED = 4.5; // 2-8
// not so fun options =\
const GRAVITY = 9.8;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let particles = [];
let disableAutoFireworks = false;
let resetDisable = 0;
let loop = () => {
if (!disableAutoFireworks && Math.random() < FIREWORK_CHANCE) {
createFirework();
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((particle, i) => {
particle.animate();
particle.render();
if (particle.y > canvas.height
|| particle.x < 0
|| particle.x > canvas.width
|| particle.alpha <= 0
) {
particles.splice(i, 1);
}
});
requestAnimationFrame(loop);
};
let createFirework = (
x = Math.random() * canvas.width,
y = Math.random() * canvas.height
) => {
let speed = (Math.random() * 2) + BASE_PARTICLE_SPEED;
let maxSpeed = speed;
let red = ~~(Math.random() * 255);
let green = ~~(Math.random() * 255);
let blue = ~~(Math.random() * 255);
// use brighter colours
red = (red < 150 ? red + 150 : red);
green = (green < 150 ? green + 150 : green);
blue = (blue < 150 ? blue + 150 : blue);
// inner firework
for (let i = 0; i < PARTICLES_PER_FIREWORK; i++) {
let particle = new Particle(x, y, red, green, blue, speed);
particles.push(particle);
maxSpeed = (speed > maxSpeed ? speed : maxSpeed);
}
// outer edge particles to make the firework appear more full
for (let i = 0; i < 40; i++) {
let particle = new Particle(x, y, red, green, blue, maxSpeed, true);
particles.push(particle);
}
};
class Particle {
constructor(
x = 0,
y = 0,
red = ~~(Math.random() * 255),
green = ~~(Math.random() * 255),
blue = ~~(Math.random() * 255),
speed,
isFixedSpeed
) {
this.x = x;
this.y = y;
this.red = red;
this.green = green;
this.blue = blue;
this.alpha = 0.05;
this.radius = 1 + Math.random();
this.angle = Math.random() * 360;
this.speed = (Math.random() * speed) + 0.1;
this.velocityX = Math.cos(this.angle) * this.speed;
this.velocityY = Math.sin(this.angle) * this.speed;
this.startTime = (new Date()).getTime();
this.duration = Math.random() * 300 + FIREWORK_LIFESPAN;
this.currentDiration = 0;
this.dampening = 30; // slowing factor at the end
this.colour = this.getColour();
if (isFixedSpeed) {
this.speed = speed;
this.velocityY = Math.sin(this.angle) * this.speed;
this.velocityX = Math.cos(this.angle) * this.speed;
}
this.initialVelocityX = this.velocityX;
this.initialVelocityY = this.velocityY;
}
animate() {
this.currentDuration = (new Date()).getTime() - this.startTime;
// initial speed kick
if (this.currentDuration <= 200) {
this.x += this.initialVelocityX * PARTICLE_INITIAL_SPEED;
this.y += this.initialVelocityY * PARTICLE_INITIAL_SPEED;
this.alpha += 0.01;
this.colour = this.getColour(240, 240, 240, 0.9);
} else {
// normal expansion
this.x += this.velocityX;
this.y += this.velocityY;
this.colour = this.getColour(this.red, this.green, this.blue, 0.4 + (Math.random() * 0.3));
}
this.velocityY += GRAVITY / 1000;
// slow down particles at the end
if (this.currentDuration >= this.duration) {
this.velocityX -= this.velocityX / this.dampening;
this.velocityY -= this.velocityY / this.dampening;
}
if (this.currentDuration >= this.duration + this.duration / 1.1) {
// fade out at the end
this.alpha -= 0.02;
this.colour = this.getColour();
} else {
// fade in during expansion
if (this.alpha < 1) {
this.alpha += 0.03;
}
}
}
render() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.lineWidth = this.lineWidth;
ctx.fillStyle = this.colour;
ctx.shadowBlur = 8;
ctx.shadowColor = this.getColour(this.red + 150, this.green + 150, this.blue + 150, 1);
ctx.fill();
}
getColour(red, green, blue, alpha) {
return `rgba(${red || this.red}, ${green || this.green}, ${blue || this.blue}, ${alpha || this.alpha})`;
}
}
let updateCanvasSize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
// run it!
updateCanvasSize();
$(window).resize(updateCanvasSize);
$(canvas).on('click', (e) => {
createFirework(e.clientX, e.clientY);
// stop fireworks when clicked, re-enable after short time
disableAutoFireworks = true;
clearTimeout(resetDisable);
resetDisable = setTimeout(() => {
disableAutoFireworks = false;
}, 5000);
});
loop();
//]]>
</script>Lưu.Chúc Bạn Thành Công!
Thank For Blog.DoiSong24.Com
Leave a comment: