第2回クリエイティブ・コーディング：p5.js（CPU）の世界

第2回の主役は、「p5.js」。
ブラウザ標準の Canvas 2D API を驚くほど直感的に、かつ簡単に扱えるようにしてくれる「魔法のスケッチブック」のようなツールです。

🧭 コードを書く前に整理しておきたいこと

p5.js で実際に手を動かす前に、表現のレバーとなる概念を整理しておきます。これらは p5.js 固有の機能というより、CGやシェーダー、物理シミュレーションの世界でも共通して使われる知識です。

1. アニメーションの鼓動：フレームレート（fps）

アニメーションの本質は「パラパラ漫画」。p5.js には、この鼓動を司る仕組みがある。

setup()： 最初に1回だけ実行される「準備」。
draw()： 1秒間に何度も繰り返される「鼓動」。
フレームレート（fps）： 1秒間に何回描き直すか。デフォルトは 60fps。

※画家（CPU）の手が追いつかなくなると、この数値が下がり「処理落ち」が発生する。それが軍団（GPU）へ移行する合図。

2. 直感的なパレット：HSB カラーモード

光の色を操るなら、RGB よりも HSB の方が直感的で扱いやすい。

H (Hue)： 色相。0〜360度の角度で色を選ぶ。
S (Saturation)： 彩度。鮮やかさ。
B (Brightness)： 明度。明るさ。

「同じ鮮やかさで色だけを変化させたい」ときは、H の値を増やすだけで済む。これはシェーダーで色を計算する時にも役立つ考え方です。

3. リズムを作るレバー：三角関数（sin / cos）

「往復」や「円」の動きを司る数学。難しく考えず「リズムを作るつまみ」として捉える。

sin（サイン）： 呼吸のような「ゆったりとした往復運動」や、明滅のループを作る。
cos（コサイン）： sin と組み合わせて使うことで、きれいな「円」の動きを生み出す。

4. コンピュータとの共通言語：度数法と弧度法（ラジアン）

角度を測る「単位」の違い。人間用とコンピュータ用の翻訳が必要になる。

度数法（Degree）： 90度、180度など。人間が直感的に理解しやすい。
弧度法（Radian）： PIを基準にする単位。コンピュータ（特にシェーダー）の計算はすべてこっち。
自分への呪文： 180度＝ PI ／ 360度＝ TWO_PI。

最初は angleMode(DEGREES) で人間モードにしてもいいが、いずれ GLSL（シェーダー）に行くならラジアン（PI）のリズムに慣れておくのが吉。

5. 勢いと方向をパッキング：ベクトル（Vector）

単なる「座標」ではなく、「勢いのある矢印」として数値を扱う考え方。

情報のセット： x と y をバラバラに管理せず、「位置」「速度」「加速度」という塊で扱う。
物理の再現： 重力、風、ターゲットを追いかける動きなどが驚くほどシンプルに記述できる。

6. 滑らかに繋ぐ翻訳機：map() と lerp()

異なる数値の世界を繋ぐための超重要ツール。

map()： 「マウスの 0〜100 の動き」を「円の大きさ 10〜500」に変換するような、数値のスケール変換。
lerp()（線形補完）： AからBまで「ヌルッ」と近づけるバターのような役割。カクカクした動きを滑らかにする魔法。

7. 有機的なデタラメ：ノイズ（noise）

「計算で描く自然」には欠かせない。ランダムとは決定的に違う。

Random： 完全にバラバラな砂嵐。
Noise： 前後の値が滑らかに繋がっている「ゆらぎ」。これを知ると、表現が「生きている」ように見える。

8. 座標のセーブ＆ロード：push() / pop()

特定の図形だけを回転・移動させたい時に「今の状態を一時保存」する仕組み。これを使えば、他の図形を巻き添えにせず、特定の部分だけを自由に操れる。

🚀 まずは「最初の一行」を動かしてみる

クリエイティブ・コーディングの旅、最初の一歩は p5.js から。環境構築で挫折しないために、まずはブラウザだけで完結する p5.js Web Editor へ、ここからスタート。

まずは何も考えず再生ボタン（三角マーク）を押してみる。キャンバスが現れたら、それが自分だけの表現の舞台です。

このコードを貼り付けて実行してみてください。

let pos; // ベクトル：位置
let angle = 0; // 三角関数用のアングル

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  //直感的なパレット「HSBモード」
  // (色相 0-360, 彩度 0-100, 明度 0-100, 透明度 0-1)
  colorMode(HSB, 360, 100, 100, 1);
  
  //勢いと方向「ベクトル」
  // 画面の真ん中を初期位置にする
  pos = createVector(width / 2, height / 2);
  
  background(0);
}

