algorithmic-art

アルゴリズム哲学とは、計算美学の潮流であり、コードを通じて表現されるものです。出力されるファイルは、.mdファイル（哲学）、.htmlファイル（インタラクティブビューア）、および.jsファイル（生成アルゴリズム）です。

このプロセスは2つのステップで行われます：

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

まず、次の課題に取り組みましょう：

アルゴリズム哲学の創作

まず、以下の方法を通じて解釈される「アルゴリズム哲学」（静止画像やテンプレートではない）を作成してください：

• 計算プロセス、創発的挙動、数学的美
• シードされたランダム性、ノイズ場、有機的システム
• 粒子、流れ、場、力
• パラメトリックな変動と制御されたカオス

本質的な理解

• 受け取るもの：ユーザーが与える、考慮すべき微妙な入力や指示。これらは基礎として用いるが、創造的な自由を制約してはならない。
• 何が生まれるか：アルゴリズム的哲学／ジェネラティブ・エステティックの潮流。
• その後の展開：その同じバージョンが、その哲学を受け取り、それをコードで表現する――その結果、90％がアルゴリズムによる生成、10％が必須パラメータで構成されるp5.jsスケッチが生み出される。

このアプローチについて考えてみてください：

• ジェネラティブ・アート運動のマニフェストを執筆する
• 次の段階では、それを具現化するアルゴリズムを記述します

その哲学では、以下の点を強調しなければなりません。「アルゴリズムによる表現」「創発的挙動」「計算的美しさ」「シードによる変異」

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

この運動に名前をつける（1～2語）：「有機的乱流」／「量子調和」／「創発的静寂」

その哲学を明確に表現する（4～6段落――簡潔かつ完全なもの）：

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

• 計算プロセスや数学的関係性？
• ノイズ関数やランダム性のパターンを通じて？
• 粒子の挙動や場のダイナミクスを通じて？
• 時間的変化とシステムの状態？
• パラメトリックな変動と創発的な複雑性？

重要な指針：

• 冗長性を避ける：アルゴリズムの各側面については一度だけ言及すること。ノイズ理論、粒子力学、あるいは数学的原理に関する概念については、新たな深みを加える場合を除き、繰り返しを避けること。
• 職人技を繰り返し強調すること：哲学的記述では、最終的なアルゴリズムが、開発に数え切れないほどの時間を費やし、細心の注意を払って洗練され、その分野の絶対的なトップクラスの人物によって生み出されたかのように見えるべきであることを、必ず何度も強調しなければならない。 この枠組みは不可欠です。「綿密に作り込まれたアルゴリズム」、「深い計算専門知識の結晶」、「入念な最適化」、「達人レベルの実装」といった表現を繰り返し用いてください。
• 創造的な余地を残す：アルゴリズムの方向性については具体的に示しつつも、次の「クロード」が極めて高いレベルの職人技をもって、独自の解釈に基づく実装の選択を行える余地を残すほど簡潔に記述すること。

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

哲学の例

「有機的な乱流」 哲学：自然法則によって制約されたカオス、無秩序から生まれる秩序。 アルゴリズムによる表現：多層的なパーリンノイズによって駆動される流場。ベクトル力に従う何千もの粒子、その軌跡が蓄積して有機的な密度マップを形成する。 複数のノイズオクターブが、乱流領域と穏やかな領域を生み出す。色は速度と密度から生まれる――速い粒子は明るく輝き、遅い粒子は影へと溶けていく。アルゴリズムは平衡状態に達するまで実行される。それは、計算美学の達人によって無数の反復を経てすべてのパラメータが精緻に調整された、綿密にチューニングされたバランスである。

「量子調和」 哲学：波のような干渉パターンを示す離散的な実体。 アルゴリズムによる表現：グリッド上に初期化された粒子。各粒子は位相値を持ち、正弦波を通じて変化する。粒子が接近すると、その位相が干渉する――建設的干渉は明るい節点を生み出し、破壊的干渉は空隙を生み出す。 単純な調和運動が、複雑で自発的に現れるマンダラを生み出す。これは、共鳴する美しさを生み出すためにあらゆる比率が慎重に選ばれた、入念な周波数調整の結果である。

