Fireworks · qwen3-coder-30b-a3b-instruct
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; } .title { position: relative; z-index: 2; color: white; text-align: center; text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); margin-bottom: 20px; } h1 { font-size: 3rem; margin-bottom: 10px; } p { font-size: 1.2rem; opacity: 0.8; } .instructions { position: absolute; bottom: 20px; width: 100%; text-align: center; color: rgba(255, 255, 255, 0.7); z-index: 2; font-size: 1rem; } </style> </head> <body> <div class="title"> <h1>Fireworks Display</h1> <p>Click anywhere to launch fireworks!</p> </div> <canvas id="fireworksCanvas"></canvas> <div class="instructions">Click anywhere on screen to create 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(); // Firework class class Firework { constructor(x, y, targetX, targetY) { this.x = x; this.y = y; this.targetX = targetX; this.targetY = targetY; this.speed = 5; this.angle = Math.atan2(targetY - y, targetX - x); this.velocity = { x: Math.cos(this.angle) * this.speed, y: Math.sin(this.angle) * this.speed }; this.trail = []; this.trailLength = 10; this.color = `hsl(${Math.random() * 360}, 100%, 60%)`; this.exploded = false; this.particles = []; this.particleCount = 150; } update() { if (!this.exploded) { // Add current position to trail this.trail.push({x: this.x, y: this.y}); if (this.trail.length > this.trailLength) { this.trail.shift(); } // Move firework this.x += this.velocity.x; this.y += this.velocity.y; // Check if reached target const distance = Math.sqrt( Math.pow(this.targetX - this.x, 2) + Math.pow(this.targetY - this.y, 2) ); if (distance < 5) { 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; for (let i = 0; i < this.particleCount; i++) { this.particles.push(new Particle(this.x, this.y)); } } 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.beginPath(); ctx.arc(point.x, point.y, 2, 0, Math.PI * 2); ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.5})`; ctx.fill(); } // Draw firework head ctx.beginPath(); ctx.arc(this.x, this.y, 4, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); } else { // Draw particles for (let i = 0; i < this.particles.length; i++) { this.particles[i].draw(); } } } } // Particle class class Particle { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 3 + 1; this.speed = Math.random() * 5 + 2; this.angle = Math.random() * Math.PI * 2; this.velocity = { x: Math.cos(this.angle) * this.speed, y: Math.sin(this.angle) * this.speed }; this.gravity = 0.05; this.friction = 0.98; this.color = `hsl(${Math.random() * 360}, 100%, 60%)`; this.alpha = 1; } 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 -= 0.005; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(${this.color.slice(4, -1)}, ${this.alpha})`; ctx.fill(); } } // Array to hold all fireworks let fireworks = []; // Handle click events canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Create firework from center to click position const centerX = canvas.width / 2; const centerY = canvas.height / 2; fireworks.push(new Firework(centerX, centerY, 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 faded 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; const centerX = canvas.width / 2; const centerY = canvas.height / 2; fireworks.push(new Firework(centerX, centerY, x, y)); } }, 1000); </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.