p5js

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 ファイルを 1 つ用意します。ビルド工程は不要です。

レイヤー	ツール	用途
コア	p5.js 1.11.3 (CDN)	キャンバスの描画、数学、変換、イベント処理
3D	p5.js WebGL mode	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. コンセプト — 創作のビジョンを明確にします。ムード、色の世界、動きの語彙、独自性を生み出す要素を定めます
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
動きのスタイル	イージング、バネベース、ノイズ駆動、物理シミュレーション、線形補間、ステップ	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」 — 文脈がなければ意味がありません
• 関連のない効果のトグルスイッチ
• 挙動ではなく見た目だけを変えるパラメーター

すべてのパラメーターは、アルゴリズムの「考え方」を変えるべきであり、見た目だけを変えるものであってはなりません。ノイズのオクターブ数を変える「turbulence」パラメーターは適切です。ellipse() の半径だけを変える「particle size」スライダーは浅薄です。

ワークフロー

Step 1: クリエイティブビジョン

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

• ムード／雰囲気：見る人にどんな感情を抱かせるべきでしょうか？瞑想的？活気に満ちた？不穏？遊び心のある？
• ビジュアルストーリー：時間の経過とともに（またはインタラクションによって）何が起こるでしょうか？構築？減衰？変形？振動？
• 色の世界：暖色系／寒色系？モノクロ？補色？支配的な色相は何でしょうか？アクセントは？
• 形状の表現：有機的な曲線？鋭い幾何学形状？ドット？線？組み合わせ？
• 動きの語彙：ゆっくりとした漂い？爆発的なバースト？呼吸するようなパルス？機械的な精密さ？
• この作品ならではの特徴：このスケッチをユニークにする要素は何でしょうか？

ユーザーのプロンプトを美的な選択に反映してください。「リラックスできるジェネレーティブな背景」は、「グリッチ風のデータビジュアライゼーション」とはあらゆる点で異なるものが求められます。

Step 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>Project Name</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  
    
    
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Configuration ===
const CONFIG = {
  seed: 42,
  // ... project-specific params
};

// === Color Palette ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

// === Global State ===
let particles = [];

// === Preload (fonts, images, data) ===
function preload() {
  // font = loadFont('...');
}

// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Initialize state...
}

// === Draw Loop ===
function draw() {
  // Render frame...
}

// === Helper Functions ===
// ...

// === Classes ===
class Particle {
  // ...
}

// === Event Handlers ===
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またはpython -m http.serverを使用します
• Chrome DevTools の Performance タブで 60fps を確認します
• ウィンドウサイズだけでなく、エクスポート時の解像度でテストします
• ステップ 1 のコンセプトとビジュアルが一致するまで、パラメーターを調整します

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

形式	方法	コマンド
PNG	keyPressed()内でsaveCanvas('output', 'png')を実行	's'を押して保存
高解像度 PNG	Puppeteer によるヘッドレスキャプチャ	node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1
GIF	saveGif('output', 5) — N 秒間キャプチャ	'g'を押して保存
連番フレーム	saveFrames('frame', 'png', 10, 30) — 30fps で 10 秒間	次にffmpeg -i frame-%04d.png -c:v libx264 output.mp4を実行
MP4	Puppeteer によるフレームキャプチャと ffmpeg	bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30
SVG	p5.js-svg を使ってcreateCanvas(w, h, SVG)を実行	save('output.svg')

ステップ 6：品質の確認

• ビジョンと一致していますか？ 出力をクリエイティブコンセプトと比較します。ありきたりな見た目なら、ステップ 1 に戻ります
• 解像度の確認：表示目標サイズで鮮明ですか？ エイリアシングのアーティファクトはありませんか？
• パフォーマンスの確認：ブラウザーで 60fps を維持できますか？（アニメーションでは最低 30fps）
• 色の確認：色同士が調和していますか？ 明るいモニターと暗いモニターの両方でテストします
• エッジケース：キャンバスの端ではどうなりますか？ リサイズした場合は？ 10 分間実行した後は？

重要な実装上の注意

パフォーマンス — まず FES を無効にする

Friendly Error System（FES）は、最大 10 倍のオーバーヘッドを追加します。本番用のスケッチでは、必ず無効にしてください。

p5.disableFriendlyErrors = true;  // BEFORE setup()

function setup() {
  pixelDensity(1);  // prevent 2x-4x overdraw on retina
  createCanvas(1920, 1080);
}

