Fireworks · gpt-oss-20b

Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.

⛨ sandboxed Open in new tab ↗

transcript · 4 messages

user

Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.

assistant

thinking

We need to create a single-file index.html with CSS, JS inline. The fireworks display: click (or mousedown) to launch shell, then explode into particles with gravity, fade. Use HTML5 canvas. Use requestAnimationFrame loop. Use a Particle class. On click, create a Firework that goes upward with velocity. When it reaches apex (negative y-velocity), explode into many particles. Each particle has position, velocity, gravity, life, alpha fade. Canvas full-screen size, adjust on resize. The code is self-contained, no external libraries. Use <!DOCTYPE html>.

We need to output a file named index.html with the content. Use write. I'll prepare the content.

Let's draft.

Script: On DOMContentLoaded, set canvas width/height to window inner. Add resize event to update. Fireworks array and particles array. On click: create new firework at x position; random speed.

Algorithm: Firework has x, y, vy, color? 0 0 at start? The firework moves upwards, maybe branch to top.

Simplify: Launch from bottom center? But 'click launches shells' - maybe click at location mouse event, launch from bottom? Probably from bottom (y = canvas.height). y coordinate bottom. Launch at x from click.

Fireworks have x, y, vy. On each frame, y += vy; vy += gravity (for downward). Actually firework moves upward, so vy negative. Use a gravity for firework to cause them to arc? But simpler: vy negative constant, stop when vy becomes positive? Or use y position to decide when to explode: when y < some threshold (like maybe y < something). We can set threshold as at y < (something like 50%?) or when speed is less than 0 (vy > 0). But easiest: set a random 'flight duration' or set variable 'exploadAt' predetermined height random between 20% to 50%. So when y < explodeAt, explode.

Upon explosion, spawn N particles, each with random velocity, color.

Particles have lifespan, life, alpha reduce. Particles move with vx, vy, and vy += gravity; position update. They fade: alpha decays.

We need drawing: Clear canvas each frame or draw with globalAlpha etc. Use composite for glow? Not necessary. We'll just use simple.

Set easing: For firework endpoint, we let it push upward until vy > 0? For upward we start vy negative, gravity adds to vy, so eventually vy becomes positive downward and it will cause immediate explosion? Not yet. Actually typical fireworks go up with initial velocity then decelerate to rest, then explode. But flame stops at apex and break.

Simpler: set initial vy = -8 or something. Use gravity acceleration = 0.08. After each update, y += vy; vy += gravity. When vy > 0, explosion. So that gives apex.

But we also want the firework to be purely upward? It's okay.

When firework explodes: spawn many particles from firework's position. Set each particle vx, vy random directions; random speed between maybe 1-4. Use color random.

Particles have alpha starting 1 and decays to 0 over life. Use lifetime = maybe random 80-140 frames.

When alpha <= 0 or life <= 0, remove particle.

Render firework: maybe simple small white dot or small line. Render particles: small circles with color and alpha.

Add event listener: click triggers createFirework(mouseX). Good.

Also include canvas click event only if left button? accept all.

Also add window resize event to adjust canvas dimension.

Finally, implement arrays.

Ok.

Let’s produce code.

We should keep code inside one <script>.

Add style: full-screen canvas, margin 0.

Ensure no static.

Ok.

Let's draft final content.

→ write index.html (4141 bytes)

toolResult

Successfully wrote 4141 bytes to index.html

assistant

The fireworks display is now implemented in a single-page web app. All resources are contained within `index.html`. To run, simply open the file in a browser.

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelgpt-oss-20b

vendorOpenAI

harnesspi-agent

generated2026-07-22

EVALUATION

★★★★★ 1/5 broken

Screen stays almost entirely black with only a faint vertical dashed line after click/wheel; no fireworks or explosions visible.

off-prompt

Vision grade · anthropic/claude-sonnet-5

MEASUREMENTS

Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.

idle motion0.0%

on click0.1%

on drag0.0%

on wheel0.1%

on enter + space0.0%

on arrow keys0.0%

on w/a/s/d0.0%

frame spread0.8 / 255

console errors0

js errors none

METRICS

runtime29.4s

tokens in4.4k

tokens out2.0k

cached0

cost / run$0.0004