algorithmic-art

アルゴリズム的な哲学は、コードを通じて表現される計算美学的ムーブメントです。.md ファイル（哲学）、.html ファイル（インタラクティブビューア）、.js ファイル（生成アルゴリズム）を出力します。

これは 2 つのステップで実行されます：

1. アルゴリズム的哲学の作成（.md ファイル）
2. p5.js 生成アートで表現（.html + .js ファイル）

まず、このタスクを実行してください：

アルゴリズム的哲学の作成

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

• 計算プロセス、創発的動作、数学的美しさ
• シード付きランダム性、ノイズフィールド、有機的システム
• パーティクル、流れ、フィールド、力
• パラメトリック変動と制御されたカオス

重要な理解

• 受け取るもの：ユーザーからの微妙な入力や指示を考慮に入れる基盤となるものですが、創造的自由を制限するべきではありません。
• 作成するもの：アルゴリズム的哲学／生成美学的ムーブメント。
• 次に起こること：同じバージョンが哲学を受け取り、コードで表現します。p5.js スケッチを作成し、90% はアルゴリズム生成、10% は本質的なパラメータです。

このアプローチを検討してください：

• 生成アートムーブメントのマニフェストを作成する
• 次のフェーズでは、それを実現するアルゴリズムを作成します

哲学は以下を強調する必要があります：アルゴリズム的表現。創発的動作。計算美学。シード付き変動。

アルゴリズム的哲学を生成する方法

ムーブメントに名前を付ける（1～2 語）：「Organic Turbulence」／「Quantum Harmonics」／「Emergent Stillness」

哲学を明確にする（4～6 段落 - 簡潔かつ完全）：

アルゴリズム的本質をキャプチャするには、この哲学が以下を通じてどのように表現されるかを表現してください：

• 計算プロセスと数学的関係？
• ノイズ関数とランダム性パターン？
• パーティクル動作とフィールド力学？
• 時間的進化とシステム状態？
• パラメトリック変動と創発的複雑性？

重要なガイドライン：

• 冗長性を避ける：各アルゴリズム的側面は 1 度だけ言及してください。ノイズ理論、パーティクルダイナミクス、または数学原理に関する概念の繰り返しを避けてください。新しい深さを追加する場合を除きます。
• 職人技を繰り返し強調する：哲学は、最終的なアルゴリズムが数え切れないほどの時間をかけて開発されたかのように見え、細心の注意を払って洗練され、その分野の最頂点にいる人から来たものであることを複数回強調する必要があります。このフレーミングは不可欠です。「緻密に作られたアルゴリズム」、「深い計算専門知識の産物」、「手の込んだ最適化」、「マスターレベルの実装」などのフレーズを繰り返してください。
• 創造的なスペースを残す：アルゴリズムの方向性について具体的に述べてください。ただし、次の Claude が非常に高いレベルの職人技で解釈的な実装選択を行うための十分なスペースを確保する程度にしてください。

哲学は次のバージョンを導き、静的な画像ではなくアルゴリズムを通じてアイデアを表現する必要があります。美しさはプロセスに存在し、最終フレームには存在しません。

哲学の例

「Organic Turbulence」 哲学：自然法則に制約されたカオス、無秩序から出現する秩序。 アルゴリズム的表現：階層化された Perlin ノイズによって駆動されるフロー フィールド。ベクトル力に従う数千のパーティクル、その軌跡が有機的な密度マップに蓄積されます。複数のノイズオクターブが乱流領域と穏やかなゾーンを作成します。色は速度と密度から出現します。速いパーティクルは明るく燃え、遅いものは影に消えます。アルゴリズムが平衡に達するまで実行されます。すべてのパラメータが計算美学のマスターによる数え切れないほどの反復を通じて洗練された、緻密に調整されたバランスです。

「Quantum Harmonics」 哲学：干渉パターンのような波動特性を示す離散エンティティ。 アルゴリズム的表現：グリッド上で初期化されたパーティクル。各パーティクルは正弦波を通じて進化する位相値を持ちます。パーティクルが近い場合、その位相は干渉します。建設的な干渉は明るいノードを作成し、破壊的な干渉は空隙を作成します。単純調和運動が複雑な創発的マンダラを生成します。周波数校正に手を込めた結果。すべての比率が慎重に選択されて共鳴的な美しさを生み出しています。

「Recursive Whispers」 哲学：スケール全体での自己相似性、有限空間での無限の深さ。 アルゴリズム的表現：再帰的に細分化される分岐構造。各ブランチは軽くランダム化されていますが、黄金比で制約されています。L-システムまたは再帰的細分割が木のような形を生成し、数学的でありながら有機的です。微妙なノイズ摂動が完全な対称性を破ります。各再帰レベルでラインの重さが減少します。すべての分岐角は深い数学的探索の産物です。

