全4回にわたって、数学という道具を使って、幻想的なアートを描き出す。そんなクリエイティブ・コーディングに挑戦しようと思います。
でも、いきなり細かい話に入る前に——まずは全体の地図を見てください。
この連載で出てくる道具（p5.js、WebGL、Three.js…）は、名前だけ聞くと「どれが何やら」となります。でも、こうして並べると関係はシンプルです。出発点はブラウザの中の「白い布」（canvas）ひとつ。 そこから、手軽な2Dの道と、本格的な3D・シェーダーの道に分かれていく。それだけです。
上の地図が、この連載の全体像です。ここから先の話は、全部この地図のどこかにあります。迷子になったら、ここへ戻ってきてください。では、地図の上から順にたどっていきましょう。
🌟 まずは「巨人の肩」に乗る
昔は「数学ができないと無理」「難解なコードを暗記しないと」と思っていました。でも今は、先人の知恵とAIという土台の上からスタートできる時代です。ゼロから掘るのではなく、すでに積み上がった塔の頂上から始める。だから、難しかった表現が一気に身近になります。
その「肩」になってくれる場所が2つあります。世界中の作品がコードごと公開された宝箱、OpenProcessing（p5.js）と Shadertoy（GLSL）。そして、見つけたコードを「解説して」「Three.jsに書き換えて」と相談できるAIという通訳。この3つを使えば、数年かかる学習を数時間に縮められます。
🖋️ ただし、知恵を借りるときの3か条
- 出典を明記する：「〇〇さんの作品を参考にしました」とリンクを添える。
- ライセンスを確認する：Shadertoyの作品には再利用の条件（CCライセンス等）があります。
- 自分の感動を足す：コピペで終わらせず、数値をいじり、仕組みを学んで、自分の血肉に変える。
🎨 canvas と p5.js ── 2Dの道
▼ ここは地図の左側の話です
ブラウザで絵を描く舞台、それが <canvas> 要素＝真っ白な布です。ここに JavaScript という筆で、1ピクセルずつ色を置いていきます。効率のためのコードではなく、感性を形にするためのコード。それがクリエイティブ・コーディングです。
なぜ2Dの入り口が p5.js なのか？
素のJavaScript（Canvas 2D API）で円ひとつ描くにも、パスの開始や角度の指定など、理屈っぽくて楽しさが霞んでしまう。その点 p5.js は、直感的な言葉に翻訳してくれます。
- 円を描くなら
circle() - 色を塗るなら
fill()
世界中で愛される「魔法の画材セット」から始めるのが、一番挫折しないルートです。
🌌 なぜ道が2つに分かれるのか ── CPUとGPU
▼ ここが地図の「枝分かれ」です
p5.js（Canvas 2D API）で描くとき、頑張っているのはコンピュータの脳＝CPU。でも、画面全体をネオンのように光らせたり、ヌルヌル動かしたくなると、CPUは悲鳴を上げます。そこで GPU（シェーダー）の出番です。
🎨 CPU：超高速な一人の天才画家
どんな難しい計算もこなすが、作業は「順番待ち（直列）」。10万個の粒を一度に描けと言われると、手が追いつかずカクついてしまう。
🌌 GPU（シェーダー）：数百万人のマスゲーム
一人ひとりは単純作業しかできないが、数百万人が「せーの！」で全ピクセルを同時に塗る。だから複雑な光のうねりも、重くならずに描ける。
🛠️ WebGL と、救世主 Three.js ── 3Dの道
▼ ここは地図の右側の話です
GPUへの命令書が GLSL。それをブラウザで動かす土台が WebGL ですが、ここを直接書くのは「地獄」に近い。そこで、映画館の例えがいちばんしっくりきます。
素のWebGL：映画を上映したいだけなのに、レンガを焼いて映画館を建てるところから始めさせられる。初期設定だけで100行以上。表現に集中したいのに、非効率です。
p5.js（WEBGLモード）：2Dの延長で3Dも扱える「何でもできる公民館」。安心感はあるが、本格的な光や影、複雑なシェーダーには力不足を感じる場面も。
Three.js：3D・シェーダーに特化した「プロ仕様のレンタルシアター」。映写機（カメラ）、照明（ライト）、スクリーンが最初から揃っている。自作のフィルム（GLSL）を持ち込むだけで、最高の環境で上映できる。本格的に潜るなら、やっぱりここ。
※2026年現在、次世代の WebGPU も来ています。ただ、あらゆる環境での安定性を考えると、今はまだ WebGL ベースが現実的です。
🚀 ゴール地点：React Three Fiber
▼ 地図のいちばん下です
映画館をさらに「スマート管理システム」化したのが React Three Fiber（R3F） です。
- 宣言型：「何を上映するか」を宣言するだけ。機材の細かい調整はシステムが代行。
- コンポーネント化：演出を部品として扱えるので、改造も使い回しも劇的に楽になる。
「仕組み」を知るために Three.js を通り、「表現」を爆速にするために R3F を使う。これが最短の布陣だと思います。