Fireworks · gpt-oss-safeguard-20b
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.
thinking
We need to create single-page web app index.html. Use canvas full-screen. On click, create shells that move upward and then explode into particles with gravity and fade. Simple physics. We'll write HTML with canvas and script. Use CSS to set body margin 0, overflow hidden, canvas width/height to window.innerWidth/height; resize event. We'll implement Particle class, Shell class. We need to keep all in index.html. We'll write. Let's produce final.
Below is the complete `index.html` that implements a full‑screen fireworks display. Clicking anywhere on the canvas launches a shell that rises, then explodes into a gravity‑affected, fading particle burst. No external resources are used – all CSS and JavaScript are embedded directly in the file. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fireworks Canvas</title> <style> body, html { margin:0; padding:0; overflow:hidden; background:#000; } canvas { display:block; } </style> </head> <body> <canvas id="fireworks"></canvas> <script> (() => { const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); let width, height; const resize = () => { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; }; window.addEventListener('resize', resize); resize(); // Utility const randRange = (min, max) => Math.random() * (max - min) + min; const hue = () => randRange(0, 360); // Particle class class Particle { constructor(x, y, vx, vy, color, life) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.color = color; this.life = life; this.age = 0; this.size = randRange(2, 4); } update(dt) { this.vy += 30 * dt; // gravity this.x += this.vx * dt; this.y += this.vy * dt; this.age += dt; } draw(ctx) { const alpha = 1 - this.age / this.life; ctx.fillStyle = `rgba(${this.color.r},${this.color.g},${this.color.b},${alpha})`; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI*2); ctx.fill(); } isDead() { return this.age >= this.life; } } // Shell (rocket) class class Shell { constructor(x, y) { this.x = x; this.y = y; this.vy = randRange(-250, -350); this.vx = randRange(-50, 50); this.color = { r: 255, g: 255, b: 255 }; // white this.exploded = false; this.life = randRange(1.5, 2.5); this.age = 0; this.particles = []; } update(dt) { if (!this.exploded) { this.vy += 100 * dt; // gravity this.x += this.vx * dt; this.y += this.vy * dt; this.age += dt; if (this.age >= this.life || this.vy > 0) { // peak reached this.explode(); this.exploded = true; } } else { this.particles.forEach(p => p.update(dt)); this.particles = this.particles.filter(p => !p.isDead()); } } draw(ctx) { if (!this.exploded) { ctx.fillStyle = `rgb(${this.color.r},${this.color.g},${this.color.b})`; ctx.beginPath(); ctx.arc(this.x, this.y, 3, 0, Math.PI*2); ctx.fill(); } this.particles.forEach(p => p.draw(ctx)); } explode() { const count = Math.floor(randRange(30, 80)); for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const speed = randRange(50, 200); const vx = Math.cos(angle) * speed; const vy = Math.sin(angle) * speed; const col = { r: Math.floor(randRange(200, 255)), g: Math.floor(randRange(200, 255)), b: Math.floor(randRange(200, 255)) }; this.particles.push(new Particle(this.x, this.y, vx, vy, col, randRange(1, 2))); } } isDead() { return this.exploded && this.particles.length === 0; } } const shells = []; canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; shells.push(new Shell(x, y)); }); let lastTime = 0; function loop(time) { const dt = (time - lastTime) / 1000 || 0; lastTime = time; ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fillRect(0, 0, width, height); shells.forEach(s => s.update(dt)); shells.forEach(s => s.draw(ctx)); for (let i = shells.length - 1; i >= 0; i--) { if (shells[i].isDead()) shells.splice(i, 1); } requestAnimationFrame(loop); } requestAnimationFrame(loop); })(); </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.