Fireworks · qwen3-30b-a3b-instruct-2507
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.
I'll create a single-page web app with a full-screen canvas that displays a fireworks display. Clicks will launch shells that explode into gravity-affected, fading particle bursts. Here's the complete index.html file: ```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 { overflow: hidden; background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; } canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .instructions { position: absolute; bottom: 20px; left: 20px; color: rgba(255, 255, 255, 0.7); font-family: Arial, sans-serif; font-size: 14px; text-align: center; pointer-events: none; } </style> </head> <body> <canvas id="fireworks"></canvas> <div class="instructions">Click anywhere to create fireworks!</div> <script> // Get the canvas and context const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); // Set canvas to full screen function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } // Initialize canvas size resizeCanvas(); window.addEventListener('resize', resizeCanvas); // Firework particle class class Particle { constructor(x, y, color, velocity) { this.x = x; this.y = y; this.color = color; this.velocity = velocity; this.gravity = 0.05; this.friction = 0.98; this.alpha = 1; this.size = Math.random() * 5 + 1; this.rotation = Math.random() * Math.PI * 2; this.rotationSpeed = Math.random() * 0.2 - 0.1; } update() { // Apply gravity this.velocity.y += this.gravity; // Apply friction this.velocity.x *= this.friction; // Update position this.x += this.velocity.x; this.y += this.velocity.y; // Update rotation this.rotation += this.rotationSpeed; // Reduce alpha for fade effect this.alpha -= 0.01; } draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotation); ctx.globalAlpha = this.alpha; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0, 0, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } } // Firework class class Firework { constructor(x, y, targetX, targetY, color) { this.x = x; this.y = y; this.targetX = targetX; this.targetY = targetY; this.color = color; this.distanceToTarget = Math.hypot(this.targetX - this.x, this.targetY - this.y); this.distanceTraveled = 0; this.velocity = { x: (this.targetX - this.x) / this.distanceToTarget * 8, y: (this.targetY - this.y) / this.distanceToTarget * 8 }; this.gravity = 0.05; this.trail = []; this.trailLength = 10; this.exploded = false; this.particles = []; this.particleCount = Math.floor(Math.random() * 80) + 40; this.colorPalette = [ '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFA500', '#800080', '#008000', '#FF69B4', '#4169E1', '#FF4500' ]; } update() { if (!this.exploded) { // Update position this.x += this.velocity.x; this.y += this.velocity.y; // Apply gravity to the firework this.velocity.y += this.gravity; // Update distance traveled this.distanceTraveled = Math.hypot(this.targetX - this.x, this.targetY - this.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 if (this.distanceTraveled < 1) { this.explode(); } } else { // Update particles for (let i = 0; i < this.particles.length; i++) { this.particles[i].update(); // Remove particles that are too faded if (this.particles[i].alpha <= 0) { this.particles.splice(i, 1); i--; } } } } explode() { this.exploded = true; // Create particles for (let i = 0; i < this.particleCount; i++) { const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 5 + 2; const velocity = { x: Math.cos(angle) * speed, y: Math.sin(angle) * speed }; // Random color from palette const color = this.colorPalette[Math.floor(Math.random() * this.colorPalette.length)]; this.particles.push(new Particle(this.x, this.y, color, velocity)); } } draw() { if (!this.exploded) { // Draw trail ctx.strokeStyle = this.color; ctx.lineWidth = 2; ctx.beginPath(); for (let i = 0; i < this.trail.length; i++) { const point = this.trail[i]; if (i === 0) { ctx.moveTo(point.x, point.y); } else { ctx.lineTo(point.x, point.y); } } ctx.stroke(); // Draw firework ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, 3, 0, Math.PI * 2); ctx.fill(); } else { // Draw particles for (let i = 0; i < this.particles.length; i++) { this.particles[i].draw(); } } } } // Create array to store all fireworks const fireworks = []; const colors = [ '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFA500', '#800080', '#008000', '#FF69B4', '#4169E1', '#FF4500' ]; // Animation loop function animate() { requestAnimationFrame(animate); // Clear canvas with semi-transparent black for trail effect ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Update and draw all fireworks for (let i = 0; i < fireworks.length; i++) { fireworks[i].update(); fireworks[i].draw(); // Remove exploded fireworks if all particles are gone if (fireworks[i].exploded && fireworks[i].particles.length === 0) { fireworks.splice(i, 1); i--; } } } // Start animation animate(); // Handle click events canvas.addEventListener('click', (event) => { const x = event.clientX; const y = event.clientY; // Create a random color const color = colors[Math.floor(Math.random() * colors.length)]; // Create a new firework const firework = new Firework( canvas.width / 2, canvas.height, x, y, color ); fireworks.push(firework); }); </script> </body> </html> ``` This web app includes: 1. A full-screen canvas that fills the browser window 2. Click events that launch fireworks from the bottom of the screen to the click position 3. Firework particles that: - Are affected by gravity (falling down) - Have a fade effect (alpha decreases over time) - Have rotation for visual interest - Use a color palette for diverse explosions 4. A trail effect showing the path of the firework 5. Proper cleanup of particles once they've faded out 6. Responsive design that works on different screen sizes Click anywhere on the screen to launch fireworks!
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.