X (Twitter)

シードされたランダム性、パラメータ制御、再現可能なクロードスキルワークフローを備えた p5.js ジェネレーティブアートを作成するためのエージェントスキルガイド。

出典: anthropics/skills (MIT) を基にしたコンテンツ。

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

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

アルゴリズム哲学の作成 (.md ファイル)
p5.js ジェネレーティブアート (.html +.js ファイル) を作成して表現します。

まず、次のタスクを実行します。

アルゴリズム哲学の創造

まず、以下を通じて解釈される ALGORITHMIC PHILOSOPHY (静的画像やテンプレートではない) を作成します。

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

重要な理解

受信した内容: 考慮すべきユーザーによる微妙な入力または指示ですが、基礎として使用します。創造的な自由を制限してはなりません。
作成されるもの: アルゴリズム哲学/生成美学運動。
次に何が起こるか: 同じバージョンが哲学を受け取り、それをコードで表現します。90% がアルゴリズム生成、10% が必須パラメーターである p5.js スケッチを作成します。

次のアプローチを検討してください。

ジェネレーティブアート運動のマニフェストを書く
次のフェーズでは、アルゴリズムを実現するアルゴリズムを作成します。

哲学はアルゴリズム表現を強調しなければなりません。突発的な行動。計算上の美しさ。シードのバリエーション。

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

ムーブメントに名前を付けてください (1 ～ 2 語): 「有機乱気流」 / 「量子調和」 / 「創発的静寂」

哲学を明確に説明します (4 ～ 6 段落 - 簡潔ですが完全):

アルゴリズムの本質を捉えるために、この哲学が次のようにどのように現れるかを表現してください。

計算プロセスと数学的関係?
ノイズ関数とランダムパターン?
粒子の挙動と場のダイナミクス?
時間的進化とシステム状態?
パラメトリックな変動と新たな複雑性?

重要なガイドライン:

冗長性を避ける: アルゴリズムの各側面については 1 回ずつ言及する必要があります。新しい深みを加えない限り、ノイズ理論、粒子力学、または数学的原理に関する概念を繰り返すことは避けてください。
クラフトマンシップを繰り返し強調する: この哲学では、最終的なアルゴリズムが、開発に数え切れないほどの時間を費やし、慎重に洗練され、その分野の絶対的なトップの人物によって作られたものであるかのように見える必要があることを何度も強調しなければなりません。この枠組みは不可欠であり、「細心の注意を払って作成されたアルゴリズム」、「深い計算専門知識の成果」、「骨の折れる最適化」、「マスターレベルの実装」などのフレーズを繰り返します。
創造的なスペースを残す: アルゴリズムの方向性については具体的ですが、次のクロードが非常に高いレベルの職人技で解釈的な実装の選択を行う余地があるように十分に簡潔にしてください。

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

「有機乱気流」 哲学: 自然法によって制約された混沌、無秩序から生まれる秩序。アルゴリズム表現: 層状パーリンノイズによって駆動される流れ場。何千もの粒子がベクトル力に従い、その痕跡が有機的な密度マップに蓄積されます。複数のノイズオクターブにより、乱流領域と穏やかなゾーンが作成されます。色は速度と密度から現れます。速い粒子は明るく燃え上がり、遅い粒子は影に消えます。アルゴリズムは平衡状態になるまで実行されます。平衡状態とは、すべてのパラメーターが計算上の美学の達人によって無数の反復を経て洗練されたものであり、細心の注意を払って調整されたバランスです。

「量子調和学」 哲学: 波状の干渉パターンを示す個別の実体。アルゴリズム表現: グリッド上で初期化されたパーティクル。それぞれが正弦波を通じて展開する位相値を持ちます。粒子が近づくと、それらの位相が干渉します。強め合う干渉は明るいノードを作成し、弱め合う干渉はボイドを作成します。単純な調和運動が複雑な創発マンダラを生成します。共鳴の美しさを生み出すためにすべての比率が慎重に選択された、骨の折れる周波数校正の結果です。

