p5.js プロダクションパイプライン

p5.js プロダクションパイプライン は何をしますか？

使用タイミング

次のようなユーザーリクエストがあった場合に使用します：p5.jsスケッチ、クリエイティブコーディング、ジェネラティブアート、インタラクティブビジュアライゼーション、キャンバスアニメーション、ブラウザベースのビジュアルアート、データビズ、シェーダーエフェクト、またはあらゆるp5.jsプロジェクト。

内容

p5.jsを使用したインタラクティブでジェネラティブなビジュアルアートのためのプロダクションパイプライン。ブラウザベースのスケッチ、ジェネラティブアート、データ可視化、インタラクティブ体験、3Dシーン、オーディオリアクティブビジュアル、モーショングラフィックスを作成し、HTML、PNG、GIF、MP4、またはSVGとしてエクスポートします。以下をカバー：2D/3Dレンダリング、ノイズおよびパーティクルシステム、フローフィールド、シェーダー（GLSL）、ピクセル操作、キネティックタイポグラフィ、WebGLシーン、オーディオ解析、マウス/キーボードインタラクション、ヘッドレス高解像度エクスポート。

クリエイティブスタンダード

これはブラウザでレンダリングされるビジュアルアートです。キャンバスが媒体であり、アルゴリズムが筆です。

コードを一行でも書く前に、クリエイティブコンセプトを明確に言語化してください。この作品は何を伝えるのか？何が視聴者のスクロールを止めさせるのか？これはコードチュートリアルの例と何が違うのか？ユーザーのプロンプトは出発点であり、それをクリエイティブな野心で解釈してください。

初回レンダリングでの卓越性は交渉の余地がありません。 出力は、最初のロードで視覚的に印象的でなければなりません。p5.jsのチュートリアル演習、デフォルト設定、または「AIが生成したクリエイティブコーディング」のように見える場合、それは間違っています。送信する前に再考してください。

参照の語彙を超えて進んでください。 リファレンス内のノイズ関数、パーティクルシステム、カラーパレット、シェーダーエフェクトは開始語彙です。すべてのプロジェクトにおいて、組み合わせ、レイヤリングし、発明してください。カタログは絵の具のパレットであり、あなたが絵を描きます。

積極的にクリエイティブであれ。 ユーザーが「パーティクルシステム」を求めた場合、創発的な群れ行動、トレーリングゴーストエコー、パレットシフトされた奥行きフォグ、そして呼吸する背景ノイズフィールドを備えたパーティクルシステムを提供します。ユーザーが求めなかったが、感謝されるであろう視覚的なディテールを少なくとも1つ含めてください。

密度が高く、レイヤリングされ、考慮されている。 すべてのフレームが視聴に値するものであるべきです。決してフラットな白い背景にしてはいけません。常に構図の階層が存在し、常に意図的な色、常に近くで見たときだけ現れるマイクロディテールが存在します。

機能数よりもまとまりのある美学。 すべての要素は統一されたビジュアルランゲージに奉仕しなければなりません—共有される色温度、一貫したストローク幅の語彙、調和のとれた動きの速度。無関係な10のエフェクトを持つスケッチは、一緒に属する3つのエフェクトを持つスケッチよりも劣ります。

モード

モード	入力	出力	リファレンス
ジェネラティブアート	シード / パラメータ	プロシージャルビジュアルコンポジション（静止またはアニメーション）	references/visual-effects.md
データ可視化	データセット / API	インタラクティブチャート、グラフ、カスタムデータ表示	references/interaction.md
インタラクティブ体験	なし（ユーザーが駆動）	マウス/キーボード/タッチ駆動スケッチ	references/interaction.md
アニメーション / モーショングラフィックス	タイムライン / ストーリーボード	タイミングシーケンス、キネティックタイポグラフィ、トランジション	references/animation.md
3Dシーン	コンセプト説明	WebGLジオメトリ、照明、カメラ、マテリアル	references/webgl-and-3d.md
画像処理	画像ファイル	ピクセル操作、フィルタ、モザイク、点描	references/visual-effects.md § ピクセル操作
オーディオリアクティブ	オーディオファイル / マイク	サウンド駆動ジェネラティブビジュアル	references/interaction.md § オーディオ入力

スタック

プロジェクトごとに単一の自己完結型HTMLファイル。ビルドステップは不要です。

