Fireworks · gpt-5-mini
Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.
transcript · 4 messages
Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.
thinking
**Considering explosion mechanics** I’m thinking about how users will click to launch shells, so I should have them start from the bottom center and move toward the click location. Maybe the shell could begin at a random position near the center. I could use source x values from a fraction of the canvas width to give some variety. It might be easier to determine the initial velocity for the explosion by having the vertical speed negative and exploding when it reaches a target height.**Determining explosion timing** I’m planning to use fuse time based on distance, where time will be a random value between 0.9 to 1.7 seconds. I’ll calculate the horizontal speed (vx) based on the difference between the clickX and startX. For the vertical speed (vy), I'll apply some kinematic equations to ensure it reaches the target clickY considering gravity. I need to set gravity, likely at 80 px/s², and ensure the shell explodes after the designated time. For particles, I'll assign random speeds and angles to create effects, like spherical bursts for fireworks.**Designing shell colors and effects** I’m picking a random bright HSL color for the shell, and I want to apply some random variations for the particles. To draw the particles, I could use circles with radial gradients, but since I can't use external resources, I'll draw arcs with shadowBlur for a glowing effect instead. I'll set the globalCompositeOperation to 'lighter' for additive blending. I plan to implement trails by storing the last positions for shells. I'll also need pointer events for clicks and touches while managing edge cases, like removing off-screen elements. Time to write the final index.html!
index.html (10232 bytes)Successfully wrote 10232 bytes to index.html
I've created a single-file fireworks demo at index.html. It displays a full-screen canvas where clicks/taps launch shells that explode into gravity-affected, fading particle bursts with trails, glow, and ambient stars. Open index.html in a browser to try it. Enjoy!
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
EVALUATION
Fireworks with gravity-affected, fading particle bursts trigger on clicks/keys, though drag/wheel show minimal effect.
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.