function draw() {
  // 背景を少し透明にして塗りつぶすことで、残像（トレイル）を作る
  background(0, 0.05);

  // 有機的なデタラメ「ノイズ」
  // 毎フレーム、ノイズを使って位置を微妙に揺らす（ゆらぎの表現）
  let nx = noise(frameCount * 0.01) * 10 - 5;
  let ny = noise(frameCount * 0.01 + 100) * 10 - 5;
  pos.add(nx, ny);

  // リズムを作るレバー「三角関数 sin」
  // -1 から 1 の間でゆったり往復する数値を作る
  let pulse = sin(angle);
  
  // 翻訳機「map」
  // -1〜1 の往復運動を、円の大きさ「20〜200」に変換する
  let d = map(pulse, -1, 1, 20, 200);

  // HSBによる色の変化
  // 角度（frameCount）を色相（Hue）に。360を超えたら 0 に戻る(%)
  let hueValue = frameCount % 360;

  // 座標のセーブ「push / pop」
  push();
    translate(pos.x, pos.y); // 円の位置へ移動
    noStroke();
    fill(hueValue, 80, 100, 0.5); // ネオンのような色
    circle(0, 0, d); // pulse（sin波）によって大きさが変わる円
    
    // 飾り：もう一つ小さな光を追加
    fill(360, 0, 100, 1);
    circle(0, 0, d * 0.2);
  pop();

  // 角度を少しずつ進める
  angle += 0.05;

  // 画面の外に出そうになったら真ん中に戻す
  if (pos.x < 0 || pos.x > width || pos.y < 0 || pos.y > height) {
    pos.set(width / 2, height / 2);
  }
}

✨ インスピレーションを拾い、自分の形にする手順

世界中のクリエイターが集まる OpenProcessing で「自分の好き」を探すところから始めるのが一番です。

STEP 1：コードの宝石を探しに行く

OpenProcessing の Discover ページへ。
「これいいな！」と思う画像をクリックして作品を開く。
画面上部（または右側）にある </>（コードアイコン） をクリック。
表示されたコードをコピーして、自分の Web Editor に貼り付けてみる。

⚠️ 要注意：「そのままでは動かない」コードの見分け方

OpenProcessing には、似ているけれど違う言語（Java）で書かれた作品が混ざっている。これをそのまま p5.js に貼ってもエラーが出て動かない。見分け方は簡単だ。

種類	書き出しの言葉
p5.js（動く）	`function setup()`
Processing (動かない)	`void setup()`

もし void や int, float という単語を見つけたら、それは Java モード。でも、諦める必要はない。

STEP 2：AI という「最強の通訳」に丸投げする

もし Java モードの素敵なコードを見つけたら、AI にこうお願いしてみるのが正解。

「この Processing(Java) のコードを、p5.js で動くように書き換えて。何を変えたのかも教えてほしい」

AI は言語の壁を軽々と超えてくれる。

STEP 3：自分流の足跡を「公開」する

無事に動いたら、色やスピードを変えて「自分流」にアレンジ。最後は OpenProcessing にアップして公開できます。ちなみに、OpenProcessing のエディタは高機能で、画像や音声をアップロードして作品に使ったり、HTML や CSS のタブを切り替えて、キャンバス以外のウェブページ全体のデザインを作り込むことも可能です。

🔍 OpenProcessing で「モード」を見分ける方法

p5.js には、GPU を使って 3D を描く『WEBGL モード』という強力な機能も備わっています。他人のコードを参考にする際、まずは setup() 関数の中を覗いてみます。

1. createCanvas の「引数」をチェック！

        // 🟢 2Dモード（CPUで計算）

        createCanvas(windowWidth, windowHeight);

        // 🔵 WEBGLモード（GPUを活用）

        createCanvas(windowWidth, windowHeight, WEBGL);

2. 「原点」の位置で見分ける

プログラムを動かしたとき、座標 (0, 0) がどこにあるかで判別できるぞ。

左上が 0： 2Dモード。昔ながらの「お絵描き」の感覚。
真ん中が 0： WEBGLモード。3D空間としての「数学」の感覚に近い。

3. 必殺技「shader()」の有無

コード内に shader() や loadShader() という文字があれば、それは 100% GPU に魔法を任せている証拠。p5.js の皮を被った「シェーダー・アート」だと思って間違いない。

例えば、上の作成の曲線の数を1,000本、さらに 10,000本へと増やしていったら画面の動きがカクつき始め、コンピュータが悲鳴を上げます。
この限界を突破するために必要なのが、数百万個のピクセルを同時に塗り分ける軍団、GPU（シェーダー）の力です。

⚠️ 舞台を WEBGL に変えるだけでは不十分な理由

「WEBGL モードにすれば速くなる」と思われがちですが、実はそう甘くありません。JavaScript の for ループの中で大量の命令を出し続けている限り、命令を出す CPU がヘトヘトになってしまうからです。

本当の限界突破とは、JavaScript の「命令」を卒業し、GLSL（シェーダー言語）という専用の言葉で「たった1枚の完璧な指示書」を書き上げること。

JavaScript とは全く異なる「数学的で、機械に近い」この言語を習得するのは少し大変ですが、その先には、どんなハイエンドな PC でも描けなかったような、何十万もの光が舞う世界が待っています。