「Recursive Whispers」 哲学：スケールを超えた自己相似性、有限の空間に広がる無限の深み。 アルゴリズム的表現：再帰的に細分化される分岐構造。各分岐はわずかにランダム化されているが、黄金比によって制約されている。 Lシステムや再帰的分割は、数学的でありながらも有機的な印象を与える樹木のような形態を生み出します。微妙なノイズの乱れが、完璧な対称性を崩します。線の太さは再帰レベルが上がるごとに細くなります。すべての分岐角度は、深い数学的探求の成果です。

「Field Dynamics」 哲学：物質への影響を通じて可視化された、目に見えない力。 アルゴリズム的表現：数学関数やノイズから構築されたベクトル場。粒子は縁で生まれ、力線に沿って流れ、平衡状態または境界に達すると消滅する。複数の場は、粒子を引き寄せたり、反発させたり、回転させたりする。可視化されるのはその軌跡のみ――目に見えない力の幽霊のような痕跡である。力の均衡によって綿密に振り付けられた、計算上の舞踏。

「確率的結晶化」 哲学：無秩序なプロセスが秩序ある構造へと結晶化する。 アルゴリズム的表現：ランダム化された円充填またはボロノイ分割。ランダムな点から始まり、緩和アルゴリズムを通じて進化させる。セルは平衡状態に達するまで互いに押し合いながら離れていく。 色はセルの大きさ、隣接セルの数、または中心からの距離に基づいて決定される。そこから現れる有機的なタイリングは、ランダムでありながらも必然的な印象を与える。どのシードからも独自の結晶的な美しさが生まれる――これこそが、マスターレベルのジェネレーティブアルゴリズムの証である。

これらは要約された例です。実際のアルゴリズムの哲学については、4～6段落程度の充実した説明が必要です。

基本原則

• アルゴリズム哲学：コードを通じて表現される計算機的な世界観の構築
• 「成果よりもプロセス」：美しさはアルゴリズムの実行から生まれることを常に強調する――実行のたびに唯一無二の結果が生まれる
• パラメトリックな表現：アイデアは、静的な構成ではなく、数学的な関係性、力、挙動を通じて伝達される
• 芸術的自由：次世代のクロードは、この哲学をアルゴリズム的に解釈する――創造的な実装の余地を与える
• 純粋なジェネレーティブ・アート：これは「生きているアルゴリズム」を作り出すことであり、ランダム性を伴う静的な画像ではない
• 熟練の職人技：最終的なアルゴリズムは、丹念に作り込まれ、数え切れないほどの反復を通じて洗練され、計算美学の分野で絶対的なトップに立つ人物による深い専門知識の結晶であると感じられるものでなければならないことを繰り返し強調する

アルゴリズム哲学は4～6段落の長さにすること。意図するビジョンを統合する、詩的な計算哲学で埋め尽くすこと。同じ点を繰り返さないこと。このアルゴリズム哲学を.mdファイルとして出力すること。

概念の種を導き出す

重要なステップ：アルゴリズムを実装する前に、元の依頼から微妙な概念的な糸口を見出してください。

本質的な原則： その概念とは、アルゴリズムそのものに埋め込まれた、微妙でニッチな参照であり、必ずしも文字通りの意味ではなく、常に洗練されたものである。 その主題に精通している人なら直感的にそれを感じ取れるはずだが、そうでない人にとっては、単に卓越した生成的な構成として体験されるに過ぎない。アルゴリズムの哲学が計算言語を提供し、導き出された概念が魂となる――パラメータや挙動、そして創発パターンに目に見えない形で織り込まれた、静かな概念的なDNAである。

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

P5.JS による実装

哲学と概念的枠組みが確立されたら、それをコードで表現してください。先に進む前に、一旦立ち止まって考えを整理してください。作成したアルゴリズム的哲学と、以下の指示のみを使用してください。