「リカーシブ・ウィスパーズ」 哲学: スケールを越えた自己相似性、有限空間における無限の深さ。アルゴリズム式: 再帰的に細分化される分岐構造。各ブランチはわずかにランダム化されていますが、黄金比によって制限されています。 L システムまたは再帰的細分化により、数学的かつ有機的に感じられるツリー状の形式が生成されます。微妙なノイズの乱れにより、完全な対称性が崩れます。線の太さは再帰レベルごとに減少します。すべての分岐角度は、深い数学的探求の産物です。

「フィールドダイナミクス」 哲学: 目に見えない力は、物質への影響を通じて可視化されます。アルゴリズム式: 数学関数またはノイズから構築されたベクトルフィールド。粒子はエッジで生まれ、力線に沿って流れ、平衡または境界に達すると消滅します。複数のフィールドは、粒子を引き付けたり、反発したり、回転させたりすることができます。視覚化では、目に見えない力の痕跡、つまり幽霊のような証拠のみが表示されます。フォースバランスによって緻密に振り付けられた計算ダンス。

「確率的結晶化」 哲学: ランダムなプロセスが秩序ある構造に結晶化する。アルゴリズム表現: ランダム化された円パッキングまたはボロノイテッセレーション。ランダムな点から始めて、緩和アルゴリズムを通じてそれらを進化させます。細胞は平衡になるまで押し広げられます。セルのサイズ、隣接するセルの数、または中心からの距離に基づく色。出現する有機的なタイルは、ランダムであると同時に必然であるように感じられます。すべての種子は、マスターレベルの生成アルゴリズムの証である、独特の結晶の美しさを生み出します。

これらは要約された例です。実際のアルゴリズムの哲学は 4 ～ 6 つの実質的な段落になるはずです。

必須原則

アルゴリズム哲学: コードを通じて表現される計算の世界観を作成する
製品に対するプロセス: 美しさはアルゴリズムの実行から生まれることを常に強調します - それぞれの実行はユニークです
パラメトリック式: アイデアは、静的な構成ではなく、数学的な関係、力、動作を通じて伝達されます。
芸術的自由: 次のクロードはアルゴリズムを使って哲学を解釈します - 創造的な実装余地を提供します
純粋なジェネラティブアート: これは、ランダム性のある静的な画像ではなく、リビングアルゴリズムを作成することについてのものです。
専門家の職人技: 最終的なアルゴリズムは、計算美学の分野で絶対的なトップに立つ人物による深い専門知識の産物であり、無数の反復を通じて細心の注意を払って作成され、洗練されていると感じられる必要があることを繰り返し強調します。

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

概念の種を推測する

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

重要な原則: この概念は、アルゴリズム自体の中に埋め込まれた微妙でニッチな参照であり、必ずしも文字通りではなく、常に洗練されています。このテーマに詳しい人は直感的に感じるはずですが、単純に見事な生成構成を体験する人もいます。アルゴリズム哲学は計算言語を提供します。推定された概念は魂、つまりパラメータ、行動、出現パターンに目に見えない形で織り込まれた静かな概念的 DNA を提供します。

これは非常に重要です: 参照は、それ自体を宣伝することなく作品の深みを高めるために非常に洗練されている必要があります。ジャズミュージシャンがアルゴリズムハーモニーを通じて別の曲を引用するように考えてください。それを理解できるのは知っている人だけですが、誰もが生成的な美しさを高く評価します。

P5.JSの実装

哲学と概念的な枠組みを確立したら、それをコードで表現します。次に進む前に、一時停止して考えをまとめてください。作成されたアルゴリズムの哲学と以下の手順のみを使用してください。

ステップ 0: 最初にテンプレートを読む

重要: HTML を作成する前に:

