P5Js

p5.js のスケッチ。ジェネラティブアート、シェーダー、インタラクティブ、3D。

skill の情報

早見表: SKILL.md の全文

p5.js の制作パイプライン

使いどころ

次のような依頼を受けたときに使います。p5.js のスケッチ、クリエイティブコーディング、ジェネラティブアート、インタラクティブな可視化、キャンバスアニメーション、ブラウザーで動くビジュアルアート、データ可視化、シェーダー効果、その他 p5.js を使うプロジェクト全般です。

中身

p5.js を使って、インタラクティブな作品やジェネラティブな視覚表現をつくるための制作パイプラインです。ブラウザーで動くスケッチ、ジェネラティブアート、データ可視化、インタラクティブな体験、3D シーン、音に反応するビジュアル、モーショングラフィックスを作り、HTML・PNG・GIF・MP4・SVG として書き出します。扱う範囲は、2D／3D のレンダリング、ノイズとパーティクルシステム、フローフィールド、シェーダー（GLSL）、ピクセル操作、キネティックタイポグラフィ、WebGL のシーン、音声解析、マウスやキーボードの操作、そしてヘッドレスでの高解像度書き出しです。

制作の基準

これはブラウザーの中で描かれるビジュアルアートです。キャンバスが画材であり、アルゴリズムが筆です。

コードを一行でも書く前に、作品のコンセプトを言葉にしてください。この作品は何を伝えるのか。見る人がスクロールの手を止めるのはなぜか。コードのチュートリアル例と何が違うのか。利用者のプロンプトはあくまで出発点であり、そこから野心的に解釈します。

最初の描画から良いものであることは譲れません。 開いた瞬間に目を引くものでなければいけません。p5.js の練習課題や、既定の設定のまま、あるいは「AI が作ったクリエイティブコーディング」に見えるなら、それは間違いです。出す前に考え直してください。

参照資料の語彙を超えていきましょう。 参照資料に載っているノイズ関数、パーティクルシステム、カラーパレット、シェーダー効果は、あくまで出発点の語彙です。プロジェクトごとに、組み合わせ、重ね、発明してください。カタログは絵の具のパレットであり、絵を描くのはあなたです。

先回りして創造的であること。 「パーティクルシステムが欲しい」と言われたら、群れとして振る舞う創発的な動き、尾を引く残像、奥行きに応じて色が移る霧、そして呼吸するように揺れる背景のノイズフィールドまで含めて返します。頼まれていないけれど喜ばれる視覚的なディテールを、最低ひとつは入れてください。

濃く、層があり、考え抜かれていること。 どのフレームも、見ることに応えるものであってください。真っ白な背景は使いません。必ず構図に階層をつけ、色は意図して選び、近くで見て初めて気づく細部を必ず入れます。

機能の数より、まとまりのある美意識。 すべての要素が、ひとつの視覚言語に奉仕していなければいけません。色温度をそろえ、線の太さの使い分けに一貫性を持たせ、動きの速度を調和させます。無関係な効果が十個あるスケッチは、互いに響き合う三つのスケッチより劣ります。

モード

構成技術

プロジェクトごとに、単体で完結する HTML ファイルを 1 つ作ります。ビルド手順は要りません。

バージョンについて

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 を使うには 2.x が必要です。references/core-api.md の § p5.js 2.0 を参照してください。

パイプライン

どのプロジェクトも、同じ 6 段階をたどります。

CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY

1. CONCEPT — 作品の狙いを言葉にします。雰囲気、色の世界、動きの語彙、この作品ならではの点
2. DESIGN — モード、キャンバスの大きさ、操作のしかた、色の体系、書き出し形式を決めます。コンセプトを技術的な判断に落とし込みます
3. CODE — p5.js をインラインで書いた HTML ファイルを 1 つ書きます。並びは、グローバル変数 → preload() → setup() → draw() → 補助関数 → クラス → イベントハンドラー
4. PREVIEW — ブラウザーで開き、見た目の質を確かめます。目標の解像度で試し、動作の速さも見ます
5. EXPORT — 出力を取り出します。PNG なら saveCanvas()、GIF なら saveGif()、MP4 なら saveFrames() と ffmpeg、まとめてヘッドレスで処理するなら Puppeteer
6. VERIFY — 出力はコンセプトどおりか。想定する表示サイズで目を引くか。額に入れて飾りたいか

方向づけ

美意識の軸