⚠️ ステップ0：まずテンプレートをよく読んでください ⚠️

重要：HTMLを記述する前に：

1. 「Read」ツールを使用してtemplates/viewer.htmlを確認してください
2. 正確な構造、スタイル、およびAnthropicのブランディングを熟読してください
3. そのファイルを単なる参考ではなく、文字通りの「出発点」として活用してください
4. 「FIXED」と指定されたセクションはすべて、表示されている通りに厳密に保持してください（ヘッダー、サイドバーの構造、Anthropicの配色・フォント、シード制御、アクションボタン）
5. ファイルのコメントでマークされている「可変」セクションのみを置き換えてください（アルゴリズム、パラメータ、パラメータ用のUIコントロール）

避けるべきこと：

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

以下のベストプラクティスに従ってください：

• ✅ テンプレートのHTML構造をそのままコピーする
• ✅ Anthropicのブランディングを維持する（Poppins/Loraフォント、明るい色、グラデーションの背景）
• ✅ サイドバーのレイアウトを維持する（Seed → Parameters → Colors? → Actions）
• ✅ 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値ではなく、熟考された配色
• 構図：ランダム性の中でも、視覚的な階層と流れを維持する
• パフォーマンス：スムーズな実行。アニメーションの場合はリアルタイム処理に最適化
• 再現性：同じシード値からは常に同一の出力が得られる

出力形式

出力：

1. アルゴリズム哲学- 生成美学を解説するマークダウンまたはテキスト
2. 単一のHTML作品-テンプレート/viewer.htmlに基づいて構築された、自己完結型のインタラクティブなジェネレーティブアート（STEP 0および次のセクションを参照）

このHTMLアーティファクトには、p5.js（CDN経由）、アルゴリズム、パラメータ制御、UIなど、すべてが含まれています。これらはすべて1つのファイルにまとめられており、claude.aiのアーティファクトや任意のブラウザですぐに動作します。一から作成するのではなく、テンプレートファイルから始めましょう。

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

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

ジェネレーティブアートを自由に探索できるようにするため、単一の独立したHTMLアーティファクトを作成してください。このアーティファクトは、claude.aiや任意のブラウザで、セットアップ不要ですぐに動作するようにしてください。すべての要素をインラインで埋め込んでください。

重要：固定要素と可変要素

「templates/viewer.html」ファイルが基盤となります。このファイルには、必要な構造とスタイルが正確に定義されています。

固定要素（常に表示されているとおりに正確に含めること）：

• レイアウト構造（ヘッダー、サイドバー、メインキャンバス領域）
• Anthropicのブランディング（UIの色、フォント、グラデーション）
• サイドバー内のシードセクション：
  • シードの表示
  • 前へ／次へボタン
  • 「ランダム」ボタン
  • シード入力欄へジャンプ＋「Go」ボタン
• サイドバーの「アクション」セクション：
  • 再生成ボタン
  • リセットボタン

変数（各作品ごとにカスタマイズ）：

• p5.jsのアルゴリズム全体（setup/draw/classes）
• パラメータオブジェクト（作品に必要なものを定義）
• サイドバーの「パラメータ」セクション：
  • パラメータコントロールの数
  • パラメータ名
  • スライダーの最小値・最大値・ステップ値
  • コントロールの種類（スライダー、入力フィールドなど）
• 「色」セクション（オプション）：
  • 一部のアートにはカラーピッカーが必要です
  • 一部のアートワークでは固定色が使用される場合があります
  • 一部のアートはモノクロである場合がある（色設定は不要）
  • アートワークの要件に基づいて決定してください

すべてのアートワークには、独自のパラメータとアルゴリズムが必要です！固定された部分は一貫したユーザー体験（UX）を提供し、それ以外のすべてが独自のビジョンを表現します。

必須機能

1. パラメータ制御

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

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