読み取りツールを使用してtemplates/viewer.htmlを読み取ります
正確な構造、スタイル、人間味のあるブランディングを研究**
そのファイルを単なるインスピレーションとしてではなく、文字通りの出発点として使用してください
すべての FIXED セクションを表示どおりに維持してください (ヘッダー、サイドバー構造、人造カラー/フォント、シードコントロール、アクションボタン)
ファイルのコメントでマークされている VARIABLE セクションのみを置き換えます (アルゴリズム、パラメーター、パラメーターの UI コントロール)

避けてください:

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

次の実践に従ってください:

テンプレートの正確な HTML 構造をコピーします。
Anthropic ブランドを維持する (ポピンズ/ロラフォント、明るい色、グラデーション背景)
サイドバーのレイアウトを維持します (シード -> パラメータ -> 色? -> アクション)
p5.js アルゴリズムとパラメーターコントロールのみを置き換えます。

テンプレートは基礎です。再構築するのではなく、その上に構築してください。

生き生きとしたギャラリー品質のコンピューテーショナルアートを作成するには、アルゴリズムの哲学を基礎として使用します。

技術的要件

シードされたランダム性 (アートブロックパターン):

// 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
}

職人技の要件

重要: 熟練を達成するには、熟練した生成アーティストが無数の反復を経て出現したかのようなアルゴリズムを作成する必要があります。すべてのパラメータを慎重に調整してください。すべてのパターンが目的をもって現れるようにします。これはランダムなノイズではありません。これは深い専門知識を通じて洗練された制御されたカオスです。

バランス: 視覚的なノイズのない複雑さ、堅さのない秩序
色の調和: ランダムな RGB 値ではなく、考え抜かれたパレット
構成: ランダムな場合でも、視覚的な階層とフローを維持します。
パフォーマンス: スムーズな実行、アニメーション化された場合にリアルタイム向けに最適化
再現性: 同じシードは常に同じ出力を生成します

出力フォーマット

出力:

アルゴリズム哲学 - 生成美学を説明するマークダウンまたはテキストとして
単一の HTML アーティファクト -templates/viewer.htmlから構築された自己完結型のインタラクティブなジェネレーティブアート (ステップ 0 と次のセクションを参照)

HTML アーティファクトには、p5.js (CDN より)、アルゴリズム、パラメーターコントロール、UI のすべてが 1 つのファイルに含まれており、claude.ai アーティファクトまたは任意のブラウザーですぐに動作します。最初からではなく、テンプレートファイルから開始します。

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

注意:templates/viewer.htmlはすでに読み取られている必要があります (ステップ 0 を参照)。そのファイルを開始点として使用します。

ジェネレーティブアートを探索できるようにするには、単一の自己完結型 HTML アーティファクトを作成します。このアーティファクトが claude.ai または任意のブラウザーですぐに動作することを確認します。セットアップは必要ありません。すべてをインラインに埋め込みます。

重要: 何が固定か、何が変化するか

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

修正済み (常に示されているとおりに正確に含めます):

レイアウト構造（ヘッダー、サイドバー、メインキャンバスエリア）
人間的なブランディング (UI カラー、フォント、グラデーション)
サイドバーのシードセクション:
- シード表示
- 前へ/次へボタン
- ランダムボタン
- シード入力にジャンプ + Go ボタン
サイドバーの「アクション」セクション:
- 再生成ボタン
- リセットボタン

可変 (アートワークごとにカスタマイズ):

p5.js アルゴリズム全体 (セットアップ/描画/クラス)
パラメータオブジェクト (アートに必要なものを定義)
サイドバーの「パラメータ」セクション:
- パラメーターコントロールの数
- パラメータ名
- スライダーの最小/最大/ステップ値
- コントロールの種類 (スライダー、入力など)
カラーセクション (オプション):
- 一部のアートにはカラーピッカーが必要です
- アートによっては固定色を使用する場合があります
- 一部のアートはモノクロである場合があります (カラーコントロールは必要ありません)。
- アートのニーズに基づいて決定する