ホットループ（パーティクル、ピクセル操作）では、p5 のラッパーではなくMath.*を使うと、測定可能なほど高速になります。

// In draw() or update() hot paths:
let a = Math.sin(t);          // not sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
let v = Math.random();        // not random() — when seed not needed
let m = Math.min(a, b);       // not min(a, b)

draw()内では絶対にconsole.log()を実行しないでください。draw()内で DOM を操作しないでください。references/troubleshooting.md § Performance を参照してください。

シード付きの乱数 — 必須

すべてのジェネラティブスケッチは再現可能でなければなりません。同じシードなら、同じ出力になります。

function setup() {
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  // All random() and noise() calls now deterministic
}

ジェネラティブコンテンツにMath.random()を使用しないでください。パフォーマンスが重要な非ビジュアルコードに限って使用します。ビジュアル要素には、必ずrandom()を使用します。ランダムなシードが必要な場合は、CONFIG.seed = floor(random(99999))とします。

ジェネラティブアートプラットフォームのサポート（fxhash / Art Blocks）

ジェネラティブアートプラットフォームでは、p5 の PRNG をプラットフォームの決定論的な乱数に置き換えます。

// fxhash convention
const SEED = $fx.hash;              // unique per mint
const rng = $fx.rand;               // deterministic PRNG
$fx.features({ palette: 'warm', complexity: 'high' });

// In setup():
randomSeed(SEED);   // for p5's noise()
noiseSeed(SEED);

// Replace random() with rng() for platform determinism
let x = rng() * width;  // instead of random(width)

references/export-pipeline.md § Platform Export を参照してください。

カラーモード — HSB を使用する

ジェネラティブアートでは、RGB よりも HSB（色相、彩度、明度）のほうが、はるかに簡単に扱えます。

colorMode(HSB, 360, 100, 100, 100);
// Now: fill(hue, sat, bri, alpha)
// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
// Desaturate: fill(hue, sat * 0.3, bri)
// Darken: fill(hue, sat, bri * 0.5)

生の RGB 値をハードコードしないでください。パレットオブジェクトを定義し、そこから手続き的にバリエーションを作成します。references/color-systems.mdを参照してください。

ノイズ — 単一オクターブではなく複数オクターブ

生のnoise(x, y)は滑らかな塊のように見えます。自然なテクスチャを作るには、オクターブを重ねます。

function fbm(x, y, octaves = 4) {
  let val = 0, amp = 1, freq = 1, sum = 0;
  for (let i = 0; i < octaves; i++) {
    val += noise(x * freq, y * freq) * amp;
    sum += amp;
    amp *= 0.5;
    freq *= 2;
  }
  return val / sum;
}

流れるような有機的な形には、ドメインワーピングを使います。ノイズの出力をノイズの入力座標として渡します。references/visual-effects.mdを参照してください。

レイヤーにはcreateGraphics()を使う — 必須です

単一パスの平面的な描画では、仕上がりも平面的になります。合成にはオフスクリーンバッファーを使います。

let bgLayer, fgLayer, trailLayer;
function setup() {
  createCanvas(1920, 1080);
  bgLayer = createGraphics(width, height);
  fgLayer = createGraphics(width, height);
  trailLayer = createGraphics(width, height);
}
function draw() {
  renderBackground(bgLayer);
  renderTrails(trailLayer);   // persistent, fading
  renderForeground(fgLayer);  // cleared each frame
  image(bgLayer, 0, 0);
  image(trailLayer, 0, 0);
  image(fgLayer, 0, 0);
}

パフォーマンス — 可能な限りベクトル化する

p5.jsの描画呼び出しは高コストです。数千個のパーティクルを扱う場合：

// SLOW: individual shapes
for (let p of particles) {
  ellipse(p.x, p.y, p.size);
}

// FAST: single shape with beginShape()
beginShape(POINTS);
for (let p of particles) {
  vertex(p.x, p.y);
}
endShape();