「Field Dynamics」 哲学：物質への影響を通じて可視化される見えない力。 アルゴリズム的表現：数学関数またはノイズから構成されたベクトル フィールド。エッジで生成されるパーティクルがフィールドラインに沿って流れ、平衡に達するか境界に達すると消滅します。複数のフィールドがパーティクルを引き付け、反発、または回転させることができます。ビジュアライゼーションは痕跡のみを表示します。見えない力の幽霊のような証拠。力のバランスを通じて緻密に振り付けられた計算上のダンス。

「Stochastic Crystallization」 哲学：ランダムプロセスが秩序立った構造に結晶化する。 アルゴリズム的表現：ランダム化されたサークルパッキングまたは Voronoi テッセレーション。ランダムな点から開始して、緩和アルゴリズムで進化させます。セルは平衡に達するまで押し広げられます。セルサイズ、隣接数、または中心からの距離に基づいて色が付けられます。出現した有機タイリングはランダムでありながら避けられないように感じられます。各シードは独自の結晶美を生み出します。これはマスターレベルの生成アルゴリズムの印です。

これらは凝縮された例です。実際のアルゴリズム的哲学は 4～6 つの実質的な段落である必要があります。

本質的な原則

• アルゴリズム的哲学：コードを通じて表現される計算的世界観の作成
• プロセスより製品：アルゴリズムの実行から美しさが出現することを常に強調します。各実行は独自です
• パラメトリック表現：アイデアは数学的関係、力、動作を通じて伝わります。静的な構成ではなく
• 芸術的自由：次の Claude がアルゴリズム的に哲学を解釈します。創造的な実装のスペースを提供してください
• 純粋な生成アート：これはランダム性を持つ静的な画像ではなく、生きたアルゴリズムを作成することです
• 専門的職人技：最終アルゴリズムは緻密に作られ、数え切れないほどの反復を通じて洗練され、計算美学の分野で最高の水準にいる人による深い専門知識の産物に感じられることを繰り返し強調してください

アルゴリズム的哲学は 4～6 段落の長さである必要があります。 意図した ビジョンをまとめた詩的な計算哲学で満たしてください。同じポイントを繰り返さないでください。このアルゴリズム的哲学を .md ファイルとして出力してください。

---

概念シードの推論

重要なステップ：アルゴリズムを実装する前に、元のリクエストから微妙な概念スレッドを特定してください。

本質的な原則： この概念は、アルゴリズム内に組み込まれた微妙でニッチな参照 - 常に洗練されて、常に字義通りではありません。主題に詳しい人はそれを直感的に感じるべき一方、他の人は単にマスターレベルの生成構成を経験します。アルゴリズム的哲学が計算言語を提供します。推論された概念は魂を提供します。パラメータ、動作、および創発パターンに見えないように織り込まれた静かな概念的 DNA です。

これは非常に重要です：参照は、その作品の深さを発表することなく高めるほど洗練されている必要があります。別の曲をアルゴリズム調和を通じて引用するジャズミュージシャンのように考えてください。知っている人だけがそれをキャッチします。しかし、誰もが生成的な美しさを高く評価します。

---

P5.JS の実装

哲学と概念フレームワークが確立されたので、コードを通じて表現してください。続行する前に、考えを整理する一時停止をしてください。作成されたアルゴリズム的哲学と以下の指示のみを使用してください。

⚠️ ステップ 0：最初にテンプレートを読んでください ⚠️

重要：HTML を書く前に：

1. 読む templates/viewer.html は Read ツールを使用
2. 研究する 正確な構造、スタイリング、および Anthropic ブランディング
3. そのファイルを使用する リテラル出発点として（インスピレーションだけではなく）
4. 保つ すべての固定セクション（ヘッダー、サイドバー構造、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 アーティファクト - 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/クラス）
• パラメータ オブジェクト（アートに必要なもの定義）
• サイドバーの Parameters セクション：
  • パラメータ コントロール数
  • パラメータ名
  • スライダーの最小値／最大値／ステップ値
  • コントロール タイプ（スライダー、入力など）
• Colors セクション（オプション）：
  • いくつかのアートはカラーピッカーが必要
  • いくつかのアートは固定色を使用する場合があります
  • いくつかのアートはモノクロかもしれません（カラーコントロール不要）
  • アートのニーズに基づいて決定してください

すべてのアートワークは独自のパラメータとアルゴリズムを持つべき！ 固定部分は一貫した UX を提供します。その他すべてが独自のビジョンを表現します。

必須機能

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

• 数値パラメータのスライダー（パーティクル数、ノイズスケール、速度など）
• パレット色のカラーピッカー
• パラメータが変わる場合はリアルタイム更新
• リセット ボタン デフォルトを復元

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