プロジェクトごとに変える決まり

既定の設定のまま使ってはいけません。どのプロジェクトでも次を守ります。

• 独自のカラーパレット — 生の fill(255, 0, 0) は使いません。3〜7 色を設計したパレットを必ず用意します
• 独自の線の太さの使い分け — 細いアクセント（0.5）、中くらいの骨格（1〜2）、太い強調（3〜5）
• 背景の作り込み — ただの background(0) や background(255) は使いません。必ず質感、グラデーション、あるいは層を持たせます
• 動きの幅 — 要素ごとに速さを変えます。主役は 1 倍、脇役は 0.3 倍、環境の要素は 0.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 ファイル 1 つです。並びは次のとおりです。

<!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>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
  <!-- <script src="https://unpkg.com/p5.js-svg@1.6.0"></script> -->  <!-- SVG export -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- video capture -->
  <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 か python3 -m http.server を使います
• Chrome DevTools の Performance タブで 60fps 出ているか確かめます
• ウィンドウの大きさではなく、書き出す解像度で確認します
• ステップ 1 のコンセプトどおりの見え方になるまで、パラメーターを調整します

ステップ 5: 書き出す

ステップ 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 の擬似乱数をプラットフォーム側の決定的な乱数に置き換えます。

// 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 を使う

ジェネラティブアートでは、HSB（色相・彩度・明度）のほうが RGB より圧倒的に扱いやすくなります。

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() で挟みます。行列スタックは何も言わずにあふれます
• texture() は rect() や plane() の前に呼びます。あとではありません
• 独自シェーダーは 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 を検出し、取り込み 1 回につき 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 ファイルを書く — 単体で完結する 1 ファイルに、コードをすべてインラインで入れます
2. ブラウザーで開く — macOS なら open sketch.html、Linux なら xdg-open sketch.html
3. ローカルの素材（フォント、画像）にはサーバーが要ります。プロジェクトのディレクトリで python3 -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/...") で読み込みます

性能の目標値

参照資料

発想を広げる（実験的・創造的・唯一無二の出力を求められたときだけ使います）

創造的なもの、実験的なもの、意外なもの、型破りなものを求められたら、いちばん合う戦略を選び、コードを書く前にその手順を頭の中で通してください。

• 概念のブレンド — 組み合わせたい 2 つのものが指定されたとき、あるいは混成の美意識を求められたとき
• SCAMPER — よく知られたジェネラティブアートのパターンに、ひねりを加えたいとき
• 距離のある連想 — ひとつの概念だけを与えられ、そこから探ってほしいとき（「時間についての何かを作って」など）

概念のブレンド

1. 異なる 2 つの視覚システムを挙げます（たとえばパーティクルの物理 + 手書き文字）
2. 対応づけをします（パーティクル = インクの滴、力 = ペンの筆圧、場 = 文字の形）
3. 選びながら混ぜます。面白い創発が生まれる対応づけだけを残します
4. 2 つのシステムを並べるのではなく、ひとつのシステムとして書きます

SCAMPER による変換

よく知られたジェネラティブなパターン（フローフィールド、パーティクルシステム、L システム、セルオートマトン）を取り上げ、体系的に変換します。

• Substitute（置き換える）: 円を文字に、線をグラデーションに置き換えます
• Combine（組み合わせる）: 2 つのパターンを混ぜます（フローフィールド + ボロノイ）
• Adapt（応用する）: 2D のパターンを 3D の投影に当てはめます
• Modify（変える）: 尺度を極端にしたり、座標空間をゆがめたりします
• Purpose（目的を変える）: 物理シミュレーションをタイポグラフィに、整列アルゴリズムを色に使います
• Eliminate（取り除く）: グリッドをなくす、色をなくす、対称性をなくす
• Reverse（逆にする）: シミュレーションを逆再生する、パラメーター空間を反転させる

距離のある連想

1. 利用者の概念を起点にします（たとえば「孤独」）
2. 距離を 3 段階に分けて連想を出します。

• 近い（当たり前）: 空っぽの部屋、ひとりの人影、静けさ
• 中くらい（面白い）: 群れの中で 1 匹だけ逆に泳ぐ魚、通知のない携帯電話、地下鉄の車両と車両のすきま
• 遠い（抽象的）: 素数、漸近曲線、午前 3 時の色

1. 中くらいの距離の連想を育てます。絵にできるだけの具体性がありながら、意外性も残っているからです