• 現在のシード番号の表示
• シードを順に切り替える「前へ」および「次へ」ボタン
• シードをランダムにする「ランダム」ボタン
• 特定のシード番号にジャンプするための入力フィールド
• 要求に応じて100種類のバリエーションを生成（シード1～100）

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

重要：これは単一のアートファクトです。外部ファイルやインポート（p5.jsのCDNを除く）は一切ありません。すべてインラインで記述されています。

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

サイドバーの構造：

1. シード（固定）- 常に以下の通り正確に記述してください：

• シードの表示
• 前へ／次へ／ランダム／ジャンプボタン

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

   パラメータ名
    <input type="range" id="param" min="..." max="..." step="..." value="..." this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
</code></pre>
<p>パラメータの数だけ、control-group divを追加してください。</p>
<p><strong>3. 色（オプション／可変）</strong> - アートに色の調整機能が必要な場合は含めてください：</p>
<ul>
<li>ユーザーが配色を制御できる場合は、カラーピッカーを追加してください</li>
<li>アートが固定色を使用する場合は、このセクションをスキップしてください</li>
<li>アートがモノクロの場合はスキップしてください</li>
</ul>
<p><strong>4. アクション（固定）</strong> - 常に表示されているとおりに正確に含めてください：</p>
<ul>
<li>再生成ボタン</li>
<li>リセットボタン</li>
<li>PNGダウンロードボタン</li>
</ul>
<p><strong>要件</strong>：</p>
<ul>
<li>シード制御（前/次/ランダム/ジャンプ/表示）が機能していること</li>
<li>すべてのパラメータにUIコントロールが設定されていること</li>
<li>「再生成」、「リセット」、「ダウンロード」ボタンが機能していること</li>
<li>Anthropicのブランディングを維持すること（UIのスタイル設定のみ。アートの色ではない）</li>
</ul>
<h3>アーティファクトの使用方法</h3>
<p>HTMLアーティファクトは即座に動作します：</p>
<ol>
<li><strong>claude.ai内</strong>：インタラクティブなアーティファクトとして表示され、即座に実行されます</li>
<li><strong>ファイルとして</strong>：保存して任意のブラウザで開く - サーバーは不要</li>
<li><strong>共有</strong>：HTMLファイルを送信 - 完全に独立したファイルです</li>
</ol>

<h2>バリエーションと探索</h2>
<p>アーティファクトにはデフォルトでシードナビゲーション（前/次/ランダムボタン）が含まれており、ユーザーは複数のファイルを作成することなくバリエーションを探索できます。ユーザーが特定のバリエーションを強調表示したい場合：</p>
<ul>
<li>シードのプリセットを含める（「バリエーション1：シード42」、「バリエーション2：シード127」などのボタン）</li>
<li>複数のシードのサムネイルを並べて表示する「ギャラリーモード」を追加する</li>
<li>これらすべてを単一のアートファクト内に収めます</li>
</ul>
<p>これは、同じ版から一連の版画を作成するようなものです。アルゴリズムは一貫していますが、シードごとにその可能性の異なる側面が明らかになります。インタラクティブな性質により、ユーザーはシード空間を探索することで自分のお気に入りを見つけ出すことができます。</p>

<h2>創造のプロセス</h2>
<p><strong>ユーザーのリクエスト</strong> → <strong>アルゴリズムの哲学</strong> → <strong>実装</strong></p>
<p>リクエストはそれぞれユニークです。そのプロセスは以下の通りです：</p>
<ol>
<li><strong>ユーザーの意図を解釈する</strong> - どのような美学が求められているか？</li>
<li><strong>計算論的アプローチを説明するアルゴリズムの哲学</strong>（4～6段落）を策定する</li>
<li><strong>コードとして実装する</strong> - この哲学を表現するアルゴリズムを構築する</li>
<li><strong>適切なパラメータを設計する</strong> - 何を調整可能にするべきか？</li>
<li><strong>対応するUIコントロールの構築</strong> - それらのパラメータ用のスライダー／入力フィールド</li>
</ol>
<p><strong>不変要素</strong>：</p>
<ul>
<li>人間中心のブランディング（色、フォント、レイアウト）</li>
<li>シードナビゲーション（常に表示）</li>
<li>自己完結型のHTMLアーティファクト</li>
</ul>
<p><strong>その他すべては変数</strong>：</p>
<ul>
<li>アルゴリズム自体</li>
<li>パラメータ</li>
<li>UIコントロール</li>
<li>視覚的な出力</li>
</ul>
<p>最良の結果を得るためには、創造性を信頼し、その哲学に基づいて実装を進めてください。</p>