すべてのアートワークには独自のパラメーターとアルゴリズムが必要です。 固定部分は一貫した 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>
    /* 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>

重要: これは単一のアーティファクトです。外部ファイルやインポートはありません (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>

パラメーターと同じ数のコントロールグループ div を追加します。

3.色 (オプション/可変) - アートに調整可能な色が必要な場合に含めます。

ユーザーがパレットを制御する必要がある場合は、カラーピッカーを追加します
アートに固定色が使用されている場合は、このセクションをスキップしてください
アートがモノクロの場合はスキップします

4.アクション (修正済み) - 常に次のとおり正確に含めます。

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

要件:

シードコントロールが機能する必要があります (前/次/ランダム/ジャンプ/表示)
すべてのパラメータには UI コントロールが必要です
再生成、リセット、ダウンロードボタンが機能する必要があります
Anthropic ブランディングを維持する (アートカラーではなく UI スタイル)

アーティファクトの使用

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

claude.ai 内: インタラクティブなアーティファクトとして表示 - 即座に実行
ファイルとして: 保存して任意のブラウザで開きます - サーバーは必要ありません
共有: HTML ファイルを送信します - 完全に自己完結型です

バリエーションと探索

アーティファクトにはデフォルトでシードナビゲーション (前へ/次へ/ランダムボタン) が含まれており、ユーザーは複数のファイルを作成せずにバリエーションを探索できます。ユーザーが特定のバリエーションを強調表示したい場合:

シードプリセットを含めます (「バリエーション 1: シード 42」、「バリエーション 2: シード 127」などのボタン)
複数のシードのサムネイルを並べて表示する「ギャラリーモード」を追加
すべてが同じ 1 つのアーティファクト内にある

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

創造的なプロセス

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

それぞれのリクエストはユニークです。このプロセスには以下が含まれます。

ユーザーの意図を解釈する - どのような美学が求められていますか?
計算アプローチを説明するアルゴリズム哲学を作成 (4 ～ 6 段落)
コードで実装します - この哲学を表現するアルゴリズムを構築します
適切なパラメータを設計 - 何を調整可能にする必要がありますか?
一致する UI コントロールを構築 - これらのパラメーターのスライダー/入力

定数:

人間的なブランディング (色、フォント、レイアウト)
シードナビゲーション (常に存在)
自己完結型の HTML アーティファクト

その他はすべて変数:

アルゴリズム自体
パラメータ
UI コントロール
視覚的な結果

最良の結果を達成するには、創造性を信頼し、哲学に基づいて実装してください。

リソース

このスキルには、役立つテンプレートとドキュメントが含まれています。

templates/viewer.html: すべての HTML 成果物に必要な開始点。
- これは基礎です - 正確な構造と人類のブランドが含まれています
- 変更しないでください: レイアウト構造、サイドバーの構成、人間味のある色/フォント、シードコントロール、アクションボタン
- 置換: 「パラメーター」セクションの p5.js アルゴリズム、パラメーター定義、および UI コントロール
- ファイル内の広範なコメントは、何を保持するのか、何を置換するのかを正確にマークします。
templates/generator_template.js: p5.js のベストプラクティスとコード構造の原則に関するリファレンス。
- パラメータを編成する方法、シードされたランダム性を使用する方法、クラスを構造化する方法を示します。
- パターンメニューではありません - これらの原則を使用して独自のアルゴリズムを構築します
- アルゴリズムを HTML アーティファクトにインラインで埋め込みます (個別の.js ファイルを作成しないでください)。

重要な注意事項:

テンプレートは出発点であり、インスピレーションではありません
アルゴリズムはユニークなものを作成する場所です
流れ場の例をコピーしないでください - 哲学が要求するものを構築してください
ただし、テンプレートの正確な UI 構造と Anthropic ブランドを維持してください。

アルゴリズム哲学の作成 (.md ファイル)
p5.js ジェネレーティブアート (.html +.js ファイル) を作成して表現します。