アルゴリズム哲学は、コードを通じて表現される計算美学的な運動です。.mdファイル（哲学）、.htmlファイル（インタラクティブビューア）、.jsファイル（ジェネラティブアルゴリズム）を出力します。
このプロセスは2つのステップで行われます：
- アルゴリズム哲学の作成（
.mdファイル） - p5.jsによるジェネラティブアートの表現（
.html+.jsファイル）
まず、以下のタスクに取り組みます：
アルゴリズム哲学の作成
まず、以下の要素を通じて解釈されるアルゴリズム哲学（静的な画像やテンプレートではなく）を作成します：
- 計算プロセス、創発動作、数学的な美しさ
- シード付き乱数、ノイズフィールド、有機的システム
- 粒子、流れ、場、力
- パラメトリック変動と制御されたカオス
重要な理解
- 受け取るもの：考慮すべきユーザーからの微妙な入力や指示。ただし基礎として使い、創造的自由を制約してはならない。
- 作成するもの：アルゴリズム哲学／ジェネラティブ美学運動。
- 次に行うこと：同じバージョンがその哲学を受け取り、コードで表現する - 90%がアルゴリズム生成、10%が必須パラメータからなるp5.jsスケッチを作成する。
以下のアプローチを検討します：
- ジェネラティブアート運動のマニフェストを書く
- 次のフェーズでは、それを実現するアルゴリズムを書く
哲学は以下を強調しなければなりません：アルゴリズム表現。創発動作。計算美。シード付き変動。
アルゴリズム哲学の生成方法
運動に名前をつける（1〜2語）：「有機的乱流」/「量子ハーモニクス」/「創発的静寂」
哲学を明確にする（4〜6段落 - 簡潔かつ完全）：
アルゴリズムの本質を捉えるために、この哲学が以下のようにどのように現れるかを表現します：
- 計算プロセスと数学的関係？
- ノイズ関数とランダムネスのパターン？
- 粒子の挙動と場のダイナミクス？
- 時間的進化とシステム状態？
- パラメトリック変動と創発的複雑性？
重要なガイドライン：
- 冗長性を避ける：各アルゴリズム的側面は一度だけ言及する。ノイズ理論、粒子ダイナミクス、数学的原則について、新たな深みを加えない限り繰り返さない。
- 職人技を繰り返し強調する：哲学では、最終的なアルゴリズムが数え切れないほどの時間をかけて開発され、注意深く洗練され、その分野の絶対的なトップにいる人物によるものであるかのように見えなければならないことを何度も強調しなければなりません。この枠組みは不可欠です - 「緻密に作られたアルゴリズム」「深い計算専門知識の産物」「苦痛を伴う最適化」「マスターレベルの実装」といったフレーズを繰り返し使用します。
- 創造的スペースを残す：アルゴリズムの方向性については具体的に、しかし、次のClaudeが非常に高い職人技レベルで解釈的な実装選択を行う余地を残すほど簡潔に。
哲学は、次のバージョンがアイデアをアルゴリズム的に表現するよう導くものでなければならず、静的な画像ではない。美しさはプロセスにあり、最終フレームにあるのではない。
哲学の例
「有機的乱流」 哲学：自然法則によって制約されたカオス、無秩序から生まれる秩序。 アルゴリズム表現：層状のパーリンノイズによって駆動されるフローフィールド。ベクトル力に従う数千の粒子、それらの軌跡が有機的な密度マップへと蓄積される。複数のノイズオクターブが乱流領域と静かなゾーンを生み出す。色は速度と密度から生まれる - 速い粒子は明るく燃え、遅い粒子は影に消える。アルゴリズムは平衡に達するまで実行される - すべてのパラメータが計算美学のマスターによって無数の反復を通じて洗練された、緻密に調整されたバランス。
「量子ハーモニクス」 哲学：波動のような干渉パターンを示す離散的な実体。 アルゴリズム表現：グリッド上に初期化された粒子。それぞれがサイン波を通じて進化する位相値を持つ。粒子が近づくと、それらの位相が干渉する - 建設的干渉は明るいノードを生成し、破壊的干渉は空白を生成する。単純な調和運動が複雑な創発的な曼荼羅を生成する。すべての比率が共鳴する美しさを生み出すように注意深く選ばれた、苦痛を伴う周波数調整の結果。
「再帰的な囁き」 哲学：スケールを超えた自己相似性、有限空間における無限の深さ。 アルゴリズム表現：再帰的に細分化する分岐構造。各枝はわずかにランダム化されるが、黄金比によって制約される。L-systemまたは再帰的細分化が、数学的でありながら有機的に感じられる木のような形を生成する。微妙なノイズ摂動が完全な対称性を破る。線の太さは再帰レベルごとに減少する。すべての分岐角度は深い数学的探求の産物。
「場のダイナミクス」 哲学：物質への影響を通して可視化された見えない力。 アルゴリズム表現：数学関数またはノイズから構築されたベクトル場。端で生まれ、流線に沿って流れ、平衡または境界に達すると消える粒子。複数の場が粒子を引き付けたり、反発したり、回転させたりできる。可視化は痕跡のみを示す - 見えない力の幽霊のような証拠。力のバランスを通じて緻密に振り付けられた計算のダンス。
「確率的結晶化」 哲学：秩序だった構造に結晶化するランダムプロセス。 アルゴリズム表現：ランダム化されたサークルパッキングまたはボロノイテッセレーション。ランダムな点から始め、緩和アルゴリズムを通じて進化させる。セルは平衡に達するまで押し広げられる。セルサイズ、隣接数、または中心からの距離に基づく色分け。現れる有機的なタイリングは、ランダムでありながら不可避的に感じられる。すべてのシードがユニークな結晶美を生み出す - マスターレベルのジェネラティブアルゴリズムの証。
これらは凝縮された例です。実際のアルゴリズム哲学は4〜6の実質的な段落で構成されます。
必須の原則
- アルゴリズム哲学：コードを通じて表現される計算世界観の作成
- プロセスが製品に勝る：美しさはアルゴリズムの実行から生まれることを常に強調する - 各実行はユニークである
- パラメトリック表現：アイデアは数学的関係、力、振る舞いを通じて伝達される - 静的な構成ではない
- 芸術的自由：次のClaudeは哲学をアルゴリズム的に解釈する - 創造的な実装の余地を提供する
- 純粋なジェネラティブアート：これは生きたアルゴリズムを作ることについてであり、ランダム性を伴う静的な画像ではない
- 専門家の職人技：最終的なアルゴリズムが緻密に作られ、無数の反復を通じて洗練され、計算美学の分野で絶対的なトップにいる人物による深い専門知識の産物であるように感じられなければならないことを繰り返し強調する
アルゴリズム哲学は4〜6段落で構成します。 意図されたビジョンを結集する詩的な計算哲学で満たします。同じ点を繰り返さないようにします。このアルゴリズム哲学を.mdファイルとして出力します。
概念的シードの推論
重要なステップ：アルゴリズムを実装する前に、元のリクエストから微妙な概念的スレッドを特定します。
本質的な原則： コンセプトはアルゴリズム自体に埋め込まれた微妙でニッチな参照です - 常に文字通りではなく、常に洗練されています。その主題に精通している人はそれを直感的に感じるべきであり、他の人は単に熟練したジェネラティブ作品を体験します。アルゴリズム哲学は計算言語を提供します。推論されたコンセプトは魂を提供します - パラメータ、振る舞い、創発パターンに目に見えない形で織り込まれた静かな概念的DNA。
これは非常に重要です：参照は、作品の深みを高めながら、自らを主張しないほど洗練されていなければなりません。ジャズミュージシャンがアルゴリズム的なハーモニーを通じて別の曲を引用するように考えてください - 知っている人だけがそれに気づきますが、誰もが生成された美しさを評価します。
P5.JS実装
哲学と概念的枠組みの両方が確立されたら、コードで表現します。先に進む前に一旦立ち止まって考えをまとめます。作成されたアルゴリズム哲学と以下の指示のみを使用します。
⚠️ ステップ0：まずテンプレートを読む ⚠️
重要：HTMLを書く前に：
- Readツールを使用して
templates/viewer.htmlを読む - 正確な構造、スタイル、Anthropicブランディングを研究する
- そのファイルを文字通りの開始点として使用する - 単なるインスピレーションではない
- 示されているすべての固定セクションをそのまま維持する（ヘッダー、サイドバー構造、Anthropicの色/フォント、シードコントロール、アクションボタン）
- ファイルのコメントにマークされた可変セクションのみを置き換える（アルゴリズム、パラメータ、パラメータ用のUIコントロール）
避けること：
- ❌ HTMLをゼロから作成する
- ❌ カスタムスタイルや配色を考案する
- ❌ システムフォントやダークテーマを使用する
- ❌ サイドバー構造を変更する
以下のプラクティスに従うこと：
- ✅ テンプレートの正確なHTML構造をコピーする
- ✅ Anthropicブランディング（Poppins/Loraフォント、明るい色、グラデーションの背景）を維持する
- ✅ サイドバーレイアウト（シード → パラメータ → 色 → アクション）を維持する
- ✅ p5.jsアルゴリズムとパラメータコントロールのみを置き換える
テンプレートが基盤です。その上に構築し、再構築しないでください。
ギャラリー品質の、生きて呼吸する計算アートを作成するために、アルゴリズム哲学を基盤として使用します。
技術的要件
シード付き乱数（Art Blocksパターン）：
// 再現性のために常にシードを使用
let seed = 12345; // またはユーザー入力からのハッシュ
randomSeed(seed);
noiseSeed(seed);
パラメータ構造 - 哲学に従う：
アルゴリズム哲学から自然に生まれるパラメータを確立するために、「このシステムのどのような性質を調整できるか？」を検討します。
let params = {
seed: 12345, // 再現性のために常にシードを含める
// 色
// あなたのアルゴリズムを制御するパラメータを追加：
// - 数量（いくつ？）
// - スケール（どれだけ大きい？どれだけ速い？）
// - 確率（どのくらい起こりやすい？）
// - 比率（どんな割合？）
// - 角度（どの方向？）
// - しきい値（いつ振る舞いが変わる？）
};
効果的なパラメータを設計するために、「パターンの種類」ではなく、システムが調整可能であるために必要なプロパティに焦点を当てます。
コアアルゴリズム - 哲学を表現する：
重要：アルゴリズム哲学が何を構築するかを決定するべきです。
哲学をコードを通じて表現するために、「どのパターンを使うべきか？」ではなく、「この哲学をコードでどのように表現するか？」と考えます。
哲学が有機的な創発に関するものであれば、以下を検討します：
- 時間とともに蓄積または成長する要素
- 自然のルールによって制約されたランダムプロセス
- フィードバックループと相互作用
哲学が数学的な美しさに関するものであれば、以下を検討します：
- 幾何学的関係と比率
- 三角関数と高調波
- 予期しないパターンを生み出す正確な計算
哲学が制御されたカオスに関するものであれば、以下を検討します：
- 厳格な境界内でのランダム変動
- 分岐と相転移
- 無秩序から生まれる秩序
アルゴリズムは哲学から流れ出るものであり、オプションのメニューから選ぶものではありません。
実装を導くために、概念的本質が創造的かつ独創的な選択を知らせるようにします。この特定のリクエストに対するビジョンを表現するものを作成します。
キャンバス設定：標準的なp5.js構造：
function setup() {
createCanvas(1200, 1200);
// システムを初期化
}
function draw() {
// あなたのジェネラティブアルゴリズム
// 静的（noLoop）またはアニメーション化可能
}
職人技の要件
重要：習得を達成するために、マスターのジェネラティブアーティストによる無数の反復を通じて生まれたように感じられるアルゴリズムを作成します。すべてのパラメータを注意深く調整します。すべてのパターンが目的を持って現れることを保証します。これはランダムノイズではありません - これは深い専門知識によって洗練された制御されたカオスです。
- バランス：視覚的ノイズのない複雑さ、硬直性のない秩序
- 色の調和：思慮深いパレット、ランダムなRGB値ではない
- 構図：ランダム性の中でも、視覚的階層と流れを維持する
- パフォーマンス：スムーズな実行、アニメーションの場合はリアルタイムに最適化
- 再現性：同じシードは常に同一の出力を生成する
出力形式
出力：
- アルゴリズム哲学 - ジェネラティブ美学を説明するマークダウンまたはテキスト
- 単一のHTMLアーティファクト -
templates/viewer.html（ステップ0および次のセクションを参照）から構築された、自己完結型のインタラクティブジェネラティブアート
HTMLアーティファクトにはすべてが含まれています：p5.js（CDNから）、アルゴリズム、パラメータコントロール、UI - すべて1つのファイルで、claude.aiアーティファクトや任意のブラウザで即座に動作します。ゼロからではなく、テンプレートファイルから始めてください。
インタラクティブアーティファクトの作成
注意：templates/viewer.htmlはすでに読まれているはずです（ステップ0を参照）。そのファイルを開始点として使用してください。
ジェネラティブアートの探索を可能にするために、単一の自己完結型HTMLアーティファクトを作成します。このアーティファクトがclaude.aiまたは任意のブラウザで即座に動作することを確認します - セットアップ不要です。すべてをインラインで埋め込みます。
重要：固定部分と可変部分
templates/viewer.htmlファイルが基盤です。必要な正確な構造とスタイルが含まれています。
固定（常に示されているとおりに含める）：
- レイアウト構造（ヘッダー、サイドバー、メインキャンバスエリア）
- Anthropicブランディング（UI色、フォント、グラデーション）
- サイドバーのシードセクション：
- シード表示
- 前へ/次へボタン
- ランダムボタン
- シード入力＋Goボタンへのジャンプ
- サイドバーのアクションセクション：
- 再生成ボタン
- リセットボタン
可変（各アートワークに合わせてカスタマイズ）：
- p5.jsアルゴリズム全体（setup/draw/classes）
- パラメータオブジェクト（アートが必要とするものを定義）
- サイドバーのパラメータセクション：
- パラメータコントロールの数
- パラメータ名
- スライダーの最小値/最大値/ステップ値
- コントロールタイプ（スライダー、入力など）
- 色セクション（オプション）：
- 一部のアートはカラーピッカーを必要とする
- 一部のアートは固定色を使用するかもしれない
- 一部のアートはモノクロームかもしれない（色コントロール不要）
- アートのニーズに基づいて決定する
すべてのアートワークは独自のパラメータとアルゴリズムを持つべきです！ 固定部分はc…