<h2>リソース</h2>
<p>このスキルには、役立つテンプレートやドキュメントが含まれています：</p>
<ul>
<li><p><strong>templates/viewer.html</strong>: すべてのHTMLアーティファクトの必須の起点です。</p>
<ul>
<li>これが基盤となります。正確な構造とAnthropicのブランディングが含まれています</li>
<li><strong>変更しないでください</strong>：レイアウト構造、サイドバーの構成、Anthropicの配色・フォント、シード制御、アクションボタン</li>
<li><strong>置き換えてください</strong>：p5.jsのアルゴリズム、パラメータ定義、および「パラメータ」セクションのUIコントロール</li>
<li>ファイル内の詳細なコメントにより、保持すべき部分と置き換えるべき部分が明確に示されています</li>
</ul>
</li>
<li><p><strong>templates/generator_template.js</strong>: p5.jsのベストプラクティスおよびコード構造の原則に関する参考資料です。</p>
<ul>
<li>パラメータの整理方法、シード付き乱数の使用方法、クラスの構造化方法を示しています</li>
<li>これはパターンメニューではありません。独自のアルゴリズムを構築する際は、これらの原則を活用してください</li>
<li>アルゴリズムをHTMLアーティファクトにインラインで埋め込んでください（個別の.jsファイルを作成しないでください）</li>
</ul>
</li>
</ul>
<p><strong>重要な注意点</strong>:</p>
<ul>
<li>この<strong>テンプレートは「出発点」</strong>であり、単なるインスピレーションの源ではありません</li>
<li><strong>アルゴリズムこそが、</strong>独自の何か</li>を生み出す場です</li>
<li>フローフィールドの例をコピーしないでください。その哲学が求めるものを構築してください</li>
<li>ただし、テンプレートからUI構造とAnthropicのブランディングは正確に維持してください</li>
</ul>                                
                                

                                    
                                        GitHubで見る
                                        
                                    
                                    
---
name: algorithmic-art
description: Create algorithmic art by first writing a generative philosophy, then expressing it as p5.js sketches with seeded randomness and interactive parameter exploration.
license: Complete terms in LICENSE.txt
---

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

This happens in two steps:
1. Algorithmic Philosophy Creation (.md file)
2. Express by creating p5.js generative art (.html + .js files)

First, undertake this task:

## ALGORITHMIC PHILOSOPHY CREATION

To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
- Computational processes, emergent behavior, mathematical beauty
- Seeded randomness, noise fields, organic systems
- Particles, flows, fields, forces
- Parametric variation and controlled chaos

### THE CRITICAL UNDERSTANDING
- What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
- What is created: An algorithmic philosophy/generative aesthetic movement.
- What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.

Consider this approach:
- Write a manifesto for a generative art movement
- The next phase involves writing the algorithm that brings it to life

The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.

### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY

