Fireworks!
How do I make an fireworks!?
A fireworks effect using canvas. Each firework explodes in a few more. Click to boom!I saw some cool fireworks effects coming by (here, here and here), which got me started as well :) . What is a fireworks!? How do you make a fireworks!? This script and codes were developed by Pimskie on 12 June 2022, Sunday.
Fireworks! - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fireworks!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdn.rawgit.com/josephg/noisejs/master/perlin.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fireworks! - Script Codes CSS Codes
html,
body { margin: 0; padding: 0; overflow: hidden;
}
canvas { background: #000;
}
Fireworks! - Script Codes JS Codes
const randomBetween = (min, max) => ~~(Math.random() * (max - min + 1)) + min;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const PI2 = Math.PI * 2;
// all set in `setStage`
let canvasWidth;
let canvasHeight;
let canvasMidX;
let canvasMidY;
let particles = [];
let rafId = null;
let timeoutId = null;
let automate = true;
let tick = 0;
let frame = 0;
noise.seed(Math.random());
class Particle { constructor(options) { const defaults = { x: 0, y: 0, radius: 10, direction: 0, velocity: 0, explode: false }; Object.assign(this, defaults, options); this.velX = Math.cos(this.direction) * this.velocity; this.velY = Math.sin(this.direction) * this.velocity; this.friction = 0.9; this.decay = randomBetween(90, 91) * 0.01; this.gravity = this.radius * 0.01; } update() { this.x += this.velX; this.y += this.velY; this.velX *= this.friction; this.velY *= this.friction; this.velocity *= this.friction; // uncomment for a gravity like effect // this.velY += this.gravity; this.radius *= this.decay; this.gravity += 0.05; }
}
const clear = () => { ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = 'hsla(0, 0%, 0%, 0.5)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.globalCompositeOperation = 'lighter';
}
const setStage = () => { clear(); canvasWidth = window.innerWidth; canvasHeight = window.innerHeight; midX = canvasWidth >> 1; midY = canvasHeight >> 1; canvas.width = canvasWidth; canvas.height = canvasHeight;
}
const createRandomParticles = () => { const margin = 100; const x = randomBetween(margin, canvasWidth - margin); const y = randomBetween(margin, canvasHeight - margin); createParticles(x, y);
}
const boom = (e) => { createParticles(e.clientX, e.clientY);
}
const createParticles = (x, y) => { let numParticles = 50; while (numParticles--) { const direction = Math.random() * PI2; const velocity = randomBetween(10, 20); const radius = 10 + (Math.random() * 20); const explode = true; const particle = new Particle({ x, y, direction, velocity, radius, explode }); particles.push(particle); }
}
const loop = () => { clear(); if (automate && frame % 75 === 0) { createRandomParticles(); } particles.forEach((particle, index) => { // determine color const hue = (noise.perlin2(tick, tick) * 360); const fill = `hsl(${hue}, 80%, 50%)`; // draw and update every existing particle ctx.beginPath(); ctx.fillStyle = fill; ctx.arc(particle.x, particle.y, particle.radius, 0, PI2); ctx.fill(); ctx.closePath(); // update particle's properties particle.update(); // check if particle should explode and create new particles if (Math.abs(particle.radius) <= 2 && particle.explode) { particle.explode = false; let children = 10; while (children--) { particles.push(new Particle({ x: particle.x, y: particle.y, radius: particle.radius * 4, direction: Math.random() * PI2, velocity: particle.velocity * (randomBetween(2, 10)), explode: false })); } } if (particle.radius <= 0.1 || particle.velocity <= 0.1) { particles.splice(particles.indexOf(particle), 1); } }); tick += 0.01; frame++; rafId = requestAnimationFrame(loop);
}
canvas.addEventListener('mouseout', (e) => { automate = true;
});
canvas.addEventListener('mouseover', (e) => { automate = false;
});
canvas.addEventListener('mousedown', boom);
window.addEventListener('resize', setStage);
document.body.appendChild(canvas);
setStage();
createRandomParticles();
loop();
Developer | Pimskie |
Username | pimskie |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 3,323 Kb |
Views | 66,792 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Apollonian gasket | 9,268 Kb |
A Pen by pimskie | 3,699 Kb |
Wave | 3,651 Kb |
Tree mirror | 3,472 Kb |
Neon spring trails | 3,214 Kb |
Duplicate geometry | 4,190 Kb |
Exploding hamburger - and more | 7,785 Kb |
Snow | 2,594 Kb |
A Pen by pimskie | 2,486 Kb |
Rainbow particles | 3,673 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Codero Sitemap | S1m0ne | 28,169 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Social Profiles | Lachlanjc | 1,939 Kb |
Testing Code Pen | Jduprey | 1,468 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!