creating-algorithmic-art

---

アルゴリズム哲学とは、計算における美的運動であり、コードによって表現されます。出力するのは、.md ファイル（哲学）、.html ファイル（インタラクティブビューア）、.js ファイル（生成アルゴリズム）です。

これは次の2つのステップで行います。

1. アルゴリズム哲学の創作（.md ファイル）
2. p5.js のジェネレーティブアートによる表現（.html + .js ファイル）

まず、次のタスクに取り組んでください。

アルゴリズム哲学の創作

まず、次を通じて解釈されるアルゴリズム哲学（静止画像やテンプレートではありません）を創作してください。

• 計算プロセス、創発的な振る舞い、数学的な美しさ
• シード付き乱数、ノイズフィールド、有機的なシステム
• 粒子、流れ、フィールド、力
• パラメトリックな変化と制御されたカオス

重要な理解

• 受け取るもの：ユーザーが考慮するよう伝えるささやかな入力や指示です。土台として活用しますが、創造の自由を制限してはいけません。
• 創作するもの：アルゴリズム哲学、すなわちジェネレーティブな美的運動です。
• その後に起こること：次のエージェントが哲学を受け取り、コードで表現します。つまり、アルゴリズムによる生成が90％、本質的なパラメーターが10％を占める p5.js スケッチを作成します。

次のように進めてください。

• ジェネレーティブアート運動のマニフェストを書く
• 次の段階で、それを具現化するアルゴリズムを書く

哲学では、次の点を重視してください。アルゴリズムによる表現。創発的な振る舞い。計算上の美しさ。シードによる変化。

アルゴリズム哲学の生成方法

運動に名前を付ける（1～2語）：「有機的な乱流」／「量子高調波」／「創発する静寂」

哲学を表現する（4～6段落。簡潔でありながら、必要な内容を網羅してください）。

アルゴリズムの本質を捉えるため、次の要素を通じてこの哲学がどのように具現化されるかを表現してください。

• 計算プロセスや数学的関係を通じて、どのように具現化されるか
• ノイズ関数や乱数パターンを通じて、どのように具現化されるか
• 粒子の振る舞いやフィールドのダイナミクスを通じて、どのように具現化されるか
• 時間的な変化やシステムの状態を通じて、どのように具現化されるか
• パラメトリックな変化や創発的な複雑さを通じて、どのように具現化されるか

重要なガイドライン：

• 重複を避ける：アルゴリズムの各要素には、それぞれ一度だけ触れてください。新たな深みを加えない限り、ノイズ理論、粒子のダイナミクス、数学的原理について繰り返し説明しないでください。
• 職人技を繰り返し強調する：最終的なアルゴリズムは、数え切れないほどの時間をかけて開発され、細心の注意を払って磨き上げられ、その分野の頂点に立つ人物によって生み出されたかのように見えるべきだと、哲学の中で必ず何度も強調してください。「緻密に作り込まれたアルゴリズム」「深い計算の専門知識の結晶」「労を惜しまない最適化」「達人レベルの実装」といった表現を繰り返してください。この枠付けは不可欠です。
• 創造の余地を残す：アルゴリズムの方向性は具体的に示しつつ、次のエージェントが非常に高い職人技をもって独自の解釈で実装できる余地を残せるだけ、簡潔にまとめてください。

哲学は、次のバージョンがアイデアを静止画像ではなく、アルゴリズムによって表現するよう導くものでなければなりません。美しさは最終フレームではなく、プロセスに宿ります。

哲学の例

「有機的な乱流」 哲学：自然法則に制約された混沌。無秩序から秩序が生まれます。 アルゴリズムによる表現：複数のレイヤーに重ねたパーリンノイズが駆動するフローフィールド。何千ものパーティクルがベクトルの力に従い、その軌跡が積み重なって有機的な密度マップを形成します。複数のノイズオクターブが、乱流の領域と穏やかな領域を作り出します。色は速度と密度から生まれます。高速のパーティクルは明るく燃え上がり、低速のパーティクルは影へと薄れていきます。このアルゴリズムは平衡状態に達するまで実行されます。それは、計算美学の達人が数え切れないほどの反復を重ね、すべてのパラメーターを緻密に調整してたどり着く、精妙なバランスです。

