🎆 p5js Fireworks - Participation Guide

🗒️ What is this?

An online gallery where everyone contributes 10-second "fireworks" animations made with p5.js, played back-to-back with crossfade transitions in random order.

Once submitted, your fireworks will be displayed alongside other participants' works in a continuous loop.

View the Gallery

---

📆 Event Period

Until 2026/08/31 (JST)

---

🔷 Rules

Item	Details
p5.js version	2.3.0
Canvas size	400 x 800 px *A shared frame image (shown below) is drawn on top of the canvas.
Frame rate	30fps (set automatically by the system)
Duration	Auto-stops after 300 frames (approx. 10 seconds) or 15 seconds of execution, whichever comes first.
Theme	Fireworks (interpret freely!)
Other	Each sketch runs in a sandbox environment. External communication and file loading are not available.

🎨 How it works (overview)

Your sketch is played as follows:

1. The previous person's sketch finishes
2. Your setup() is called once (initialization)
3. Your sketch fades in via crossfade (draw() is not running yet)
4. After the crossfade completes, draw() is called 300 times (approx. 10 seconds)
5. After draw() has been called 300 times, or 15 seconds have passed, it auto-stops and transitions to the next sketch

🖼️ About createCanvas

Submitted sketches run with createCanvas(400, 800) or createCanvas(400, 800, WEBGL). Any other createCanvas() in your code will be automatically replaced by the system.

🎞️ About frameRate

Submitted sketches automatically have frameRate(30) applied. Any other frameRate() in your code will be automatically removed by the system.

⛔ Prohibited

• Infinite loops or malicious heavy processing that disrupts normal viewing
• Content that violates public decency
• The following APIs are prohibited. Code containing them will be rejected on submission. Network and browser APIs are also disabled at runtime:
  • loadImage(), loadSound(), loadFont() and other external file loading
  • fetch(), XMLHttpRequest, WebSocket and other network communication
  • eval(), Function() and other dynamic code execution
  • import, require module loading
  • window.open(), AudioContext and other browser APIs

---

📮 How to Submit

No Git knowledge required. Anyone with a GitHub account can submit.

📝 Steps

1. Test your code in the Playground
2. Open the submission page
3. Fill in the following:
   • Title — name of your work
   • Author — display name (nicknames OK)
   • Code — your p5.js sketch code
   • Icon image (optional) — displayed next to your work (max 200KB)
4. Click "Create"
5. Wait for the automated check:
   • Once the Issue page appears, your submission is complete.
   • Within a few minutes, your code will be automatically checked. If there are no issues, your work will be added to the gallery. You'll receive an email with the result, so please check it.
6. Done!

⚠️ Notes

• The Issue title field is pre-filled. Do not change it.
• Works are managed per GitHub username — one submission per account (resubmit to overwrite)
• Submitted code is published on this repository. Even after editing or deletion, history remains. Do not include personal information in your code.
• By submitting, you agree to the Submission Terms.

---

✏️ Update / Delete

🔄️ To update

Simply resubmit using the same steps. Your previous work will be overwritten.

🗑️ To delete

1. Open the deletion page
2. Check the confirmation box and submit
3. Your work will be removed and you can submit again

---

▶️ Testing

You can test your code before submitting. We provide a page that runs in the same environment as production.

Open Playground

---

🌟 Tips

• frameCount runs from 1 to 300 — use it for time-based animations
• This project runs at 30fps for stability. For animated sketches, you may want to move things slightly faster than you would at the usual 60fps.
• To check how your sketch looks at 30fps, use the Playground or add frameRate(30) to your setup().
• background(0, 0, 0, 20); creates a trail effect (firework tails linger)
• colorMode(HSB) makes it easy to create vibrant colors using hue
• Launching multiple fireworks with time offsets makes it look spectacular
• noise() and random() add organic movement

---

❓ FAQ

---