// FASTEST: pixel buffer for massive counts
loadPixels();
for (let p of particles) {
  let idx = 4 * (floor(p.y) * width + floor(p.x));
  pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();

references/troubleshooting.mdの「Performance」を参照してください。

複数のスケッチにはインスタンスモードを使う

グローバルモードではwindowが汚染されます。本番環境では、インスタンスモードを使います。

const sketch = (p) => {
  p.setup = function() {
    p.createCanvas(800, 800);
  };
  p.draw = function() {
    p.background(0);
    p.ellipse(p.mouseX, p.mouseY, 50);
  };
};
new p5(sketch, 'canvas-container');

1ページに複数のスケッチを埋め込む場合や、フレームワークと統合する場合は必須です。

WebGLモードの注意点

• createCanvas(w, h, WEBGL) — 原点は左上ではなく中央です
• Y軸は反転します（WEBGLでは正のYが上方向、P2Dでは下方向です）
• P2Dのような座標にするには、translate(-width/2, -height/2)を使います
• 変換のたびにpush()／pop()を使います — 行列スタックは警告なしにオーバーフローします
• rect()／plane()の後ではなく、その前にtexture()を使います
• カスタムシェーダー：createShader(vert, frag) — 複数のブラウザーでテストします

エクスポート — キーバインドの規約

すべてのスケッチで、keyPressed()に次の処理を含めます。

function keyPressed() {
  if (key === 's' || key === 'S') saveCanvas('output', 'png');
  if (key === 'g' || key === 'G') saveGif('output', 5);
  if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
  if (key === ' ') CONFIG.paused = !CONFIG.paused;
}

ヘッドレスでの動画エクスポート — noLoop()を使う

Puppeteerを使ってヘッドレスでレンダリングする場合、スケッチではsetup内でnoLoop()を必ず使います。これがないと、スクリーンショットの処理が遅い間もp5の描画ループがそのまま実行され、スケッチが先に進んでフレームが飛んだり重複したりします。

function setup() {
  createCanvas(1920, 1080);
  pixelDensity(1);
  noLoop();                    // capture script controls frame advance
  window._p5Ready = true;      // signal readiness to capture script
}

同梱のscripts/export-frames.jsは_p5Readyを検出し、キャプチャごとにredraw()を1回呼び出すことで、フレームを正確に1対1で対応させます。references/export-pipeline.mdの「Deterministic Capture」を参照してください。

複数シーンの動画では、クリップごとのアーキテクチャを使います。シーンごとにHTMLを1つ用意し、それぞれを個別にレンダリングして、ffmpeg -f concatで結合します。references/export-pipeline.mdの「Per-Clip Architecture」を参照してください。

エージェントのワークフロー

p5.jsのスケッチを作成するとき：

1. HTMLファイルを作成する — すべてのコードをインラインに記述した、単独で動作するファイルにします
2. ブラウザーで開く — open sketch.html（macOS）またはxdg-open sketch.html（Linux）を実行します
3. ローカルアセット（フォント、画像）にはサーバーが必要です。プロジェクトディレクトリでpython -m http.server 8080を実行し、http://localhost:8080/sketch.htmlを開きます
4. PNG／GIFをエクスポートする — 上記の例のようにkeyPressed()のショートカットを追加し、ユーザーに押すキーを伝えます
5. ヘッドレスでエクスポートする — 自動フレームキャプチャにはnode scripts/export-frames.js sketch.html --frames 300を実行します（スケッチではnoLoop()と_p5Readyを使う必要があります）
6. MP4をレンダリングする — bash scripts/render.sh sketch.html output.mp4 --duration 30を実行します
7. 反復的に調整する — HTMLファイルを編集し、ユーザーにブラウザーを更新して変更を確認してもらいます
8. 必要に応じてリファレンスを読み込む — 実装中に必要なリファレンスファイルを読み込むには、skill_view(name="p5js", file_path="references/...")を使います

パフォーマンス目標

指標	目標
フレームレート（インタラクティブ）	60fpsを維持
フレームレート（アニメーションのエクスポート）	最低30fps
パーティクル数（P2Dの図形）	60fpsで5,000～10,000個
パーティクル数（ピクセルバッファー）	60fpsで50,000～100,000個
キャンバス解像度	最大3840x2160（エクスポート）、1920x1080（インタラクティブ）
ファイルサイズ（HTML）	100KB未満（CDNライブラリを除く）
読み込み時間	最初のフレームまで2秒未満

参考資料

ファイル	内容
references/core-api.md	Canvas のセットアップ、座標系、描画ループ、push()/pop()、オフスクリーンバッファー、合成パターン、pixelDensity()、レスポンシブデザイン
references/shapes-and-geometry.md	2D プリミティブ、beginShape()/endShape()、ベジェ曲線／Catmull-Rom 曲線、vertex() の各種システム、カスタムシェイプ、p5.Vector、符号付き距離場、SVG パス変換
references/visual-effects.md	ノイズ（パーリンノイズ、フラクタル、ドメインワーピング、カール）、フローフィールド、パーティクルシステム（物理、群れ、軌跡）、ピクセル操作、テクスチャ生成（点描、ハッチング、ハーフトーン）、フィードバックループ、反応拡散
references/animation.md	フレームベースのアニメーション、イージング関数、lerp()/map()、ばね物理、ステートマシン、タイムラインシーケンス、millis() ベースのタイミング、トランジションパターン
references/typography.md	text()、loadFont()、textToPoints()、キネティックタイポグラフィ、テキストマスク、フォントメトリクス、レスポンシブなテキストサイズ設定
references/color-systems.md	colorMode()、HSB/HSL/RGB、lerpColor()、paletteLerp()、プロシージャルパレット、色彩調和、blendMode()、グラデーション描画、厳選されたパレットライブラリ
references/webgl-and-3d.md	WEBGL レンダラー、3D プリミティブ、カメラ、ライティング、マテリアル、カスタムジオメトリ、GLSL シェーダー（createShader()、createFilterShader()）、フレームバッファー、ポストプロセス
references/interaction.md	マウスイベント、キーボード状態、タッチ入力、DOM 要素、createSlider()/createButton()、オーディオ入力（p5.sound の FFT／振幅）、スクロール駆動アニメーション、レスポンシブイベント
references/export-pipeline.md	saveCanvas()、saveGif()、saveFrames()、決定論的なヘッドレスキャプチャ、ffmpeg によるフレームから動画への変換、CCapture.js、SVG エクスポート、クリップ単位のアーキテクチャ、プラットフォームへのエクスポート（fxhash）、動画に関する注意点
references/troubleshooting.md	パフォーマンスプロファイリング、ピクセル単位の予算、よくある間違い、ブラウザーの互換性、WebGL のデバッグ、フォント読み込みの問題、ピクセル密度の落とし穴、メモリリーク、CORS
templates/viewer.html	インタラクティブビューアーテンプレート：シードの移動（前／次／ランダム／指定）、パラメータスライダー、PNG のダウンロード、レスポンシブな Canvas。探索可能なジェネラティブアートを作る場合は、これをベースにしてください

---

創造的な発想の展開（ユーザーが実験的／創造的／独自の出力を求めた場合のみ使用）

ユーザーが創造的、実験的、意外性のある、または型破りな出力を求めた場合は、最適な戦略を選び、コードを生成する前にその手順を検討してください。

• 概念ブレンディング — 2 つの要素を組み合わせるよう指定された場合や、ハイブリッドな美学が求められる場合
• SCAMPER — 既知のジェネラティブアートのパターンにひねりを加えたい場合
• 距離連想法 — ユーザーが単一の概念を提示し、探求を求める場合（「時間をテーマに何か作って」など）

概念ブレンディング

1. 異なる 2 つのビジュアルシステムを挙げます（例：パーティクル物理＋手書き）
2. 対応関係を割り当てます（パーティクル＝インクの滴、力＝筆圧、場＝字形）
3. 選択的に融合します — 興味深い創発的なビジュアルを生む対応関係を残します
4. 2 つのシステムを並べるのではなく、統一されたシステムとして融合したものをコードにします

SCAMPER による変換

既知のジェネラティブパターン（フローフィールド、パーティクルシステム、L システム、セルオートマトン）を選び、次の方法で体系的に変換します。

• 置き換え：円をテキスト文字に、線をグラデーションに置き換えます
• 結合：2 つのパターンを融合します（フローフィールド＋ボロノイ図）
• 適応：2D パターンを 3D 投影に適用します
• 変更：スケールを誇張したり、座標空間をワープしたりします
• 別の用途に転用：物理シミュレーションをタイポグラフィに、ソートアルゴリズムを色に活用します
• 削除：グリッドをなくす、色をなくす、対称性をなくす
• 逆転：シミュレーションを逆方向に実行する、パラメーター空間を反転する

距離による連想

1. ユーザーの概念（例：「孤独」）を起点にします
2. 3つの距離で連想を生成します：
   • 近い（分かりやすい）：空っぽの部屋、ひとりの人影、静寂
   • 中くらい（興味を引く）：群れの中で逆方向に泳ぐ一匹の魚、通知がないスマートフォン、地下鉄の車両間の隙間
   • 遠い（抽象的）：素数、漸近曲線、午前3時の色
3. 中距離の連想を掘り下げます。視覚化できるほど具体的でありながら、興味を引くほど意外性があります