Add colorful fireworks particle system with p5.js

[Copilot]

🎆 Colorful Fireworks Particle System

This PR adds a complete HTML file (fireworks.html) that creates a colorful fireworks particle system using p5.js, as requested in the issue.

✨ Features Implemented

• Single HTML file with embedded CSS and JavaScript (no external dependencies except p5.js)
• p5.js CDN integration using the specified URL: https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.js
• Colorful firework-like particles with realistic physics simulation
• Interactive controls - click anywhere to launch fireworks
• Automatic fireworks that launch at random intervals
• Bilingual UI with Japanese and English instructions

🎯 Technical Implementation

The particle system includes:

• Firework class: Handles rocket launch mechanics and explosion timing
• Particle class: Manages individual particle behavior with physics
• HSB color mode: Creates vibrant, rainbow-like particle colors
• Physics simulation: Gravity, velocity, air resistance, and particle lifecycle
• Trail effects: Semi-transparent background creates beautiful particle trails
• Responsive design: Adapts to any screen size

🖼️ Demo Screenshot

The fireworks create spectacular bursts of colorful particles that behave like real fireworks, with particles that:

• Launch upward with realistic trajectories
• Explode into 80-120 colorful particles at peak height
• Fall under gravity with air resistance
• Fade out naturally over time
• Display vibrant HSB colors across the spectrum

🚀 Usage

Simply open fireworks.html in any modern web browser:

• Fireworks launch automatically every few seconds
• Click anywhere on the screen to launch targeted fireworks
• Enjoy the colorful particle display!

Fixes #1.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• cdn.jsdelivr.net
  • Triggering command: curl -I REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[amazon-q-developer]

⏳ I'm reviewing this pull request for security vulnerabilities and code quality issues. I'll provide an update when I'm done

[amazon-q-developer]

✅ I finished the code review, and didn't find any security or code quality issues.

[Copilot]

Pull Request Overview

Adds a standalone HTML page that uses p5.js to display colorful, physics-based fireworks with both automatic and click-triggered launches, accompanied by bilingual instructions and responsive design.

• Introduces fireworks.html embedding CSS and JavaScript with p5.js for particle simulation
• Defines Firework and Particle classes to manage launch, explosion, physics, color, and trail
• Enables automatic launches at random intervals and click-based targeting, with adaptive canvas resizing

Comments suppressed due to low confidence (2)

fireworks.html:152

• [nitpick] The parameters 'firework' and 'hu' are ambiguous. Consider renaming them to 'isRocket' and 'hue' for clearer intent.

            constructor(x, y, firework, hu) {

fireworks.html:85

• [nitpick] The Firework and Particle classes lack documentation for their constructor parameters and methods. Adding JSDoc comments would clarify their intended usage and behavior.

        class Firework {

[Copilot]

random(80, 120) returns a float, which causes the loop bound to be fractional. Use an integer cast like floor(random(80, 120)) for predictable iteration counts.

Suggested change

	for (let i = 0; i < random(80, 120); i++) {
	for (let i = 0; i < floor(random(80, 120)); i++) {

[Copilot]

[nitpick] Magic numbers such as gravity magnitude, drag factor (0.9), and velocity multipliers appear without context—consider extracting them into named constants to improve readability and ease tuning.

Suggested change

	let fireworks = [];
	let gravity;
	function setup() {
	createCanvas(windowWidth, windowHeight);
	gravity = createVector(0, 0.2);
	const GRAVITY_MAGNITUDE = 0.2; // Gravity magnitude for fireworks
	let fireworks = [];
	let gravity;
	function setup() {
	createCanvas(windowWidth, windowHeight);
	gravity = createVector(0, GRAVITY_MAGNITUDE);

[LeoAndo]

@copilot
<title>Colorful Fireworks with p5.js!</title> に変更してください

[Copilot]

Changed the title to "Colorful Fireworks with p5.js!" as requested. Commit: 4198718