レイヤー	ツール	目的
コア	p5.js 1.11.3 (CDN)	キャンバスレンダリング、数学、トランスフォーム、イベント処理
3D	p5.js WebGLモード	3Dジオメトリ、カメラ、照明、GLSLシェーダー
オーディオ	p5.sound.js (CDN)	FFT分析、振幅、マイク入力、オシレーター
エクスポート	ビルトイン saveCanvas() / saveGif() / saveFrames()	PNG、GIF、フレームシーケンス出力
キャプチャ	CCapture.js (オプション)	決定論的フレームレートビデオキャプチャ（WebM、GIF）
ヘッドレス	Puppeteer + Node.js (オプション)	自動化高解像度レンダリング、ffmpeg経由のMP4
SVG	p5.js-svg 1.6.0 (オプション)	印刷用ベクトル出力—p5.js 1.xが必要
ナチュラルメディア	p5.brush (オプション)	水彩、木炭、ペン—p5.js 2.x + WEBGLが必要
テクスチャ	p5.grain (オプション)	フィルムグレイン、テクスチャオーバーレイ
フォント	Google Fonts / loadFont()	OTF/TTF/WOFF2によるカスタムタイポグラフィ

バージョンに関する注意

p5.js 1.x (1.11.3) がデフォルトです—安定しており、ドキュメントが充実しており、最も広範なライブラリ互換性があります。プロジェクトが2.xの機能を必要としない限り、これを使用してください。

p5.js 2.x (2.2+) では以下が追加されています：preload() を置き換える async setup()、OKLCH/OKLABカラーモード、splineVertex()、シェーダー .modify() API、バリアブルフォント、textToContours()、ポインターイベント。p5.brushに必要です。references/core-api.md § p5.js 2.0を参照してください。

パイプライン

すべてのプロジェクトは同じ6段階のパスに従います：

コンセプト → デザイン → コード → プレビュー → エクスポート → 検証

1. コンセプト — クリエイティブビジョンを明確にする：ムード、カラーワールド、モーション語彙、何がこれをユニークにするのか
2. デザイン — モード、キャンバスサイズ、インタラクションモデル、カラーシステム、エクスポート形式を選択する。コンセプトを技術的な決定にマッピングする
3. コード — インラインp5.jsを使用した単一HTMLファイルを作成する。構造：グローバル → preload() → setup() → draw() → ヘルパー → クラス → イベントハンドラ
4. プレビュー — ブラウザで開き、視覚品質を確認する。ターゲット解像度でテストする。パフォーマンスをチェックする
5. エクスポート — 出力をキャプチャする：PNGには saveCanvas()、GIFには saveGif()、MP4には saveFrames() + ffmpeg、ヘッドレスバッチにはPuppeteer
6. 検証 — 出力はコンセプトと一致しているか？意図された表示サイズで視覚的に印象的か？あなたはそれを額装したいと思うか？

クリエイティブディレクション

美的次元

次元	オプション	リファレンス
カラーシステム	HSB/HSL、RGB、名前付きパレット、プロシージャルハーモニー、グラデーション補間	references/color-systems.md
ノイズ語彙	パーリンノイズ、シンプレックス、フラクタル（オクターブ）、ドメインワーピング、カールノイズ	references/visual-effects.md § ノイズ
パーティクルシステム	物理ベース、フロッキング、トレイル描画、アトラクター駆動、フローフィールド追従	references/visual-effects.md § パーティクル
シェイプ言語	幾何プリミティブ、カスタム頂点、ベジェ曲線、SVGパス	references/shapes-and-geometry.md
モーションスタイル	イージング、スプリングベース、ノイズ駆動、物理シミュレーション、lerp、ステップ	references/animation.md
タイポグラフィ	システムフォント、ロードされたOTF、textToPoints() パーティクルテキスト、キネティック	references/typography.md
シェーダーエフェクト	GLSLフラグメント/頂点、フィルターシェーダー、ポストプロセッシング、フィードバックループ	references/webgl-and-3d.md § シェーダー
構図	グリッド、放射状、黄金比、三分割法、オーガニック散布、タイル状	references/core-api.md § 構図
インタラクションモデル	マウス追従、クリックスポーン、ドラッグ、キーボード状態、スクロール駆動、マイク入力	references/interaction.md
ブレンドモード	BLEND、ADD、MULTIPLY、SCREEN、DIFFERENCE、EXCLUSION、OVERLAY	references/color-systems.md § ブレンドモード
レイヤリング	createGraphics() オフスクリーンバッファ、アルファコンポジット、マスキング	references/core-api.md § オフスクリーンバッファ
テクスチャ	パーリンサーフェス、スティプル、ハッチング、ハーフトーン、ピクセルソート	references/visual-effects.md § テクスチャ生成

プロジェクトごとのバリエーションルール

デフォルト設定を決して使用しないでください。すべてのプロジェクトにおいて：