**Name the movement** (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

**Articulate the philosophy** (4-6 paragraphs - concise but complete):

To capture the ALGORITHMIC essence, express how this philosophy manifests through:
- Computational processes and mathematical relationships?
- Noise functions and randomness patterns?
- Particle behaviors and field dynamics?
- Temporal evolution and system states?
- Parametric variation and emergent complexity?

**CRITICAL GUIDELINES:**
- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
- **Leave creative space**: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.

The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.

### PHILOSOPHY EXAMPLES

**"Organic Turbulence"**
Philosophy: Chaos constrained by natural law, order emerging from disorder.
Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.

**"Quantum Harmonics"**
Philosophy: Discrete entities exhibiting wave-like interference patterns.
Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.

**"Recursive Whispers"**
Philosophy: Self-similarity across scales, infinite depth in finite space.
Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.

**"Field Dynamics"**
Philosophy: Invisible forces made visible through their effects on matter.
Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.

**"Stochastic Crystallization"**
Philosophy: Random processes crystallizing into ordered structures.
Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.

*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.*

### ESSENTIAL PRINCIPLES
- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code
- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room
- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness
- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics

**The algorithmic philosophy should be 4-6 paragraphs long.** Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.

---

## DEDUCING THE CONCEPTUAL SEED

**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request.

**THE ESSENTIAL PRINCIPLE**:
The concept is a **subtle, niche reference embedded within the algorithm itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.

This is **VERY IMPORTANT**: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.

---

## P5.JS IMPLEMENTATION

With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.

### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️

**CRITICAL: BEFORE writing any HTML:**

1. **Read** `templates/viewer.html` using the Read tool
2. **Study** the exact structure, styling, and Anthropic branding
3. **Use that file as the LITERAL STARTING POINT** - not just inspiration
4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
5. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters)

**Avoid:**
- ❌ Creating HTML from scratch
- ❌ Inventing custom styling or color schemes
- ❌ Using system fonts or dark themes
- ❌ Changing the sidebar structure

**Follow these practices:**
- ✅ Copy the template's exact HTML structure
- ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)
- ✅ Replace only the p5.js algorithm and parameter controls

The template is the foundation. Build on it, don't rebuild it.

---

To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.

### TECHNICAL REQUIREMENTS

**Seeded Randomness (Art Blocks Pattern)**:
```javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
```

**Parameter Structure - FOLLOW THE PHILOSOPHY**:

To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"

```javascript
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?)
};
```

**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".**

**Core Algorithm - EXPRESS THE PHILOSOPHY**:

**CRITICAL**: The algorithmic philosophy should dictate what to build.

To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"

If the philosophy is about **organic emergence**, consider using:
- Elements that accumulate or grow over time
- Random processes constrained by natural rules
- Feedback loops and interactions

If the philosophy is about **mathematical beauty**, consider using:
- Geometric relationships and ratios
- Trigonometric functions and harmonics
- Precise calculations creating unexpected patterns

If the philosophy is about **controlled chaos**, consider using:
- Random variation within strict boundaries
- Bifurcation and phase transitions
- Order emerging from disorder

**The algorithm flows from the philosophy, not from a menu of options.**

To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.

