algorithmic-art を実際に動かしてみた ― p5.js で水中コースティクスを作る

このスキルは何か

algorithmic-art は、ジェネラティブアートを2段階で作るスキル。まず「アルゴリズム哲学（マニフェスト）」を文章で書き、次にそれを p5.js のコードで表現する。鍵は3つ——過程こそが美（走らせるたびに一意な“生きた”アルゴリズム）、シード付き乱数（再現可能なランダム＝Art Blocks方式）、そして p5.js のビューワーは付属テンプレートを土台にすること。

実際にやった手順

Step 1：アルゴリズム哲学を書いた

いきなりコードに行かず、まず「どんな計算美学か」を文章で定義する流れ。最終的に "Caustica（潜光）" という movement を立てた。コンセプトは「水底にゆらぐ光の網」——水面の波がレンズのように光を屈折・集束させ、プールの底に揺れる明線の網（コースティクス）を生む、その“涼しさ・透明感”を主題にした。

体験メモ：哲学を先に書くと、コードを書く前に「何を作るか」が言語化されて、実装が驚くほど速く・ブレなくなった。一方でスキルは哲学文に「職人性を繰り返し強調せよ」と指示する。正直、最初は自己演出めいて感じたが、書いてみると“雑に作らない”という自分への縛りとして機能した。

Step 2：p5.js で表現した（最初の失敗）

最初は別のモチーフ（有機的な流れ場）を、サイトのブランド色である赤を差し色にして実装した。ところが——できあがった赤い細線が、流線に乗ると血管や傷のように見えて、生理的に気持ち悪い。アルゴリズムは正しく動いていたが、絵としては不快だった。

体験メモ：これは「過程こそが美」の裏返しの教訓。ジェネラティブアートは出力を見て判断する工程が必須で、アルゴリズムの正しさと、絵の良し悪しは別物。frontend-design でいう「作った後に自分で批評する」が、ここでも効いた。

Step 3：モチーフごと方針転換した

赤を差し色に残す前提を捨て、モチーフを水中のコースティクスに変更。配色を寒色のみ（深いティール地＋淡いシアン白の光、交差点で白へ）に振り、加算合成で光が重なるほど明るく発光するようにした。2つの位相差フローフィールドを交差させて「網」を作り、ノイズの時間発展で揺らし続ける。赤は完全に外した——清涼感の規律は、色を足さないことだった。

Step 4：シードを変えて生成した

シード付きなので、同じシードは必ず同じ絵、違うシードは別の絵になる。3つのシードで生成して確認した。

Step 5：動く実物として埋め込んだ（実ページに採用）

作った Caustica は、ui-memo の「清涼感」ページの水面コースティクスdemoとして実際に採用した。下のビューワーで「別の光を生成」を押すと、毎回一意な光の網が出る。

使ってみて効いたこと

• 哲学ファースト：作る前に言語化する2段階は、行き当たりばったりを防ぐ。実装が速く・ブレなくなった。
• 出力を見て判断する工程の大切さ：赤い流線が血管に見えた失敗で痛感した。アルゴリズムの正しさ≠絵の良さ。
• シード再現性：「一意だが再現できる」は実用的。良い1枚を引いたらシードを記録すれば再現できる。
• テンプレ起点：UIをゼロから作らず土台に乗るので、見た目の質が最初から担保される。
• 実ページに繋がった：実験で終わらず、清涼感ページの本番demoとして採用できた。スキルの出力が“作品”として現場で使えた。

ハマった・判断したこと

• 配色は最後に効く：ブランド色（赤）を機械的に差すと、モチーフ次第で生々しくなる。色はモチーフと不可分。清涼感を出すなら「赤を足さない」方が正解だった。
• 連続アニメと静止：実ページのカードは他の演出と並ぶので、ループする「揺れ続けるコースティクス」に。記事側は「触って毎回生成」のインタラクティブ版に。同じスケッチを用途で出し分けた。
• 環境依存：p5.js を CDN から読むと環境によっては詰まる。ローカル（public/配信）に置くと安定。容量も public/配信ならJSバンドルに載らない。

ui-memo での使いどころ

• 「UI表現の引き出し」の演出demo：今回そのまま「清涼感」ページの水面コースティクスに採用。表現の引き出しを実物で増やせる。
• OG画像・ヒーロー・サムネ：シード再現性があるので、良い構図を選んで固定できる。
• 記事のアイキャッチ：Zennや各ページの図版に。

まとめ

algorithmic-art は「まず哲学、次にコード」という順序と、シード付きの再現性が要のスキルだった。赤い流線が血管に見えた失敗から水中コースティクスへ方針転換し、最終的に実ページのdemoとして採用するまで通したことで、過程の美・出力を見て判断すること・配色とモチーフの不可分さが腑に落ちた。frontend-design が“判断の軸”なら、algorithmic-art は“手を動かして生む”スキル——両方を併せると、方針から作品まで一気通貫で作れる。

よくある質問