🎆 p5js花火大会 - 参加ガイド

🗒️ これは何？

P5.jsで「花火」をテーマにした10秒間のアニメーション作品をみんなで持ち寄り、ランダムに連続再生されるオンラインギャラリーです。

作品を投稿すると、他の参加者の花火と一緒にクロスフェードで次々に再生されます。

現在のギャラリーを見る

---

📆 開催期間

2026/08/31(JST)まで

---

🔷 作品のルール

項目	内容
p5.jsバージョン	2.3.0
キャンバスサイズ	400 x 800 px ※下図のフレームがキャンバスの上に描かれます。
フレームレート	30fps（システムが自動設定）
再生時間	300フレーム（約10秒）もしくは15秒の実行で自動停止します。
テーマ	花火（解釈は自由！）
その他	各作品はsandbox環境で実行されます。 外部への通信や外部ファイルの読み込みはできません。

🎨 動作の仕組み（ざっくり）

あなたの作品は以下のように再生されます：

1. 前の人の作品が終了する
2. あなたの setup() が1回呼ばれる（初期化）
3. クロスフェードであなたの作品が表示される（この間 draw() はまだ動かない）
4. クロスフェードが完了したら draw() が300回呼ばれる（約10秒間）
5. draw() が300回呼ばれたか、15秒経ったら自動で停止し、次の人の作品へ

🖼️ createCanvas について

投稿された作品は createCanvas(400, 800) または createCanvas(400, 800, WEBGL) で実行されます。それ以外の createCanvas() が含まれていてもシステムが自動で置き換えます。

🎞️ frameRate について

投稿された作品には自動で frameRate(30) が付与されます。それ以外の frameRate() が含まれていてもシステムが自動で除去します。

⛔ 禁止事項

• 無限ループや、悪意のある高負荷な処理など、作品の正常な閲覧を妨げるもの
• 公序良俗に反する表現
• 以下のAPIは使用禁止です。コードに含まれていると投稿が拒否されます。また、ネットワーク通信やブラウザAPIなどは実行時にもシステムで無効化されています。
  • loadImage(), loadSound(), loadFont() など外部ファイルの読み込み
  • fetch(), XMLHttpRequest, WebSocket などネットワーク通信
  • eval(), Function() などの動的コード実行
  • import, require によるモジュール読み込み
  • window.open(), AudioContext などブラウザAPI

---

📮投稿方法

Gitの知識は不要です。GitHubアカウントがあれば誰でも投稿できます。

📝手順

1. Playground でコードの動作を確認する
2. 投稿ページ を開く
3. 以下を入力する：
   • 作品タイトル — 作品の名前
   • 作者名 — 表示名（ハンドルネームOK）
   • コード — P5.jsスケッチのコード
   • アイコン画像（任意） — 作品の横に表示されるアイコン（200KB以下）
4. 「Create」をクリック
5. 自動チェックの結果を待つ：
   • 投稿した内容のIssueページが表示されれば提出は完了です
   • 数分後に、提出されたコードの自動チェックが始まります。問題がなければ作品がギャラリーに自動追加されます。チェック結果がメールで届きますのでご確認ください。
6. 完了！

⚠️投稿時の注意

• Issue タイトル欄は自動入力されています。変更しないでください
• 作品はGitHubユーザー名に紐づいて管理されるため、1アカウントにつき1作品のみ投稿できます（再投稿で上書き更新できます）
• 投稿したコードは本リポジトリ上で公開されます。編集や削除をしても履歴として残るため、個人情報などをコードに含めないようご注意ください。
• 投稿により、投稿規約に同意したものとみなされます。

---

✏️作品の更新・削除

🔄️更新したい場合

同じ手順でもう一度投稿するだけです。前回投稿した作品が上書きされます。

🗑️削除したい場合

1. 削除ページ を開く
2. 確認チェックを入れて Submit
3. 自分の作品が削除され、再投稿可能になります

---

▶️テストする方法

投稿前に動作確認できます。本番と同じ環境でテストできるページを用意しています。

Playground を開く

---

🌟Tips

• 作品の frameCount は1〜300まで動作しますので、作品中の時間管理に使うことができます
• この企画では安定性のため30fpsで再生します。動きのある作品は、普段のp5.js作品より少し速めに動かすと見やすくなる場合があります
• 30fpsの動きを確認する場合は、Playgroundを使うか、自分のp5.js環境でsetup() に frameRate(30) を書いてください
• background(0, 0, 0, 20); で残像効果が作れます（花火の尾が残る）
• colorMode(HSB) を使うと色相で鮮やかな色が作りやすいです
• 複数の花火を時間差で打ち上げると豪華になります
• noise() や random() で有機的な動きを加えるのもおすすめ

---

❓FAQ

---