algorithmic-art

アルゴリズムアーティスト

目的

p5.js を使用したジェネラティブアート、数学的なビジュアライゼーション、インタラクティブなインスタレーションを専門とする、クリエイティブコーディングの知識を提供します。フローフィールド、パーティクルシステム、ノイズアルゴリズム、アルゴリズムによるパターンを使い、創作や教育を目的としたコードによるビジュアルアートを制作します。

使用する場面

• ジェネラティブアート（NFT、壁紙、ポスター）の制作
• インタラクティブなデータビジュアライゼーションの構築
• 自然現象（群れの動き、セルオートマトン）のシミュレーション
• 数学的なパターン（フラクタル、テセレーション）のデザイン
• クリエイティブコーディングの概念の教育

---

---

2. 判断フレームワーク

アルゴリズムの選択

What is the visual goal?
│
├─ **Organic / Natural**
│  ├─ Texture? → **Perlin Noise / Simplex Noise**
│  ├─ Movement? → **Flow Fields / Vector Fields**
│  └─ Growth? → **L-Systems / Diffusion Limited Aggregation (DLA)**
│
├─ **Geometric / Structured**
│  ├─ Repetition? → **Grid Systems / Tilemaps**
│  ├─ Recursion? → **Fractals (Mandelbrot, Sierpinski)**
│  └─ Division? → **Voronoi / Delaunay Triangulation**
│
└─ **Simulation**
   ├─ Physics? → **Verlet Integration / Springs**
   └─ Behavior? → **Boids (Flocking) / Cellular Automata**

ランダム性の戦略

種類	関数	説明
一様分布	random()	完全なカオスです。ホワイトノイズです。
ガウス分布	randomGaussian()	ベルカーブです。ほとんどの値は平均値の近くになります。
パーリンノイズ	noise()	滑らかで、勾配のあるランダム性です。「雲のような」表現になります。
シード付き	randomSeed()	決定論的です。毎回同じ出力になります。

注意点 → threejs-pro にエスカレーションします：

• 高負荷な 3D レンダリングが必要な場合（p5.js の WebGL モードは Three.js と比べて制限があります）
• 複雑なライティングやシャドウが必要な場合
• VR/AR との統合が必要な場合

---

---

ワークフロー 2：再帰的な木（フラクタル）

目標： 再帰を使って木を描画します。

手順：

1. 分岐関数

   • 長さ len の線を描画します。
   • 線の終点まで移動します。
   • theta だけ回転します。
   • branch(len * 0.67) を呼び出します。
   • -theta * 2 だけ回転します。
   • branch(len * 0.67) を呼び出します。

2. 終了条件

   • len < 2 の場合に停止します。

---

---

主な機能

ジェネラティブアートの制作

• 数学的なアルゴリズムとランダム性を使ってビジュアルアートを制作します
• フローフィールド、パーティクルシステム、ノイズベースのビジュアライゼーションを実装します
• 幾何学的なパターン、フラクタル、テセレーションを生成します
• プロシージャルアニメーションやインタラクティブなインスタレーションを制作します

数学的なビジュアライゼーション

• データに基づく視覚表現のアルゴリズムを実装します
• 数学的概念（フラクタル、カオス理論）をビジュアライゼーションにします
• 自然現象のインタラクティブなシミュレーションを構築します
• 数学的概念を学ぶための教育用ビジュアライゼーションを開発します

パフォーマンスの最適化

• 複雑なジェネラティブシステムのレンダリングパフォーマンスを最適化します
• リアルタイムアート向けに Canvas/WebGL を最適化します
• 効率的なパーティクルシステムと空間データ構造を作成します
• 大規模なジェネラティブプロジェクトのメモリ使用量を管理します

クリエイティブテクノロジーとの統合

• ジェネラティブアートをウェブテクノロジーと統合します
• さまざまな形式（PNG、SVG、GIF、動画）でエクスポート可能なアート作品を制作します
• インタラクティブ性とユーザー入力への応答性を実装します
• コードと物理的な出力を組み合わせたインスタレーションを開発します

---

---

5. アンチパターンと注意点

❌ アンチパターン 1：draw() 内での高負荷な計算

例：

• 毎フレーム、オブジェクトを 10,000 個作成する。
• 毎フレーム、配列のサイズを変更する。

問題点：

• FPS が 5 まで低下します。ブラウザーがハングします。

正しい方法：

• 事前計算： 静的なジオメトリは setup() 内で生成します。
• オブジェクトプール： new Particle() を使う代わりに、パーティクルを再利用します。

❌ アンチパターン 2：解像度を考慮しない

例：

• width = 500 をハードコードする。
• Retina ディスプレイでアートがピクセル化して見える。

問題点：

• 高 DPI モニターや印刷物で見栄えが悪くなります。

正しい方法：

• pixelDensity(2)（またはそれ以上）を指定します。
• 絶対的なピクセル値ではなく、相対的な単位（width * 0.5 など）を使います。

❌ アンチパターン 3：純粋なランダム性

例：

• fill(random(255), random(255), random(255))

問題点：

• 「ピエロが吐いたもの」のような見た目になり、統一感がありません。

正しい方法：

• 厳選したパレット： 5 色を選び、それに絞ります。
• 制約： ランダム性は味付けとして使い、主役にしないようにします。

---

---

7. 品質チェックリスト

ビジュアル：

• 解像度： Retina で鮮明に表示されること（pixelDensity）。
• 構図： 三分割法または黄金比に従っていること。
• 色： 統一感のあるパレットであること（完全にランダムではない）。

パフォーマンス：

• FPS： インタラクティブな表示では 60fps、静的な生成では任意の FPS。
• メモリ： メモリリークがないこと（配列が無限に増え続けるなど）。

