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

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

使用するタイミング

ユーザーがp5.jsスケッチ、クリエイティブコーディング、ジェネラティブアート、インタラクティブビジュアライゼーション、キャンバスアニメーション、ブラウザベースのビジュアルアート、データ可視化、シェーダーエフェクト、またはp5.jsプロジェクト全般を依頼した場合に使用します。

内部構成

p5.jsを使用したインタラクティブでジェネラティブなビジュアルアートのためのプロダクションパイプラインです。ブラウザベースのスケッチ、ジェネラティブアート、データ可イズ、インタラクティブエクスペリエンス、3Dシーン、オーディオリアクティブビジュアル、モーショングラフィックスを作成し、HTML、PNG、GIF、MP4、SVGとしてエクスポートします。対象範囲: 2D/3Dレンダリング、ノイズとパーティクルシステム、フローフィールド、シェーダー(GLSL)、ピクセル操作、キネティックタイポグラフィ、WebGLシーン、オーディオ解析、マウス/キーボードインタラクション、ヘッドレス高解像度エクスポート。

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

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

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

初回レンダリングでの卓越性は譲れません。 出力は初回ロードで視覚的に印象的でなければなりません。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段階のパスをたどります:

CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY

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

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

美的次元

次元	オプション	リファレンス
カラーシステム	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) は絶対に使用しない。常にテクスチャ、グラデーション、またはレイヤリングされたものを使用する
• モーションの多様性 — 異なる要素に異なる速度。主要要素は1x、二次要素は0.3x、アンビエント要素は0.1x
• 少なくとも1つの発明された要素 — カスタムパーティクル動作、新しいノイズアプリケーション、ユニークなインタラクション応答

プロジェクト固有の発明

すべてのプロジェクトで、次のうち少なくとも1つを発明してください:

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

パラメータ設計哲学

パラメータはアルゴリズムから自然に生まれるべきであり、汎用的なメニューからではありません。「このシステムのどのプロパティが調整可能であるべきか？」と自問してください。

良いパラメータ はアルゴリズムの特性を公開します:

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

悪いパラメータ はアルゴリズムとは無関係な汎用的なコントロールです:

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

すべてのパラメータは、アルゴリズムがどのように考えるかを変えるべきであり、どのように見えるかだけを変えるべきではありません。ノイズのオクターブを変える「タービュランス」パラメータは良いです。「パーティクルサイズ」スライダーが ellipse() の半径だけを変えるのは浅いです。

ワークフロー

ステップ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 から開始します。まずテンプレートを読み、固定セクション（シードナビゲーション、アクション）を保持し、アルゴリズムとパラメータ制御を置き換えます。これにより、ユーザーにシードの前/次/ランダム/ジャンプ、ライブ更新付きパラメータスライダー、PNGダウンロードがすべて配線された状態で提供されます。

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

単一HTMLファイル。構造:

<!DOCTYPE html>
<html lang="en">
<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 = [];

// === Preload (フォント、画像、データ) ===
function preload() {
  // font = loadFont('...');
}

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

// === Drawループ ===
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('name', 'png')	静止画、シードギャラリー
GIF	saveGif('name', 180, { units: 'frames' })	ソーシャルメディアのループ
MP4	saveFrames() + ffmpeg (scripts/encode.sh を参照)	高品質ビデオ、プレゼンテーション
SVG	p5.js-svg、save()	印刷デザイン、ベクターアート
高解像度	Puppeteer (scripts/render.js を参照)	4K+静止画、バッチレンダリング

決定論的キャプチャ: 正確なビデオエクスポートのために CCapture.js を使用し、フレームがスキップされないように frameRate(60) と draw() で capturer.capture(canvas) を使用します。

ヘッドレスレンダリング: Puppeteerスクリプトを使用して、ヘッドレスChromeでスケッチをレンダリングし、ウィンドウサイズを制御し、高解像度のスクリーンショットをキャプチャし、ffmpegでビデオにエンコードします。

ステップ6: 検証

最終出力を確認:

• コンセプトの段階で設定したクリエイティブビジョンと一致していますか？
• 視覚的に印象的ですか？視聴者を引き込みますか？
• パフォーマンスは許容範囲内ですか？（インタラクティブな場合60fps、アニメーションの場合スムーズ）
• エクスポート品質は目的に適していますか？（ディスプレイにはPNG、ソーシャルにはGIF、ビデオにはMP4）
• コードがクリーンで、コメントがあり、保守可能ですか？

テンプレート

templates/ ディレクトリには以下が含まれます:

• viewer.html — インタラクティブなジェネラティブアートのスターター（シードナビゲーション、パラメータスライダー、ダウンロード）
• animation.html — アニメーションとビデオエクスポートのベアスターター
• 3d.html — WebGL 3Dシーンのスターター

スクリプト

scripts/ ディレクトリには以下が含まれます:

• serve.sh — スケッチを提供するためのローカルHTTPサーバー
• render.js — ヘッドレスレンダリングのためのPuppeteerスクリプト
• encode.sh — フレームシーケンスをMP4ビデオにエンコードするffmpegコマンド

リファレンス

各リファレンスドキュメントの内容については、スキルディレクトリ内の個別のファイルを参照してください:

• references/core-api.md — p5.jsのコアAPI、p5.js 2.0、構図、オフスクリーンバッファ
• references/visual-effects.md — ノイズ、パーティクル、テクスチャ生成、ピクセル操作
• references/color-systems.md — カラーモード、パレット、ブレンドモード
• references/shapes-and-geometry.md — プリミティブ、頂点、ベジェ、SVG
• references/animation.md — イージング、スプリング、ノイズ駆動アニメーション、キネティックタイポグラフィ
• references/typography.md — フォント、textToPoints()、キネティックテキスト
• references/webgl-and-3d.md — WebGL、3Dジオメトリ、シェーダー、カメラ、照明
• references/interaction.md — マウス/キーボード/タッチ、オーディオ入力、データ駆動イベント