algorithmic-art

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

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

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

まず、このタスクに取り組みます：

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

最初に、以下を通じて解釈されるアルゴリズム的哲学（静的な画像やテンプレートではありません）を作成します：

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

重要な理解

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

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

• 生成アート運動のためのマニフェストを書く
• 次のフェーズでは、それを実現するアルゴリズムを書く

哲学は以下を強調しなければなりません：アルゴリズム的表現。創発的挙動。計算的な美。シード付きの変化。

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

運動に名前を付ける（1〜2語）："Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

哲学を明確に述べる（4〜6段落 — 簡潔かつ完全に）：

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

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

重要なガイドライン：

• 冗長性を避ける：各アルゴリズム的側面は一度だけ言及してください。新たな深みを加える場合を除き、ノイズ理論、パーティクルダイナミクス、数学的原理に関する概念を繰り返すことは避けてください。
• 職人技を繰り返し強調する：哲学は、最終的なアルゴリズムが何時間もかけて開発されたかのように見え、注意深く洗練され、その分野の絶対的なトップにいる人物によるものであることを、複数回強調しなければなりません。この枠組みは不可欠です — 「細心の注意を払って作り上げられたアルゴリズム」「深い計算専門知識の産物」「骨の折れる最適化」「マスターレベルの実装」といったフレーズを繰り返してください。
• 創造的な余地を残す：アルゴリズムの方向性については具体的にしつつ、次の Claude が極めて高い職人技のレベルで解釈的な実装の選択を行える余地を残す程度に簡潔にしてください。

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

哲学の例

「有機的な乱流」 哲学：自然法則に制約されたカオス、無秩序から生まれる秩序。 アルゴリズムによる表現：複数の層からなるパーリンノイズが駆動するフローフィールド。何千ものパーティクルがベクトルの力に従い、その軌跡が積み重なって有機的な密度マップを形成します。複数のノイズオクターブによって、乱流の領域と穏やかな領域が生まれます。色は速度と密度から生じます。速いパーティクルは明るく燃え上がり、遅いパーティクルは影の中に消えていきます。アルゴリズムは平衡状態に達するまで動き続けます。それは、計算美学の達人が幾度となく反復を重ね、あらゆるパラメーターを入念に調整してたどり着いた、絶妙なバランスです。

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

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

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

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

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

必須原則

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

**アルゴリズム哲学は4～6段落にしてください。**意図するビジョンをひとつにまとめる、詩的な計算哲学を盛り込んでください。同じ点を繰り返すことは避けてください。このアルゴリズム哲学を.mdファイルとして出力してください。

---

概念の種を推測する

重要なステップ：アルゴリズムを実装する前に、元のリクエストに秘められた、さりげない概念の糸を見つけてください。

本質的な原則： その概念とは、アルゴリズム自体に埋め込まれた、さりげないニッチな参照です。常に文字どおりとは限らず、洗練されています。その分野に詳しい人は直感的に感じ取れる一方、それ以外の人には見事な生成的構成として楽しめるものです。アルゴリズムの哲学は計算上の表現をもたらします。推測された概念は魂をもたらします。それは、パラメーター、挙動、創発パターンに目立たないよう織り込まれた、静かな概念上のDNAです。

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

---

P5.JS の実装

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

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

重要：HTML を書く前に、必ず次のことを行ってください。

1. Read ツールを使って templates/viewer.html を読みます
2. 正確な構造、スタイル、Anthropic のブランディングを確認します
3. このファイルを単なる参考ではなく、文字どおりの出発点として使用します
4. 固定セクションはすべて、表示どおりに維持します（ヘッダー、サイドバーの構造、Anthropic のカラーとフォント、シードのコントロール、アクションボタン）
5. ファイルのコメントで示された可変セクションのみを置き換えます（アルゴリズム、パラメーター、パラメーター用 UI コントロール）

次のことは避けてください。

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

次の手順に従ってください。

• ✅ テンプレートの HTML 構造をそのままコピーする
• ✅ Anthropic のブランディング（Poppins／Lora フォント、明るい色、グラデーションの背景）を維持する
• ✅ サイドバーのレイアウト（Seed → Parameters → Colors? → Actions）を維持する
• ✅ 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
}

CRAFTSMANSHIP REQUIREMENTS

重要：熟達した作品に仕上げるには、熟練したジェネラティブアーティストが数え切れないほどの試行を重ねて生み出したかのように感じられるアルゴリズムを作成してください。すべてのパラメーターを慎重に調整してください。すべてのパターンが意図を持って生まれるようにしてください。これはランダムなノイズではありません。深い専門知識によって磨き上げられた、制御されたカオスです。

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

OUTPUT FORMAT

出力：

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

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

---

INTERACTIVE ARTIFACT CREATION

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

ジェネラティブアートを探索できるよう、自己完結型の HTML 成果物を 1 つ作成してください。この成果物が claude.ai または任意のブラウザーですぐに動作するようにしてください。セットアップは不要です。すべてをインラインに埋め込んでください。

CRITICAL: WHAT'S FIXED VS VARIABLE

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

固定（常に以下のとおりに含める）：

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

可変（作品ごとにカスタマイズする）：

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

作品ごとに、固有のパラメーターとアルゴリズムを用意してください！ 固定部分は一貫した UX を提供し、それ以外のすべてが作品独自のビジョンを表現します。

必須機能

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

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

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

• 現在のシード番号を表示
• シードを切り替える「前へ」ボタンと「次へ」ボタン
• ランダムなシードを選ぶ「ランダム」ボタン
• 特定のシードに移動する入力フィールド
• リクエストに応じて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. シード（固定） — 以下のとおり必ず含めてください：

• シード表示
• 前へ／次へ／ランダム／移動ボタン

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コントロールがあること
• 再生成、リセット、ダウンロードの各ボタンが機能すること
• Anthropicのブランディングを維持すること（アートの色ではなく、UIのスタイル）

アーティファクトの使用方法

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

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

---

バリエーションと探索

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

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

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

---

クリエイティブプロセス

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

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

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 のブランド表現は必ず維持してください。