• 現在のシード番号を表示
• 「前へ」と「次へ」ボタン（シードを循環）
• ランダムシード用の「ランダム」ボタン
• 特定のシードにジャンプするための入力フィールド
• リクエストされた場合は 100 のバリエーションを生成（シード 1～100）

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

<!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>
    /* すべてのスタイリングがインライン - クリーンでミニマル */
    /* キャンバスが上、コントロールが下 */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- すべてのパラメータコントロール -->
  </div>
  <script>
    // すべての p5.js コードがここにインライン
    // パラメータ オブジェクト、クラス、関数
    // setup() と draw()
    // UI ハンドラー
    // すべて自己完結
  </script>
</body>
</html>

重要：これは単一のアーティファクトです。外部ファイルなし。インポートなし（p5.js CDN を除く）。すべてインライン。

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

サイドバー構造：

1. シード（固定） - 常に示されたとおりに含める：

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

2. Parameters（変数） - アートのコントロール作成：

<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. Colors（オプション／変数） - アートがカラーを調整する必要がある場合に含める：

• ユーザーが パレット を制御すべき場合、カラーピッカーを追加
• アートが固定色を使用する場合はこのセクションをスキップ
• アートがモノクロの場合はスキップ

4. Actions（固定） - 常に示されたとおりに含める：

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

要件：

• シード コントロールは機能する必要があります（prev/next/random/jump/display）
• すべてのパラメータは UI コントロールを持つ必要があります
• 再生成、リセット、ダウンロード ボタンは機能する必要があります
• Anthropic ブランディングを保つ（UI スタイリング、アート色ではない）

アーティファクトの使用

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

1. claude.ai で：インタラクティブ アーティファクトとして表示 - 即座に実行
2. ファイルとして：保存して任意のブラウザで開く - サーバー不要
3. 共有：HTML ファイルを送信 - 完全に自己完結

---

バリエーションと探索

アーティファクトはデフォルトでシード ナビゲーション（前へ／次へ／ランダム ボタン）を含むため、ユーザーは複数のファイルを作成することなく変動を探索できます。ユーザーが特定の変動をハイライトしたい場合：

• シード プリセット（「Variation 1: Seed 42」、「Variation 2: Seed 127」などのボタン）を含める
• 複数のシードのサムネイルを並べて表示する「Gallery Mode」を追加
• すべて同じ単一アーティファクト内

これは同じプレートからのプリントのシリーズを作成するようなものです。アルゴリズムは一貫していますが、各シードはその可能性の異なる側面を明らかにします。インタラクティブな性質は、ユーザーがシードスペースを探索することで自分のお気に入りを発見することを意味します。

---

クリエイティブプロセス

ユーザーリクエスト → アルゴリズム的哲学 → 実装

各リクエストは独自です。プロセスは以下を含みます：

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

定数：

• Anthropic ブランディング（色、フォント、レイアウト）
• シード ナビゲーション（常に存在）
• 自己完結型 HTML アーティファクト

その他すべてが可変：

• アルゴリズム自体
• パラメータ
• UI コントロール
• ビジュアル結果

最良の結果を達成するには、創造性を信頼し、哲学が実装をガイドするようにしてください。

---

リソース

このスキルには有用なテンプレートとドキュメントが含まれます：

• templates/viewer.html：すべての HTML アーティファクト用の必須出発点。

  • これが基盤です。正確な構造と Anthropic ブランディングが含まれます
  • 変更なしで保つ：レイアウト構造、サイドバー組織、Anthropic 色／フォント、シード コントロール、アクション ボタン
  • 置換：p5.js アルゴリズム、パラメータ定義、Parameters セクションの UI コントロール
  • ファイル内の広範なコメントは、保つべきもの対置換すべきものを正確にマークします

• templates/generator_template.js：p5.js のベストプラクティスとコード構造原則の参照。

  • パラメータを整理し、シード付きランダム性を使用し、クラスを構造化する方法を示します
  • パターン メニューではなく、これらの原則を使用して独自のアルゴリズムを構築します
  • HTML アーティファクト内にアルゴリズムをインラインで埋め込みます（別の .js ファイルを作成しないでください）

重要なリマインダー：

• テンプレートは出発点です、インスピレーションではなく
• アルゴリズムは創造する場所です ユニークなもの
• フロー フィールドの例をコピーしないでください。哲学が要求するものを構築してください
• しかし、テンプレートから正確な UI 構造と Anthropic ブランディングを保ってください

使用する場合

このスキルは、概要で説明されたワークフローまたはアクションを実行するために適用できます。

制限事項

• タスクが上記の説明されたスコープと明確に一致する場合のみ、このスキルを使用してください。
• 出力を環境固有の検証、テスト、または専門家レビューの代替品として扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不明な場合は、停止して説明を求めてください。