**Canvas Setup**: Standard p5.js structure:
```javascript
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

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

### CRAFTSMANSHIP REQUIREMENTS

**CRITICAL**: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.

- **Balance**: Complexity without visual noise, order without rigidity
- **Color Harmony**: Thoughtful palettes, not random RGB values
- **Composition**: Even in randomness, maintain visual hierarchy and flow
- **Performance**: Smooth execution, optimized for real-time if animated
- **Reproducibility**: Same seed ALWAYS produces identical output

### OUTPUT FORMAT

Output:
1. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic
2. **Single HTML Artifact** - Self-contained interactive generative art built from `templates/viewer.html` (see STEP 0 and next section)

The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.

---

## INTERACTIVE ARTIFACT CREATION

**REMINDER: `templates/viewer.html` should have already been read (see STEP 0). Use that file as the starting point.**

To allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.

### CRITICAL: WHAT'S FIXED VS VARIABLE

The `templates/viewer.html` file is the foundation. It contains the exact structure and styling needed.

**FIXED (always include exactly as shown):**
- Layout structure (header, sidebar, main canvas area)
- Anthropic branding (UI colors, fonts, gradients)
- Seed section in sidebar:
  - Seed display
  - Previous/Next buttons
  - Random button
  - Jump to seed input + Go button
- Actions section in sidebar:
  - Regenerate button
  - Reset button

**VARIABLE (customize for each artwork):**
- The entire p5.js algorithm (setup/draw/classes)
- The parameters object (define what the art needs)
- The Parameters section in sidebar:
  - Number of parameter controls
  - Parameter names
  - Min/max/step values for sliders
  - Control types (sliders, inputs, etc.)
- Colors section (optional):
  - Some art needs color pickers
  - Some art might use fixed colors
  - Some art might be monochrome (no color controls needed)
  - Decide based on the art's needs

**Every artwork should have unique parameters and algorithm!** The fixed parts provide consistent UX - everything else expresses the unique vision.

### REQUIRED FEATURES

**1. Parameter Controls**
- Sliders for numeric parameters (particle count, noise scale, speed, etc.)
- Color pickers for palette colors
- Real-time updates when parameters change
- Reset button to restore defaults

**2. Seed Navigation**
- Display current seed number
- "Previous" and "Next" buttons to cycle through seeds
- "Random" button for random seed
- Input field to jump to specific seed
- Generate 100 variations when requested (seeds 1-100)

**3. Single Artifact Structure**
```html
<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <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">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </script>
</body>
</html>
```

**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.

**4. Implementation Details - BUILD THE SIDEBAR**

The sidebar structure:

**1. Seed (FIXED)** - Always include exactly as shown:
- Seed display
- Prev/Next/Random/Jump buttons

**2. Parameters (VARIABLE)** - Create controls for the art:
```html
<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>
```
Add as many control-group divs as there are parameters.

**3. Colors (OPTIONAL/VARIABLE)** - Include if the art needs adjustable colors:
- Add color pickers if users should control palette
- Skip this section if the art uses fixed colors
- Skip if the art is monochrome

**4. Actions (FIXED)** - Always include exactly as shown:
- Regenerate button
- Reset button
- Download PNG button

**Requirements**:
- Seed controls must work (prev/next/random/jump/display)
- All parameters must have UI controls
- Regenerate, Reset, Download buttons must work
- Keep Anthropic branding (UI styling, not art colors)

### USING THE ARTIFACT

The HTML artifact works immediately:
1. **In claude.ai**: Displayed as an interactive artifact - runs instantly
2. **As a file**: Save and open in any browser - no server needed
3. **Sharing**: Send the HTML file - it's completely self-contained

---

## VARIATIONS & EXPLORATION

The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:

- Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
- Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
- All within the same single artifact

This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.

---

## THE CREATIVE PROCESS

**User request** → **Algorithmic philosophy** → **Implementation**

Each request is unique. The process involves:

1. **Interpret the user's intent** - What aesthetic is being sought?
2. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach
3. **Implement it in code** - Build the algorithm that expresses this philosophy
4. **Design appropriate parameters** - What should be tunable?
5. **Build matching UI controls** - Sliders/inputs for those parameters

**The constants**:
- Anthropic branding (colors, fonts, layout)
- Seed navigation (always present)
- Self-contained HTML artifact

**Everything else is variable**:
- The algorithm itself
- The parameters
- The UI controls
- The visual outcome

To achieve the best results, trust creativity and let the philosophy guide the implementation.

---

## RESOURCES

This skill includes helpful templates and documentation:

- **templates/viewer.html**: REQUIRED STARTING POINT for all HTML artifacts.
  - This is the foundation - contains the exact structure and Anthropic branding
  - **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
  - **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
  - The extensive comments in the file mark exactly what to keep vs replace

- **templates/generator_template.js**: Reference for p5.js best practices and code structure principles.
  - Shows how to organize parameters, use seeded randomness, structure classes
  - NOT a pattern menu - use these principles to build unique algorithms
  - Embed algorithms inline in the HTML artifact (don't create separate .js files)

**Critical reminder**:
- The **template is the STARTING POINT**, not inspiration
- The **algorithm is where to create** something unique
- Don't copy the flow field example - build what the philosophy demands
- But DO keep the exact UI structure and Anthropic branding from the template