アルゴリズム哲学とは、計算論的な美的運動であり、それをコードによって表現したものです。出力は.mdファイル（哲学）、.htmlファイル（インタラクティブビューア）、.jsファイル（生成アルゴリズム）です。
このプロセスは2つのステップで構成されます。
- アルゴリズム哲学の作成（.mdファイル）
- p5.jsによるジェネラティブアートの表現（.html + .jsファイル）
まず、以下のタスクに取り組みます。
アルゴリズム哲学の作成
開始するにあたり、以下の要素を通じて解釈されるアルゴリズム哲学（静的な画像やテンプレートではありません）を作成します。
- 計算プロセス、創発的挙動、数学的美しさ
- シード付き乱数、ノイズフィールド、有機的システム
- パーティクル、フロー、フィールド、フォース
- パラメトリックなバリエーションと制御されたカオス
重要な理解事項
- 受け取るもの: ユーザーからの何らかの微妙な入力または指示。これを基礎として考慮しますが、創造的自由を制限するものではありません。
- 作成するもの: アルゴリズム哲学 / ジェネラティブな美的運動。
- 次に行うこと: 同一のバージョンがその哲学を受け取り、それをコードで表現します。90%がアルゴリズム生成、10%が必須パラメータからなるp5.jsスケッチを作成します。
以下のアプローチを検討してください。
- ジェネラティブアート運動のためのマニフェストを書く
- 次のフェーズでは、それを実現するアルゴリズムを書く
哲学は以下を強調しなければなりません。アルゴリズム表現。創発的挙動。計算美。シード付きバリエーション。
アルゴリズム哲学を生成する方法
運動に名前を付ける（1〜2語）: 「有機的乱流」/「量子調和」/「創発的静寂」
哲学を明確に述べる（4〜6段落 - 簡潔かつ完全）:
アルゴリズムの本質を捉えるために、この哲学が以下の要素を通じてどのように現れるかを表現します。
- 計算プロセスと数学的関係？
- ノイズ関数と乱数パターン？
- パーティクルの挙動とフィールドのダイナミクス？
- 時間的進化とシステム状態？
- パラメトリックなバリエーションと創発的複雑性？
重要なガイドライン:
- 冗長性を避ける: 各アルゴリズム的側面は一度だけ言及すること。新しい深みを加えない限り、ノイズ理論、パーティクルダイナミクス、数学的原則についての概念を繰り返さない。
- クラフトマンシップを繰り返し強調する: 哲学は、最終的なアルゴリズムが、計り知れない時間をかけて開発され、細心の注意を払って洗練され、その分野の絶対的なトップにいる人物によるものであるかのように見えなければならない、という点を複数回強調しなければなりません。この枠組みは不可欠です。「綿密に練り上げられたアルゴリズム」、「深い計算専門知識の産物」、「入念な最適化」、「マスターレベルの実装」などのフレーズを繰り返し使用してください。
- 創造的余地を残す: アルゴリズムの方向性については具体的に述べるが、次のClaudeが極めて高度なクラフトマンシップで解釈的な実装の選択を行える余地を残すために、簡潔にすること。
哲学は、次のバージョンがアイデアをアルゴリズム的に表現するよう導かなければなりません。静的な画像ではありません。美しさはプロセスに宿り、最終フレームにあるのではありません。
哲学の例
「有機的乱流」 哲学: 自然法則によって制約されたカオス、無秩序から生まれる秩序。 アルゴリズム表現: 層状のPerlinノイズによって駆動されるフローフィールド。ベクトル力に従う何千ものパーティクル。それらの軌跡が蓄積して有機的な密度マップを形成。複数のノイズオクターブが乱流領域と静穏域を生成。色は速度と密度から出現する。速いパーティクルは明るく燃え、遅いものは影に消える。アルゴリズムは平衡に達するまで実行される。すべてのパラメータが計算美学の達人による無数の反復を通じて精巧に調整された、綿密に調整されたバランス。
「量子調和」 哲学: 波動のような干渉パターンを示す離散的な実体。 アルゴリズム表現: グリッド上に初期化されたパーティクル。それぞれが正弦波を通じて進化する位相値を持つ。パーティクルが近接すると、その位相が干渉する。建設的干渉は明るい節を生成し、破壊的干渉は空白を生成する。単純な調和運動が複雑な創発的曼荼羅を生成。すべての比率が共鳴する美しさを生み出すように注意深く選ばれた、入念な周波数較正の結果。
「再帰的な囁き」 哲学: スケールを超えた自己相似性、有限空間における無限の深さ。 アルゴリズム表現: 再帰的に細分化される分岐構造。各分岐はわずかにランダム化されるが、黄金比によって制約される。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/クラス）
- パラメータオブジェクト（アートに必要なものを定義）
- サイドバーのパラメータセクション:
- パラメータコントロールの数
- パラメータ名
- スライダーの最小/最大/ステップ値
- コントロールタイプ（スライダー、入力など）
- 色セクション（オプション）:
- 一部のアートはカラーピッカーが必要
- 一部のアートは固定色を使用する場合がある
- 一部のアートはモノクロの場合がある（色コントロールは不要）
- アートのニーズに基づいて決定
すべてのアートワークはユニークなパラメータとアルゴリズムを持つべきです！ 固定部分は一貫性のあるフレームワークを提供します。