๐ค AI
Here's the p5.js code for an interactive fireworks display. When you click anywhere on the canvas, a firework will launch from the bottom, travel to your click position, and explode into a burst of colorful particles that fade out and fall with gravity.
I've added two classes, `Firework` and `Particle`, to manage the behavior and appearance of the fireworks and their individual particles.
---
### `index.html`
This file sets up the basic HTML structure, loads p5.js, and links to your sketch and styles.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Fireworks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Load p5.js library first -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<!-- Then load your sketch -->
<script src="sketch.js"></script>
</body>
</html>
```
---
### `style.css`
This CSS ensures the canvas fills the entire window and removes default body margins.
```css
html, body {
margin: 0;
padding: 0;
overflow: hidden; /* Hide scrollbars if canvas slightly exceeds window */
}
canvas {
display: block; /* Remove extra space below canvas */
}
```
---
### `sketch.js`
This is the core p5.js sketch that creates and manages the fireworks.
```js
// Array to hold all active firework objects
let fireworks = [];
// Gravity vector that affects particles
let gravity;
function setup() {
// Create a canvas that fills the entire browser window
createCanvas(windowWidth, windowHeight);
// Set the background to black for a night sky effect
background(0);
// Initialize gravity vector (downwards)
gravity = createVector(0, 0.2); // Adjust 0.2 for stronger/weaker gravity
// Set stroke weight for drawing points
strokeWeight(4);
// Set color mode to HSB for easier generation of bright, random colors
// Hue: 0-255 (full color spectrum)
// Saturation: 0-255 (0=grayscale, 255=vibrant)
// Brightness: 0-255 (0=black, 255=white)
// Alpha: 0-255 (0=transparent, 255=opaque)
colorMode(HSB, 255);
}
function draw() {
// Redraw background with slight transparency to create firework trails
background(0, 25); // 25 alpha value makes it fade slowly
// Loop through all fireworks from the end to the beginning
// This allows safe removal of fireworks from the array during iteration
for (let i = fireworks.length - 1; i >= 0; i--) {
let firework = fireworks[i];
// Update the firework's position and state
firework.update();
// Display the firework (or its particles if exploded)
firework.show();
// If the firework (or all its particles) has faded out, remove it
if (firework.done()) {
fireworks.splice(i, 1);
}
}
}
// Function called when the mouse is pressed
function mousePressed() {
// Create a new firework at the current mouse position
// The firework will start from the bottom and travel to this target
fireworks.push(new Firework(mouseX, mouseY));
}
// Function called when the browser window is resized
function windowResized() {
// Resize the canvas to match the new window dimensions
resizeCanvas(windowWidth, windowHeight);
}
// --- Firework Class ---
class Firework {
constructor(targetX, targetY) {
// Starting position at the bottom of the canvas, random X
this.pos = createVector(random(width), height);
// Target position (where the mouse was clicked)
this.target = createVector(targetX, targetY);
// Velocity vector calculated to reach the target from the starting position
this.vel = p5.Vector.sub(this.target, this.pos);
// Set the magnitude (speed) of the firework's ascent
this.vel.setMag(random(8, 12)); // Adjust 8, 12 for different firework speeds
// Acceleration vector (initially 0, gravity will be applied to particles)
this.acc = createVector(0, 0);
// Flag to check if the firework has exploded
this.exploded = false;
// Array to hold particles after explosion
this.particles = [];
// Random hue for this firework and its particles
this.hu = random(255);
}
// Check if the firework (or its particles) is completely done
done() {
// If exploded, check if all particles are done
if (this.exploded) {
return this.particles.length === 0;
} else {
// If not exploded, it's not done yet
return false;
}
}
// Update the firework's state (move or update particles)
update() {
if (!this.exploded) {
// Apply acceleration (currently 0 for firework's ascent, gravity affects particles)
this.vel.add(this.acc);
// Move the firework
this.pos.add(this.vel);
// Reset acceleration for next frame
this.acc.mult(0);
// Calculate distance to target
let d = p5.Vector.dist(this.pos, this.target);
// If the firework is close enough to its target, explode
if (d < 10) { // Adjust 10 for explosion threshold
this.explode();
this.exploded = true;
}
} else {
// If exploded, update each particle
for (let i = this.particles.length - 1; i >= 0; i--) {
let particle = this.particles[i];
particle.update();
// Remove particles that have faded out
if (particle.done()) {
this.particles.splice(i, 1);
}
}
}
}
// Display the firework (as a point or its particles)
show() {
if (!this.exploded) {
// Before explosion, draw the firework as a bright point
stroke(this.hu, 255, 255); // Full saturation and brightness
point(this.pos.x, this.pos.y);
} else {
// After explosion, draw each particle
for (let particle of this.particles) {
particle.show();
}
}
}
// Create particles when the firework explodes
explode() {
// Generate between 50 and 100 particles
for (let i = 0; i < random(50, 100); i++) {
// Create a new particle at the explosion position with the firework's hue
this.particles.push(new Particle(this.pos.x, this.pos.y, this.hu));
}
}
}
// --- Particle Class ---
class Particle {
constructor(x, y, hu) {
// Particle's position (explosion point)
this.pos = createVector(x, y);
// Random initial velocity, spreading outward
this.vel = p5.Vector.random2D();
this.vel.mult(random(1, 8)); // Adjust 1, 8 for different particle spread speeds
// Acceleration vector (gravity will be applied here)
this.acc = createVector(0, 0);
// Lifespan for fading out (starts fully opaque)
this.lifespan = 255;
// Hue inherited from the firework
this.hu = hu;
}
// Check if the particle has completely faded out
done() {
return this.lifespan < 0;
}
// Update the particle's state (move and fade)
update() {
// Apply gravity to acceleration
this.acc.add(gravity);
// Apply acceleration to velocity
this.vel.add(this.acc);
// Move the particle
this.pos.add(this.vel);
// Reset acceleration for next frame
this.acc.mult(0);
// Decrease lifespan to fade the particle
this.lifespan -= 5; // Adjust 5 for faster/slower fade
}
// Display the particle
show() {
// Set stroke color with fading alpha
stroke(this.hu, 255, 255, this.lifespan);
strokeWeight(2); // Slightly thinner stroke for particles
point(this.pos.x, this.pos.y);
}
}
```
