Fireworks · llama-4-scout
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.
create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts, we will need to write HTML, CSS, and JavaScript code. Since the task requires a single self-contained file named `index.html`, we will combine CSS in a `<style>` tag and JavaScript in a `<script>` tag. Here's how you can do it: ```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, html { margin: 0; padding: 0; overflow: hidden; background-color: black; } #canvas { width: 100%; height: 100vh; display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script> document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Set canvas to full screen canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Define some colors const colors = ['#ff0', '#0ff', '#f0f', '#ff00ff', '#00ffff']; // Particle class class Particle { constructor(x, y, vx, vy, size, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.size = size; this.color = color; this.opacity = 1; } update() { this.x += this.vx; this.y += this.vy; this.vy += 0.05; // gravity this.opacity -= 0.01; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.globalAlpha = this.opacity; ctx.fill(); ctx.globalAlpha = 1; } } // Shell class class Shell { constructor(x, y) { this.x = x; this.y = y; this.exploded = false; this.particles = []; } update() { if (!this.exploded) { this.y -= 5; if (this.y < canvas.height / 2) { this.explode(); } } else { this.particles.forEach((particle, index) => { particle.update(); if (particle.opacity <= 0) { this.particles.splice(index, 1); } }); } } draw() { if (!this.exploded) { ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fillStyle = 'white'; ctx.fill(); } else { this.particles.forEach(particle => particle.draw()); } } explode() { this.exploded = true; for (let i = 0; i < 100; i++) { const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 5 + 2; const vx = Math.cos(angle) * speed; const vy = Math.sin(angle) * speed; const size = Math.random() * 2 + 1; const color = colors[Math.floor(Math.random() * colors.length)]; this.particles.push(new Particle(this.x, this.y, vx, vy, size, color)); } } } let shells = []; // Event listener for mouse click canvas.addEventListener('click', (e) => { shells.push(new Shell(e.clientX, canvas.height)); }); function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); shells.forEach((shell, index) => { shell.update(); shell.draw(); if (shell.exploded && shell.particles.length === 0) { shells.splice(index, 1); } }); requestAnimationFrame(loop); } loop(); }); </script> </body> </html> ``` This code creates a full-screen canvas and adds an event listener for mouse clicks. When the canvas is clicked, a new shell is launched from the click position at the bottom of the canvas. The shell moves upwards and explodes into particles at a certain height. These particles are affected by gravity and fade out over time. You can save this code into a file named `index.html` and open it in a web browser to see the fireworks display.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.