「量子の調和」 哲学：波のような干渉パターンを示す、離散的な存在。 アルゴリズムによる表現：グリッド上に初期化されたパーティクルは、それぞれ正弦波を通じて変化する位相値を持ちます。パーティクル同士が近づくと位相が干渉し、強め合う干渉は明るい節を、弱め合う干渉は空白を生み出します。単純な調和運動から、複雑な創発的マンダラが生まれます。その結果は、共鳴する美しさを生み出すために比率の一つひとつを慎重に選び、周波数を丹念に調整した成果です。

「再帰のささやき」 哲学：スケールを超えた自己相似性。有限の空間に宿る無限の深さ。 アルゴリズムによる表現：再帰的に細分化される分岐構造。それぞれの枝にはわずかなランダム性が加わりながらも、黄金比によって制約されます。L システムや再帰的な細分化によって、数学的でありながら有機的にも感じられる樹木のような形が生まれます。微細なノイズのゆらぎが完全な対称性を崩します。再帰の段階が深まるごとに、線の太さは細くなります。分岐角度の一つひとつが、深い数学的探究の成果です。

「場のダイナミクス」 哲学：目に見えない力が物質に及ぼす作用を通して、その姿を可視化します。 アルゴリズムによる表現：数式やノイズから構築されるベクトル場。パーティクルは端から生まれ、場の線に沿って流れ、平衡状態や境界に達すると消えていきます。複数の場がパーティクルを引き寄せたり、反発させたり、回転させたりします。可視化されるのは軌跡だけです。目に見えない力の存在を示す、幽霊のような証拠です。力の均衡を通じて緻密に振り付けられた、計算によるダンスです。

「確率的な結晶化」 哲学：ランダムなプロセスが結晶化し、秩序ある構造を生み出します。 アルゴリズムによる表現：ランダム化された円充填やボロノイ分割。ランダムな点から始め、緩和アルゴリズムを通じて変化させます。平衡状態に達するまで、セル同士が互いに押し離されます。セルの大きさ、隣接セルの数、中心からの距離に基づいて色を決めます。そこから生まれる有機的なタイル模様は、ランダムでありながら必然的にも感じられます。シードの一つひとつから、唯一無二の結晶の美しさが生まれます。それは、卓越した生成アルゴリズムの証です。

これらは簡潔な例です。実際のアルゴリズム哲学は、内容の充実した4〜6段落にしてください。

基本原則

• アルゴリズム哲学：コードを通じて表現する、計算的な世界観を創り出します。
• 成果物よりプロセス：美しさはアルゴリズムの実行から生まれることを常に強調します。実行のたびに結果は異なります。
• パラメトリックな表現：アイデアは、静的な構図ではなく、数学的な関係、力、振る舞いを通じて伝えます。
• 芸術的自由：次にエージェントが哲学をアルゴリズムとして解釈するため、創造的に実装できる余地を与えます。
• 純粋なジェネラティブアート：これはランダム性を加えた静止画像ではなく、生きたアルゴリズムを作ることです。
• 卓越した技巧：最終的なアルゴリズムは、緻密に作り込まれ、数え切れないほどの反復を経て洗練されたもの、計算美学の分野で最高峰に立つ人物の深い専門知識の結晶であると、繰り返し強調します。

**アルゴリズム哲学は4〜6段落にしてください。**意図するビジョンを結び合わせる、詩的な計算哲学で満たしてください。同じ点を繰り返すのは避けてください。このアルゴリズム哲学を.mdファイルとして出力してください。

---

概念の核を導き出す

重要なステップ：アルゴリズムを実装する前に、元のリクエストに含まれる繊細な概念の糸を特定してください。