• カスタムカラーパレット — 生の fill(255, 0, 0) は絶対に使わない。常に3～7色で構成されたデザインされたパレットを使用する
• カスタムストローク幅語彙 — 細いアクセント（0.5）、中程度の構造（1-2）、太い強調（3-5）
• 背景処理 — プレーンな background(0) や background(255) は絶対に使わない。常にテクスチャ、グラデーション、またはレイヤリングされたものにする
• モーションの変化 — 異なる要素に異なる速度。主要なものは1倍、二次的なものは0.3倍、アンビエントなものは0.1倍
• 少なくとも1つの発明された要素 — カスタムパーティクル動作、新しいノイズの適用方法、ユニークなインタラクション応答

プロジェクト固有の発明

すべてのプロジェクトにおいて、少なくとも次のうち1つを発明する：

• ムードに合ったカスタムカラーパレット（プリセットではない）
• 新しいノイズフィールドの組み合わせ（例：カールノイズ + ドメインワープ + フィードバック）
• ユニークなパーティクル動作（カスタムフォース、カスタムトレイル、カスタムスポーン）
• ユーザーが要求しなかったが、作品を引き上げるインタラクションメカニズム
• 視覚的な階層を生み出す構図技法

パラメータ設計哲学

パラメータは、汎用メニューからではなく、アルゴリズムから出現するべきです。自問してください：「このシステムのどのプロパティが調整可能であるべきか？」

良いパラメータはアルゴリズムの特性を明らかにします：

• 数量 — パーティクル、ブランチ、セルの数（密度を制御）
• スケール — ノイズ周波数、要素サイズ、間隔（テクスチャを制御）
• レート — 速度、成長率、減衰（エネルギーを制御）
• しきい値 — いつ動作が変わるのか？（ドラマを制御）
• 比率 — 比率、力の間のバランス（調和を制御）

悪いパラメータはアルゴリズムに関係のない汎用コントロールです：

• 「color1」、「color2」、「size」 — 文脈がなければ意味がない
• 無関係なエフェクトのトグルスイッチ
• 動作ではなく、見た目だけを変えるパラメータ

すべてのパラメータは、アルゴリズムがどのように 見えるか だけでなく、どのように 考えるか を変えるべきです。ノイズオクターブを変える「turbulence」パラメータは良いものです。ellipse() の半径だけを変える「particle size」スライダーは浅はかです。

ワークフロー

ステップ1：クリエイティブビジョン

コードの前に、以下を明確にしてください：

• ムード / 雰囲気：視聴者は何を感じるべきか？内省的？活力を与えられる？不安？遊び心？
• ビジュアルストーリー：時間の経過（またはインタラクション）で何が起こるか？構築？崩壊？変容？振動？
• カラーワールド：暖色/寒色？モノクローム？補色？支配的な色相は？アクセントは？
• シェイプ言語：有機的な曲線？鋭い幾何学？点？線？混合？
• モーション語彙：ゆっくりとしたドリフト？爆発的なバースト？呼吸するようなパルス？機械的な精度？
• これを他と違うものにするものは何か？：このスケッチをユニークにするものは何か？

ユーザーのプロンプトを美的な選択にマッピングしてください。「リラックスできるジェネラティブ背景」は、「グリッチデータ可視化」とはまったく異なるあらゆるものを要求します。

ステップ2：技術デザイン

• モード — 上記の表の7つのモードのうちどれか
• キャンバスサイズ — ランドスケープ1920x1080、ポートレート1080x1920、スクエア1080x1080、またはレスポンシブ windowWidth/windowHeight
• レンダラー — P2D（デフォルト）または WEBGL（3D、シェーダー、高度なブレンドモード用）
• フレームレート — 60fps（インタラクティブ）、30fps（アンビエントアニメーション）、または noLoop()（静的ジェネラティブ）
• エクスポートターゲット — ブラウザ表示、PNG静止画、GIFループ、MP4ビデオ、SVGベクトル
• インタラクションモデル — パッシブ（入力なし）、マウス駆動、キーボード駆動、オーディオリアクティブ、スクロール駆動
• ビューワーUI — インタラクティブジェネラティブアートの場合、templates/viewer.html から開始します。これによりシードナビゲーション、パラメータスライダー、ダウンロードが提供されます。シンプルなスケッチやビデオエクスポートの場合は、ベアHTMLを使用します

ステップ3：スケッチをコーディングする

インタラクティブジェネラティブアート（シード探索、パラメータチューニング）の場合：templates/viewer.html から開始します。まずテンプレートを読み、固定セクション（シードナビ、アクション）はそのまま保持し、アルゴリズムとパラメータコントロールを置き換えます。これにより、シード prev/next/random/jump、ライブ更新可能なパラメータスライダー、PNGダウンロードがすべて配線された状態でユーザーに提供されます。

アニメーション、ビデオエクスポート、またはシンプルなスケッチの場合：ベアHTMLを使用します：

単一HTMLファイル。構造：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>プロジェクト名</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
  <!-- <script src="https://unpkg.com/[email protected]"></script> -->  <!-- SVGエクスポート -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- ビデオキャプチャ -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === 設定 ===
