全4回にわたって、数学という道具を使って、幻想的なアートを描き出す。そんなクリエイティブ・コーディングに挑戦しようと思います。
🌟 「巨人の肩」に乗る。現代の学び方について思うこと
昔は「数学ができないと無理」「難解なコードを暗記しないと」と思っていたけれど、今は、かつてないほど「巨人の肩」に乗って遠くを見渡せる時代なんだと、改めて思います。
巨人の肩に乗るとは？
先人の知識やAIという知恵を土台にすること。地面をゼロから掘り進めるのではなく、すでに積み上がった塔の頂上からスタート、難しかったことが身近になり、高みにある表現を目指せる。
手元にある強力なリソース
- OpenProcessing (p5.js)： 巨匠たちの「数学美のレシピ」が公開されている宝箱。
- Shadertoy (GLSL)： 宝石の輝きや水のうねりをコードで実現する、シェーダーの聖地。
AI を「最高の通訳」として使い倒す
高度なコードを見つけても、以前なら「意味不明」で終わっていました。でも今は AI がいます。「このコードを自分なりに解説して」「この部分を Three.js に書き換えて」と相談を繰り返すことで、数年かかるはずの学習ステップを数時間で飛び越えられる。
📜 素晴らしい知恵には、敬意（リスペクト）を添えて
プログラミングの世界には「知恵を分かち合う」素晴らしい文化があります。 しかし、それは「勝手に使っていい」という意味ではなく、 「リスペクトを持って、正しく引用する」ことが、この文化を支える大切なマナーだと思います。
🖋️ 「巨人の肩」に正しく乗るための 3 か条
- 1. 出典（クレジット）を明記する： 「このコードは 〇〇 さんの作品を参考にしています」とリンクを添える。
- 2. ライセンスを確認する： Shadertoy などの作品には、再利用の条件（CCライセンスなど）が記されています。
- 3. 自分の「感動」を付け加える： そのままコピペして終わりではなく、数値をいじったり、仕組みを勉強して、自分の血肉に変えてみる。
感謝を持って知恵を借り、自分なりの色を足していくことが、「巨人の肩」のをお借りする、最も誠実でクリエイティブな方法だと思います。
🎨 ブラウザの中にある「真っ白なキャンバス」との付き合い方
ブラウザで絵を描く舞台、それが <canvas> 要素（真っ白な布）。ここに JavaScript という筆で1ピクセルずつ色を置いていく。
効率化のためのコードではなく、「真っ白な布」の中で感性を形にするためのコード。これがクリエイティブ・コーディングの本質だと思います。
なぜ 2D の入り口は p5.js なのか？
素の JavaScript（Canvas 2D API）で円を描こうとすると、パスの開始や角度の指定など、あまりに理屈っぽくて描画の楽しさが霞んでしまう。その点、p5.js は直感的な言葉に翻訳してくれるから助かる。
- 円を描くなら
circle() - 色を塗るなら
fill()
世界中で愛されている「魔法の画材セット」から始めるのが、一番挫折しないルートだと思います。
🌌 【拡張】「GPU」の世界へ足を踏み入れる理由
p5.js（Canvas 2D API）で描くとき、頑張っているのはコンピュータの脳「CPU」。
でも、画面全体をネオンのように光らせたり、ヌルヌル動かしたいとき、CPUはすぐに悲鳴を上げてしまう。そこで GPU（シェーダー）の力を借りる必要が出てきます。
🎨 CPU：超高速な一人の天才画家
どんな難しい計算もできるが、作業は「順番待ち（直列）」。10万個の粒を一気に描けと言われると、手が追いつかずカクついてしまう。
🌌 GPU（シェーダー）：数百万人のマスゲーム
一人ひとりは単純作業しかできないが、数百万人が「せーの！」で全ピクセルを同時に塗る。だから複雑な光のうねりも重くならずに表現できる。
🛠️ GLSL という呪文と、救世主 Three.js
GPU軍団への命令書が GLSL。これをブラウザで動かす土台が WebGL だが、ここを直接書こうとするのは、「地獄」に近い。
🎬 映画館の例え（これが一番しっくりくる）
素の WebGL： 映画を上映したいだけなのに、レンガを焼いて映画館を建てることから要求される。初期設定だけで100行以上書かされるのは、表現に集中したい身としては非効率だ。
p5.js（WEBGLモード）： 2Dの延長で3Dも扱える「何でもできる公民館」のような安心感がある。けれど、本格的な3Dの光や影、複雑なシェーダーを扱うとなると、力不足を感じる場面も出てくる。
Three.js： 3Dやシェーダー表現に特化した「プロ仕様のレンタルシアター」。映写機（カメラ）、照明（ライト）、スクリーンが最初からベストな状態で揃っている。自作のフィルム（GLSL）を持ち込むだけで、最高の環境で上映（レンダリング）ができる。本格的に潜るなら、やっぱりここがベスト。
※2026年現在、次世代の WebGPU もきている。ただ、あらゆる環境での安定性を考えるなら、今はまだ WebGL ベースで進めるのが現実的。
🚀 最終目的地：React Three Fiber (R3F) への着地
映画館をさらに「スマート管理システム」化したのが React Three Fiber (R3F) 。
- 宣言型： 「何を上映するか」を宣言するだけ。機材の細かい調整はシステムが代行してくれる。
- コンポーネント化： 演出を部品として扱えるから、改造や使い回しが劇的に楽になる。
「仕組み」を知るために Three.js を通り、「表現」を爆速にするために R3F を使う。 この流れが、最短の布陣だと思います。