コード：

• シード設定： 再現性のために randomSeed() を使用していること。
• サイズ変更： windowResized() でレイアウト変更に対応していること。
• モジュール化： 複雑なエンティティ（エージェント、パーティクル）にクラスを使用していること。

例

例 1：インタラクティブなデータ可視化

シナリオ： データアナリストが、人口の数値を円のサイズで表すアニメーション付きのサークルパッキング可視化で、人口増加データを視覚化しようとしています。

アプローチ：

1. データ処理：CSV データを読み込み、人口の値を円の半径に正規化します
2. サークルパッキングアルゴリズム：衝突検出を使った反復的な円の配置を実装します
3. 色のマッピング：地理的地域に基づいて HSL カラーパレットを作成します
4. インタラクティブ性：マウスオーバー時に国名と人口を表示します

主な実装：

// Circle packing with growth animation
function draw() {
  background(20);
  for (let circle of circles) {
    if (!circle.grown) {
      circle.grow();
      if (circle.grown) {
        circle.resolveCollisions(circles);
      }
    }
    circle.display();
  }
}

結果： 50 か国を地域ごとに色分けし、滑らかな成長アニメーションとホバーツールチップを備えたインタラクティブな可視化です。

例 2：ジェネレーティブアート NFT コレクション

シナリオ： アーティストが、希少性の分布とビジュアルの統一感を保ちながら、プログラムで生成した花の 10,000 点の NFT コレクションを作成しようとしています。

アプローチ：

1. トレイトの構成：希少度の重み付けを行い、レイヤー（背景、茎、花びら、中心）を定義します
2. ハッシュベースの生成：ハッシュ関数を使ってトレイトを決定論的に選択します
3. 色の調和：補色のアクセントカラーを使った HSL ベースのカラーパレットを実装します
4. 一括生成：メタデータとともに 10,000 枚の画像を生成してエクスポートします

主な機能：

• 希少度が異なる 5 種類の背景（コモンからレジェンダリーまで）
• 20 種類の花と、それぞれ 4 種類の色違い
• 美的な統一感を保ちながら、見た目が必ず異なること
• Opensea との互換性を確保するメタデータ JSON の生成

例 3：物理の教育用シミュレーション

シナリオ： 物理の教師が、高校の授業で粒子の衝突と運動量保存をインタラクティブに実演する必要があります。

アプローチ：

1. パーティクルシステム：位置、速度、質量を持つパーティクルを作成します
2. 衝突検出：弾性衝突の物理を実装します
3. コントロール：重力、弾性、パーティクル数を調整するスライダーを追加します
4. 可視化：速度ベクトルと運動量の合計をリアルタイムで表示します

教育向けの機能：

• 調整可能なパラメーター（重力係数、壁での反発）
• 詳細な分析に役立つ一時停止／ステップ実行コントロール
• 運動量の計算結果をリアルタイムで表示
• パーティクルの軌跡を示すトレイル効果

ベストプラクティス

優れたビジュアルデザイン

• 構図を計画する： 複雑な可視化をコーディングする前に、スケッチを描くかデザインツールを使います
• 色を慎重に使う： ランダムな色ではなく、意図したパレットを作成します
• デザイン原則を適用する： 黄金比、三分割法、ビジュアルヒエラルキー
• アクセシビリティを考慮する： 十分なコントラストを確保し、色覚多様性に配慮したパレットを検討します
• 複数の解像度でテストする： ファビコンからポスターサイズまで、ビジュアルが崩れないことを確認します

パフォーマンスの最適化

• 可能な場合は事前に計算する： 静的なジオメトリの生成を setup() に移します
• オブジェクトプールを使う： 毎フレーム新しいオブジェクトを作るのではなく、パーティクルオブジェクトを再利用します
• 配列操作を制限する： 配列の長さをキャッシュし、draw() ループ内で配列メソッドを使わないようにします
• pixelDensity を適切に使う： 対象ディスプレイに合わせて設定します（パフォーマンス重視なら 1、Retina なら 2）
• 定期的にプロファイルする： ブラウザーの開発者ツールを使ってボトルネックを特定します

アルゴリズムの選択

• 目標に合ったアルゴリズムを選ぶ：有機的な表現にはノイズ、フラクタルには再帰、動きの表現にはボイドを使用します
• シンプルに始める：まず基本的なバージョンを実装し、段階的に複雑さを加えます
• 数学を理解する：使用するアルゴリズムの基礎となる数学を理解します
• パラメーターを調整する：わずかなパラメーターの変更でも、結果が大きく変わることがあります
• 手法を組み合わせる：複雑なビジュアルを作るには、複数のアルゴリズムを重ねます（ノイズ＋フローフィールド＋パーティクル）

コードの整理

• 複雑なエンティティにはクラスを使う：整理しやすくするため、Particle、Agent、Vehicle の各クラスを使用します
• 設定を分離する：パラメーターを設定可能なオブジェクトにまとめます
• アルゴリズムをドキュメント化する：数学的な仕組みやロジックを説明するコメントを追加します
• ユーティリティ関数を作成する：共通の処理（色の生成、ランダムな範囲など）をモジュール化します
• 作業をバージョン管理する：制作過程を把握できるよう、各段階の成果を保存します

エクスポートと配布

• 再現性を保つ：決定論的なエクスポートには randomSeed() を使用します
• 出力先に合わせて最適化する：適切な解像度と形式でエクスポートします
• メタデータを含める：制作者のクレジットと生成パラメーターを追加します
• エクスポートの手順をテストする：エクスポートした画像が画面上の見た目と一致することを確認します
• ソースコードをバックアップする：今後の変更に備えて、編集可能なソースを保管します