Screenshots
Overview
概要
p5.jsは、絵を描くようにプログラムを書けるクリエイティブコーディング用のJavaScriptライブラリです。本サイトは、その表現の幅（生成的・シミュレーション・インタラクティブ・3D）を一望できるショーケース。流れ場・向日葵の螺旋・群れ・再帰の樹・ライフゲーム・反応拡散・万華鏡・音に反応するスペクトル・3Dノイズ核・GLSLフラグメントシェーダ・文字パーティクルの全11作品が、すべてブラウザ内でリアルタイムに動作します。最大の特徴は各作品に付いた「コードを見る」パネル。シンタックスハイライトと『たったN行』バッジで、短いコードが世界を動かす感覚を手で確かめられます。
How to use
遊び方・使い方
トップの目録から作品を選ぶか、カテゴリ（ジェネラティブ／シミュレーション／インタラクティブ／3D）で絞り込みます。各作品はマウス／タッチで介入でき、流れ場はドラッグで流れを乱し、向日葵はマウスの横位置で黄金角を微調整、群れはカーソルが捕食者に、ライフゲームはドラッグで細胞を描けます。「音に踊る」はマイクを許可すると声や音楽に反応。各画面の『コードを見る』ボタンで核となる実装が読め、『[ ] キー』で前後の作品へ、スクリーンショット保存・フルスクリーン・描画品質切替にも対応します。
Tech stack
技術スタック
Next.js 16 App Router上でp5.jsをinstanceモードでマウントし、11作品を共通インターフェース（create/code）で実装。canvasのリサイズがコンテナを微小振動させて描画がフリーズするResizeObserverのフィードバックループを閾値ガードで遮断し、全作品を60fpsで安定動作させています。PWA／オフライン対応、OG画像も完備。
Highlights
工夫した点
- p5はブラウザ専用（import時にwindowを参照）のため、メタ情報と実装を分離し、一覧ページのサーバーバンドルへp5を巻き込まない構成に。各スケッチは遅延importで初回表示時にだけ読み込む
- 各作品に『コードを見る』ビューア（自前の軽量シンタックスハイライト＋行数バッジ＋コピー）を実装し、p5の『読める・学べる』思想を体現
- 反応拡散はGray-Scott法を全面シードで一気に育て、無補間で輪郭をシャープに。3DノイズはWEBGLの点群を深度シェーディング。シェーダはGLSLのドメインワーピングノイズと、p5の表現の幅を見せる作品を厳選
To improve
改善したい点
- 音に反応する作品はマイク許可が必要な唯一の作品で、未許可時のフォールバック演出をさらに分かりやすくしたい
- WEBGL系（シェーダ・3D核）はモバイル端末での描画負荷の検証と最適化余地がある
- 作品ごとのパラメータをUIで『いじれる』度をさらに高める余地（粒子数・配色・速度など）
What's next
今後の展望
- L-system植物・メタボール・水面の波紋など、p5の幅をさらに見せる新スケッチの追加
- 作品ごとの動的OG画像と、ギャラリーカードでの動きのプレビュー
- 『コードを見る』からその場でパラメータを書き換えて遊べるミニ・プレイグラウンド化