本質的な原則： その概念とは、アルゴリズムそのものに埋め込まれた、さりげなくニッチな参照です。必ずしも文字どおりとは限らず、常に洗練されています。その主題に詳しい人は直感的に感じ取り、それ以外の人は見事な生成的構成として楽しめます。アルゴリズムの哲学が計算の言語を与え、導き出された概念が魂を与えます。それは、パラメーターや振る舞い、創発のパターンにひそかに織り込まれた、静かな概念上のDNAです。

これは非常に重要です：その参照は、作品の奥行きを深めながらも、それ自体を主張しないほど洗練されていなければなりません。ジャズミュージシャンが、アルゴリズム的なハーモニーを通して別の曲を引用するように考えてください。知っている人だけが気づきますが、誰もが生成的な美しさを楽しめます。

---

P5.JS の実装

哲学と概念的な枠組みを確立したら、コードで表現します。先に進む前に、考えをまとめてください。ここで作成したアルゴリズムの哲学と、以下の指示だけを使ってください。

⚠️ ステップ 0：まずテンプレートを読む ⚠️

重要：HTMLを書く前に、必ず以下を行ってください。

1. Read ツールを使って templates/viewer.html を読む
2. 正確な構造、スタイル、一貫したブランド表現を確認する
3. そのファイルを文字どおりの出発点として使う。参考にするだけではありません
4. 固定セクションはすべて、表示どおりにそのまま維持する（ヘッダー、サイドバーの構造、テンプレートの色とフォント、シードのコントロール、アクションボタン）
5. ファイルのコメントでマークされた可変セクションのみを置き換える（アルゴリズム、パラメーター、パラメーター用のUIコントロール）

避けること：

• ❌ HTMLを一から作成する
• ❌ 独自のスタイルや配色を考案する
• ❌ システムフォントやダークテーマを使う
• ❌ サイドバーの構造を変更する

次の実践事項に従ってください：

• ✅ テンプレートのHTML構造をそのままコピーする
• ✅ 一貫したブランド表現を維持する（Poppins／Loraフォント、明るい色、グラデーションの背景）
• ✅ サイドバーのレイアウトを維持する（シード → パラメーター → 色？ → アクション）
• ✅ p5.js のアルゴリズムとパラメーター用コントロールのみを置き換える

テンプレートが土台です。土台の上に構築し、一から作り直さないでください。

---

生き生きと息づく、ギャラリー品質の計算芸術を制作するには、アルゴリズムの哲学を基盤にしてください。

技術要件

シード付き乱数（Art Blocks パターン）：

// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

パラメーターの構成 — 哲学に従うこと：

アルゴリズムの哲学から自然に生まれるパラメーターを設定するには、「このシステムのどの特性を調整できるか？」と考えてみてください。

let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};

効果的なパラメーターを設計するには、「パターンの種類」ではなく、システムで調整可能にする必要がある特性に注目してください。

中核となるアルゴリズム — 哲学を表現すること：

重要：何を構築するかは、アルゴリズムの哲学によって決まります。

哲学をコードで表現する際は、「どのパターンを使うか」ではなく、「この哲学をコードでどう表現するか」を考えてください。

哲学が有機的な創発についてなら、以下を検討してください。

• 時間とともに蓄積または成長する要素
• 自然な規則によって制約されたランダムなプロセス
• フィードバックループと相互作用

哲学が数学的な美しさについてなら、以下を検討してください。

• 幾何学的な関係と比率
• 三角関数と倍音
• 意外なパターンを生み出す精密な計算

哲学が制御されたカオスについてなら、以下を検討してください。

• 厳密な範囲内でのランダムな変化
• 分岐と相転移
• 無秩序から生まれる秩序

アルゴリズムは哲学から導かれるものであり、選択肢の一覧から選ぶものではありません。

実装を導くために、概念の本質を創造的で独創的な選択に反映してください。このリクエスト固有のビジョンを表現するものを構築してください。

キャンバスの設定：標準的な p5.js の構造：

function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}

