algorithmic-art

1. アルゴリズム哲学の創作（.md ファイル）
2. 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 を書く前に、必ず次のことを行ってください。

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 のカラーとフォント、シード制御、アクションボタン
  • 置き換えてください：「Parameters」セクションの p5.js アルゴリズム、パラメーター定義、UI コントロール
  • ファイル内の詳しいコメントで、維持する箇所と置き換える箇所が正確に示されています。

• templates/generator_template.js：p5.js のベストプラクティスとコード構成の原則を確認するための参考資料です。

  • パラメーターの整理、シード付き乱数の使用、クラスの構成方法を示しています。
  • パターン集ではありません。これらの原則を活用して、独自のアルゴリズムを構築してください。
  • アルゴリズムは HTML アーティファクトにインラインで埋め込んでください（個別の .js ファイルは作成しないでください）。

重要な注意事項：

• テンプレートは出発点であり、インスピレーションのためのものではありません。
• 独自性を生み出すのはアルゴリズムです。
• フローフィールドの例をコピーせず、理念に沿ったものを構築してください。
• ただし、テンプレートの正確な UI 構造と Anthropic のブランディングは維持してください。

国内向け対応

• 中国語のドキュメントとコメントに対応しています。
• サンプルコードは国内の開発環境と互換性があります。
• 中国語の FAQ とよくある質問への回答を提供しています。

使用手順

ステップ 1：環境の準備

開発環境に必要な依存関係とツールがインストールされていることを確認します。

ステップ 2：初期設定

プロジェクトの要件に応じて基本設定を行います。

ステップ 3：コア機能の使用

サンプルコードに従ってコア機能を実装します。

ステップ 4：テストと検証

テストを実行して、機能が正常に動作することを確認します。

ステップ 5：デプロイ

開発完了後、デプロイとモニタリングを行います。