const CONFIG = {
  seed: 42,
  // ... プロジェクト固有のパラメータ
};

// === カラーパレット ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

// === グローバル状態 ===
let particles = [];

// === プリロード（フォント、画像、データ） ===
function preload() {
  // font = loadFont('...');
}

// === セットアップ ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // 状態を初期化...
}

// === 描画ループ ===
function draw() {
  // フレームをレンダリング...
}

// === ヘルパー関数 ===
// ...

// === クラス ===
class Particle {
  // ...
}

// === イベントハンドラ ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

主要な実装パターン：

• シード付き乱数：再現性のために常に randomSeed() + noiseSeed() を使用する
• カラーモード：直感的な色制御のために colorMode(HSB, 360, 100, 100, 100) を使用する
• 状態分離：パラメータにはCONFIG、色にはPALETTE、可変状態にはグローバル変数を使用する
• クラスベースのエンティティ：update() + display() メソッドを持つクラスとしてパーティクル、エージェント、シェイプを定義する
• オフスクリーンバッファ：レイヤードコンポジション、トレイル、マスクのために createGraphics() を使用する

ステップ4：プレビューと反復

• HTMLファイルをブラウザで直接開く—基本的なスケッチにはサーバーは不要
• ローカルファイルからの loadImage()/loadFont() の場合：scripts/serve.sh または python3 -m http.server を使用する
• Chrome DevToolsのパフォーマンスタブで60fpsを確認する
• ウィンドウサイズだけでなく、ターゲットのエクスポート解像度でテストする
• ビジュアルがステップ1のコンセプトと一致するまでパラメータを調整する

ステップ5：エクスポート

形式	方法	使用例
PNG	saveCanvas('filename', 'png')	静止画、ソーシャルメディア
GIF	saveGif('filename', duration, options)	ループアニメーション、デモ
フレーム	saveFrames('filename', 'png', 1, totalFrames)	フレームシーケンス、ポストプロダクション
MP4	saveFrames() → ffmpeg	高品質ビデオ、音楽ビデオ
SVG	p5.js-svgレンダラー + save()	印刷、ベクター編集
ヘッドレス	Puppeteerスクリプト（scripts/内）	高解像度バッチエクスポート

Puppeteerエクスポート（オプションの依存関係）：node scripts/export.js sketch.html output.mp4 --width 3840 --height 2160 --duration 30 --fps 60

ステップ6：検証

最終チェックリスト：

• 出力はステップ1のコンセプトと一致していますか？
• 意図された表示サイズで視覚的に印象的ですか？
• 色、構成、タイポグラフィに意図的な選択がありますか？
• 少なくとも1つの「発明された」要素がありますか？
• デフォルト設定（生のカラーコード、プレーンな背景、単一速度）を使用していませんか？
• すべての要素が統一されたビジュアルランゲージを共有していますか？
• 出力は想定されるユースケース（ソーシャルメディア、インスタレーション、プリント）に適していますか？
• コードはクリーンで、コメントがあり、適切なエラーハンドリングがありますか？
• ファイルサイズは配信に適切ですか？（GIF < 15MB、ビデオは可変）

「コードが機能するかどうかではなく、それが 感じさせるかどうか を基準に評価する。コードが機能するなら、それは単なるユーティリティだ。それが感じさせるなら、それは芸術だ。」

リファレンス

このディレクトリ内のリファレンスファイル：

ファイル	内容
references/visual-effects.md	ノイズ、パーティクル、フローフィールド、テクスチャ、グリッチ、ピクセル操作、シェーダーベースのエフェクト
references/interaction.md	マウス追従、クリック、ドラッグ、キーボード、スクロール、タッチ、オーディオ入力、アクセシビリティパターン
references/animation.md	イージング曲線、スプリング、物理シミュレーション、キネティックタイポグラフィ、トランジション、タイムラインベースのアニメーション
references/webgl-and-3d.md	3Dジオメトリ、カメラ、照明、GLSLシェーダー（頂点/フラグメント）、ポストプロセッシング、フィードバック
references/color-systems.md	カラーモード、パレット生成、グラデーション、ブレンドモード、色覚多様性に関する考慮事項
references/shapes-and-geometry.md	幾何プリミティブ、カスタム頂点、SVGパス、ベジェ曲線、ビューアーテンプレート
references/typography.md	フォントのロード、textToPoints()、タイポグラフィ構成、キネティックテキスト
references/core-api.md	p5.jsバージョン（1.x vs 2.x）、createGraphics()、createFramebuffer()、パフォーマンスの最適化、一般的な落とし穴

各ファイルは、パラメータ範囲、エッジケース、注目すべき実装パターンを含む、すぐにコード化可能な例を提供します。