クラフトマンシップの要件

重要：熟達した表現を実現するには、熟練した生成アーティストが何度も試行を重ねて生み出したかのように感じられるアルゴリズムを作成してください。すべてのパラメーターを丁寧に調整し、あらゆるパターンが意図をもって現れるようにしてください。これはランダムなノイズではありません。深い専門知識によって磨き上げられた、制御されたカオスです。

• バランス：視覚的なノイズを生まずに複雑さを持たせ、硬直させずに秩序を保つ
• 色彩の調和：ランダムな RGB 値ではなく、よく考えられたパレットを使う
• 構図：ランダムさの中にも、視覚的な階層と流れを保つ
• パフォーマンス：スムーズに実行し、アニメーションの場合はリアルタイム向けに最適化する
• 再現性：同じシードからは必ず同一の出力を生成する

出力形式

以下を出力してください。

1. アルゴリズムの思想 - 生成的な美学を説明する Markdown またはテキスト
2. 単一の HTML アーティファクト - templates/viewer.html を基にした、自己完結型のインタラクティブな生成アート（STEP 0 と次のセクションを参照）

HTML アーティファクトには、すべてが含まれます。p5.js（CDN 経由）、アルゴリズム、パラメーターコントロール、UI をすべて 1 つのファイルにまとめているため、opencode アーティファクトまたは任意のブラウザーですぐに動作します。ゼロからではなく、テンプレートファイルを基に作成してください。

---

インタラクティブなアーティファクトの作成

注意：templates/viewer.html はすでに読み込まれているはずです（STEP 0 を参照）。このファイルを出発点として使用してください。

生成アートを探索できるよう、自己完結型の HTML アーティファクトを 1 つ作成してください。このアーティファクトは、セットアップ不要で opencode または任意のブラウザーですぐに動作する必要があります。すべてをインラインに埋め込んでください。

重要：固定部分と可変部分

templates/viewer.html ファイルが基盤となります。必要な構造とスタイルが正確に含まれています。

固定部分（常に以下のとおり正確に含めてください）：

• レイアウト構造（ヘッダー、サイドバー、メインのキャンバス領域）
• 統一されたブランド表現（UI の色、フォント、グラデーション）
• サイドバーのシードセクション：
  • シード表示
  • 前へ／次へボタン
  • ランダムボタン
  • シード移動用の入力欄＋実行ボタン
• サイドバーのアクションセクション：
  • 再生成ボタン
  • リセットボタン

可変部分（作品ごとにカスタマイズしてください）：

• p5.js のアルゴリズム全体（setup／draw／クラス）
• パラメーターオブジェクト（アートに必要な項目を定義）
• サイドバーのパラメーターセクション：
  • パラメーターコントロールの数
  • パラメーター名
  • スライダーの最小値／最大値／刻み幅
  • コントロールの種類（スライダー、入力欄など）
• 色のセクション（任意）：
  • カラーピッカーが必要な作品もあります
  • 固定色を使用する作品もあります
  • モノクロ作品の場合、色のコントロールは不要なことがあります
  • アートのニーズに応じて判断してください

すべての作品で、固有のパラメーターとアルゴリズムを使用してください！ 固定部分によって一貫した UX を実現し、それ以外の部分で作品ならではのビジョンを表現します。

必須機能

1. パラメーターコントロール

• 数値パラメーター用のスライダー（パーティクル数、ノイズスケール、速度など）
• パレットカラー用のカラーピッカー
• パラメーターの変更時にリアルタイムで更新
• デフォルト設定に戻すリセットボタン

2. シードのナビゲーション

• 現在のシード番号を表示
• シードを切り替える「Previous」ボタンと「Next」ボタン
• ランダムなシードを選ぶ「Random」ボタン
• 特定のシードに移動する入力フィールド
• 要求に応じて100種類のバリエーションを生成（シード1～100）

3. 単一のアーティファクト構造

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline - clean, minimal */
    /* Canvas on top, controls below */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </script>
</body>
</html>

