Fireworks · qwen3-coder-flash
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.
```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> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Arial', sans-serif; } canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .instructions { position: absolute; bottom: 20px; color: rgba(255, 255, 255, 0.7); text-align: center; font-size: 16px; z-index: 2; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); pointer-events: none; } .title { position: absolute; top: 20px; color: rgba(255, 255, 255, 0.9); text-align: center; font-size: 32px; z-index: 2; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); pointer-events: none; width: 100%; } </style> </head> <body> <div class="title">Fireworks Display</div> <canvas id="fireworksCanvas"></canvas> <div class="instructions">Click anywhere to launch fireworks</div> <script> // Canvas setup const canvas = document.getElementById('fireworksCanvas'); const ctx = canvas.getContext('2d'); // Set canvas to full window size function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); // Fireworks system const fireworks = []; const particles = []; const colors = [ '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40' ]; // Particle class class Particle { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.radius = Math.random() * 2 + 1; this.velocity = { x: (Math.random() - 0.5) * 10, y: (Math.random() - 0.5) * 10 }; this.alpha = 1; this.gravity = 0.05; this.friction = 0.98; this.decay = Math.random() * 0.03 + 0.005; } update() { this.velocity.x *= this.friction; this.velocity.y *= this.friction; this.velocity.y += this.gravity; this.x += this.velocity.x; this.y += this.velocity.y; this.alpha -= this.decay; } draw() { ctx.save(); ctx.globalAlpha = this.alpha; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } } // Firework shell class class Firework { constructor(x, y) { this.x = x; this.y = y; this.targetY = Math.random() * canvas.height * 0.4 + canvas.height * 0.1; this.velocity = { y: -Math.random() * 5 - 5 }; this.gravity = 0.05; this.color = colors[Math.floor(Math.random() * colors.length)]; this.particles = []; this.exploded = false; this.trail = []; this.trailLength = 10; } update() { if (!this.exploded) { this.velocity.y += this.gravity; this.y += this.velocity.y; // Add to trail this.trail.push({x: this.x, y: this.y}); if (this.trail.length > this.trailLength) { this.trail.shift(); } // Check if reached target height if (this.y <= this.targetY) { this.explode(); } } else { // Update particles for (let i = this.particles.length - 1; i >= 0; i--) { this.particles[i].update(); if (this.particles[i].alpha <= 0) { this.particles.splice(i, 1); } } } } explode() { this.exploded = true; const particleCount = Math.random() * 100 + 100; for (let i = 0; i < particleCount; i++) { this.particles.push(new Particle(this.x, this.y, this.color)); } } draw() { if (!this.exploded) { // Draw trail for (let i = 0; i < this.trail.length; i++) { const point = this.trail[i]; const alpha = i / this.trail.length; ctx.save(); ctx.globalAlpha = alpha; ctx.beginPath(); ctx.arc(point.x, point.y, 2, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } // Draw firework head ctx.save(); ctx.globalAlpha = 0.8; ctx.beginPath(); ctx.arc(this.x, this.y, 4, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } else { // Draw particles for (const particle of this.particles) { particle.draw(); } } } } // Create fireworks on click canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; fireworks.push(new Firework(x, y)); }); // Animation loop function animate() { // Fade out effect ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Update and draw fireworks for (let i = fireworks.length - 1; i >= 0; i--) { fireworks[i].update(); fireworks[i].draw(); // Remove fireworks that have exploded and all particles are gone if (fireworks[i].exploded && fireworks[i].particles.length === 0) { fireworks.splice(i, 1); } } requestAnimationFrame(animate); } // Start animation animate(); // Create some initial fireworks setTimeout(() => { for (let i = 0; i < 5; i++) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; fireworks.push(new Firework(x, y)); } }, 500); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.