Fireworks · gpt-4.1-mini
Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.
Here is a complete self-contained index.html file implementing a full-screen canvas fireworks display. Click launches shells that burst into particles. Particles are gravity-affected, fade out, and disappear. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Fireworks Display</title> <style> html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; background: black; } canvas { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } </style> </head> <body> <canvas id="canvas"></canvas> <script> (() => { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let cw, ch; // Resize canvas to full window size function resize() { cw = window.innerWidth; ch = window.innerHeight; canvas.width = cw * devicePixelRatio; canvas.height = ch * devicePixelRatio; canvas.style.width = cw + 'px'; canvas.style.height = ch + 'px'; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.scale(devicePixelRatio, devicePixelRatio); } window.addEventListener('resize', resize); resize(); // Utility: random range function rand(min, max) { return Math.random() * (max - min) + min; } // Colors for fireworks bursts const COLORS = [ '#ff3f3f', '#ffaf3f', '#ffd93f', '#3fff8f', '#3fbfff', '#8f3fff', '#ff3fcf', '#3fffff', '#ffffff' ]; // Gravity constant (pixels per frame^2) const GRAVITY = 0.15; const PARTICLE_FRICTION = 0.98; class Particle { constructor(x, y, color, velX, velY) { this.x = x; this.y = y; this.color = color; this.velX = velX; this.velY = velY; this.alpha = 1; this.size = rand(2, 4); this.life = 60 + Math.random() * 20; // frames to live this.decay = 1 / this.life; } update() { this.velX *= PARTICLE_FRICTION; this.velY += GRAVITY; this.x += this.velX; this.y += this.velY; this.alpha -= this.decay; this.alpha = Math.max(this.alpha, 0); } draw(ctx) { ctx.save(); ctx.globalAlpha = this.alpha; ctx.fillStyle = this.color; ctx.shadowColor = this.color; ctx.shadowBlur = 8; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } alive() { return this.alpha > 0; } } class Shell { constructor(x, y) { this.x = x; this.y = ch; this.targetY = y; this.color = COLORS[Math.floor(Math.random() * COLORS.length)]; this.velY = -rand(6, 9); this.exploded = false; this.particles = []; this.xv = rand(-1, 1); } update() { if (!this.exploded) { this.x += this.xv; this.y += this.velY; this.velY += GRAVITY * 0.3; // gravity effect on shell upward movement if (this.velY >= 0 || this.y <= this.targetY) { this.exploded = true; this.explode(); } } else { this.particles.forEach(p => p.update()); this.particles = this.particles.filter(p => p.alive()); } } explode() { const count = 60 + Math.floor(Math.random() * 20); for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const speed = rand(2, 6); const vx = Math.cos(angle) * speed; const vy = Math.sin(angle) * speed; this.particles.push(new Particle(this.x, this.y, this.color, vx, vy)); } } draw(ctx) { if (!this.exploded) { ctx.save(); ctx.fillStyle = this.color; ctx.shadowColor = this.color; ctx.shadowBlur = 10; ctx.beginPath(); ctx.arc(this.x, this.y, 4, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } else { this.particles.forEach(p => p.draw(ctx)); } } done() { return this.exploded && this.particles.length === 0; } } const shells = []; function launchShell(x, y) { shells.push(new Shell(x, y)); } canvas.addEventListener('click', e => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; launchShell(x, y); }); // Main animation loop function animate() { // Clear with translucent black for trails effect ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fillRect(0, 0, cw, ch); shells.forEach(s => { s.update(); s.draw(ctx); }); // Remove done shells for (let i = shells.length - 1; i >= 0; i--) { if (shells[i].done()) shells.splice(i, 1); } requestAnimationFrame(animate); } animate(); })(); </script> </body> </html> ``` Open this file in a browser. Click anywhere to launch fireworks shells that explode into colored particle bursts affected by gravity, fading out with trails.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.