重要：これは単一のアーティファクトです。外部ファイルやインポートは使用せず（p5.js CDN を除く）、すべてをインラインに記述します。

4. 実装の詳細 - サイドバーの構築

サイドバーの構造：

1. シード（固定） - 常に以下のとおりに含めます：

• シード表示
• Prev／Next／Random／Jump ボタン

2. パラメーター（可変） - アート用のコントロールを作成します：

<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>

パラメーターの数に応じて、control-group の div を追加します。

3. 色（任意／可変） - アートで調整可能な色が必要な場合に含めます：

• ユーザーがパレットを操作できるようにする場合は、カラーピッカーを追加します
• アートで固定色を使用する場合は、このセクションを省略します
• モノクロの場合も、このセクションを省略します

4. アクション（固定） - 常に以下のとおりに含めます：

• 再生成ボタン
• リセットボタン
• PNG のダウンロードボタン

要件：

• シードコントロールが機能すること（前へ／次へ／ランダム／移動／表示）
• すべてのパラメーターに UI コントロールがあること
• 再生成、リセット、ダウンロードの各ボタンが機能すること
• 一貫したブランドスタイルを保つこと（アートの色ではなく、UI のスタイル）

アーティファクトの使用

HTML アーティファクトはすぐに動作します：

1. opencode で：インタラクティブなアーティファクトとして表示され、即座に実行されます
2. ファイルとして：保存して任意のブラウザーで開けます。サーバーは不要です
3. 共有：HTML ファイルを送信すれば、完全に自己完結した状態で共有できます

---

バリエーションと探索

アーティファクトにはデフォルトでシードのナビゲーション（前へ／次へ／ランダムボタン）が含まれるため、複数のファイルを作成しなくてもバリエーションを探索できます。ユーザーが特定のバリエーションを目立たせたい場合：

• シードのプリセットを含めます（「バリエーション1：シード42」、「バリエーション2：シード127」などのボタン）
• 複数のシードのサムネイルを並べて表示する「ギャラリーモード」を追加します
• すべてを同じ単一のアーティファクト内に収めます

これは、同じ版から一連の版画を制作するようなものです。アルゴリズムは一貫していますが、シードごとに異なる可能性が現れます。インタラクティブな仕組みによって、ユーザーはシードの空間を探索し、自分のお気に入りを見つけられます。

---

クリエイティブプロセス

ユーザーのリクエスト → アルゴリズムの理念 → 実装

リクエストはそれぞれ異なります。プロセスは以下のとおりです：

1. ユーザーの意図を解釈する - どのような美的表現が求められているか？
2. アルゴリズムの理念を作成する（計算によるアプローチを説明する4～6段落）
3. コードで実装する - 理念を表現するアルゴリズムを構築する
4. 適切なパラメーターを設計する - 何を調整できるようにするか？
5. 対応する UI コントロールを構築する - パラメーター用のスライダーや入力欄

固定要素：

• 一貫したブランドスタイル（色、フォント、レイアウト）
• シードのナビゲーション（常に表示）
• 自己完結型の HTML アーティファクト

それ以外はすべて可変です：

• アルゴリズムそのもの
• パラメーター
• UI コントロール
• 視覚的な出力

最良の結果を得るには、創造性を信頼し、理念に沿って実装を進めてください。

---

リソース

このスキルには、役立つテンプレートとドキュメントが含まれています。

• templates/viewer.html：すべての HTML 成果物の必須の出発点です。

  • 基盤となるファイルで、正確な構造と一貫したブランディングが含まれています
  • 変更しないこと：レイアウト構造、サイドバーの構成、テンプレートの色とフォント、シードのコントロール、アクションボタン
  • 置き換えること：p5.js のアルゴリズム、パラメーター定義、Parameters セクションの UI コントロール
  • ファイル内の詳細なコメントで、保持する箇所と置き換える箇所が明示されています

