Fireworks · gpt-4o-mini
Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.
transcript · 4 messages
Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.
Here's a complete implementation of a fireworks display on a full-screen HTML canvas that allows users to launch fireworks by clicking on the canvas. The fireworks will explode into particle bursts that are affected by gravity and fade over time. Let's create the `index.html` file with the HTML, CSS, and JavaScript all in one. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fireworks Display</title> <style> body { margin: 0; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; background: black; display: block; } </style> </head> <body> <canvas id="fireworksCanvas"></canvas> <script> const canvas = document.getElementById('fireworksCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; class Particle { constructor(x, y, size, color) { this.x = x; this.y = y; this.size = size; this.color = color; this.speedX = (Math.random() - 0.5) * 6; this.speedY = (Math.random() - 0.5) * 6; this.gravity = 0.1; this.alpha = 1; } update() { this.speedY += this.gravity; this.x += this.speedX; this.y += this.speedY; this.alpha -= 0.01; // Fade effect } draw() { ctx.globalAlpha = this.alpha; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; // Reset alpha for other drawings } } class Firework { constructor(x, y) { this.x = x; this.y = y; this.particles = []; this.exploded = false; this.size = 5; this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)'; } update() { if (!this.exploded) { this.y -= 5; // Move upwards if (this.size > 0) this.size -= 0.1; // Increase size until explosion else this.explode(); } else { for (let particle of this.particles) { particle.update(); } } } explode() { this.exploded = true; let particleCount = 100; while (particleCount--) { this.particles.push(new Particle(this.x, this.y, Math.random() * 3 + 2, this.color)); } } draw() { if (!this.exploded) { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } else { for (let particle of this.particles) { particle.draw(); } } } } const fireworks = []; canvas.addEventListener('click', (event) => { const x = event.clientX; const y = event.clientY; fireworks.push(new Firework(x, y)); }); function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let firework of fireworks) { firework.update(); firework.draw(); } requestAnimationFrame(animate); } animate(); </script> </body> </html> ``` ### Explanation: - **HTML Structure**: The file contains a simple structure with a `canvas` element for rendering. - **CSS**: The CSS is set up to make the canvas fill the entire screen and have a black background. - **JavaScript**: - Classes are defined for `Particle` and `Firework`, with methods for updating position, drawing, and managing fading effects. - Particle bursts are generated upon clicking on the canvas, creating a visual fireworks display. - **Animation**: The `animate` function updates and draws the fireworks continuously. Now I'll create the `index.html` file with the provided content.
index.html (3651 bytes)Successfully wrote 3651 bytes to index.html
The `index.html` file has been successfully created with the fireworks display implementation. You can open this file in a web browser to see the interactive fireworks effect. Enjoy the show!
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Only a tiny red dot appears on click; no shell launch, explosion, or gravity particle effects render, and a JS error indicates a crash.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.
- Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.1) is negative.