• templates/generator_template.js：p5.js のベストプラクティスとコード構成の原則を示すリファレンスです。

  • パラメーターの整理、シード付き乱数の使用、クラスの構成方法を示しています
  • パターン集ではありません。これらの原則を使って独自のアルゴリズムを構築してください
  • アルゴリズムは HTML 成果物に直接埋め込んでください（別の .js ファイルは作成しないでください）

重要な注意事項：

• テンプレートは出発点であり、着想の元ではありません
• 独自性を生み出すのはアルゴリズムです
• フローフィールドの例をコピーせず、理念に沿ったものを構築してください
• ただし、テンプレートの正確な UI 構造と一貫したブランディングは必ず維持してください

---

検証 — 提示前に必ず実施

スケッチが実行できることと、正しく動作することは別です。ジェネレーティブコードの不具合は、ソース上では見えず、レンダリング結果で明らかになることがあります。たとえば、パーティクルがキャンバスから飛び出す、フィールドが単一のアトラクターに収束する、密度が飽和して真っ黒になる、どのシードでもほぼ同じ結果になる、といった問題です。

レンダリングして確認してください。少なくとも4つのシードで確認します。

source ~/.local/opencode-venv/bin/activate
python3 - <<'PY'
from playwright.sync_api import sync_playwright
import pathlib
url = "file://" + str(pathlib.Path("artifact.html").resolve())
with sync_playwright() as p:
    b = p.chromium.launch(); pg = b.new_page(viewport={"width": 1400, "height": 900})
    errs = []
    pg.on("console", lambda m: m.type == "error" and errs.append(m.text))
    pg.on("pageerror", lambda e: errs.append(str(e)))
    for seed in (1, 7, 42, 1337):
        pg.goto(url); pg.wait_for_timeout(400)
        pg.evaluate(f"() => {{ if (window.setSeed) setSeed({seed}); }}")
        pg.wait_for_timeout(3500)                    # let the system reach equilibrium
        pg.locator("canvas").screenshot(path=f"/tmp/seed-{seed}.png")
    print("CONSOLE ERRORS:", errs); b.close()
PY

4つすべての PNG を読み込み、次の点を確認してください。

• シードごとに意味のある違いがある。 ほぼ同一の画像が4枚できる場合、乱数が重要なパラメーターに反映されていません。シードを使ったジェネレーティブ制作の前提が崩れています。
• 各シードに共通する作風がある。 互いに無関係な画像が4枚できる場合、システムではなく、ただのノイズです。
• キャンバスの外には何も出ていない。 パーティクルがフレームの外へ出たり、隅に集まったりする場合は、力が制御されていません。
• インクの占有率が8～40％の範囲に収まっている。 これを下回ると何もないように見え、上回ると構造のないベタ塗りのフィールドになります。
• サムネイルでも構図が成り立つ。 200px に縮小してください。一様なグレーの塗りつぶしになる場合は、明度構造に階層がありません。
• アニメーション中も含め、コンソールエラーがゼロである。 読み込み時だけでなく、アニメーション中も確認してください。
• 静止状態に到達する。 いつまでも収束しないアルゴリズムでは、スクリーンショットを撮るたびに画像が変わります。それでは再現可能なアートとは言えません。

いずれかの項目を満たさない場合は、スクリーンショットのタイミングを調整して問題を隠すのではなく、アルゴリズムを修正してください。

関連スキル

• designing-canvas-art — 静的な PDF／PNG アート向けです。designing-canvas-art/references/rendering.md では、p5 の出力にも直接応用できるグレイン、ハーフトーン、余白のルール、描画システムについて解説しています
• designing-frontend-interfaces — キャンバスを囲むビューアーの UI 向けです。designing-frontend-interfaces/references/color-and-theme.md では OKLCH の色調ランプを解説しており、生成アートのパレットには、生の HSL よりはるかに適しています
• testing-webapps — 成果物の操作やキャプチャに使う Playwright のパターンを紹介します
• building-web-artifacts — スケッチが複数のコンポーネントから成るアプリケーションへ発展した場合に使用します