Claudeのalgorithmic-artスキルでp5.jsのアートをシード付きで作る

algorithmic-artは、Anthropicのskillsリポジトリにある、p5.jsでジェネレーティブアートを作らせるスキルです。作るのは2つ。アートの考え方を書いた「アルゴリズム思想」のMarkdownと、その思想をコードにした、シードとパラメータを操作できる1枚のHTMLです。

「絵を1枚描いて」と頼むのとは違います。同じシードなら同じ絵になり、シードを変えれば別の絵が出てくる。そういう「生成の仕組み」ごと手元に残るのが、このスキルの特徴です。

この記事では、導入、依頼から出力までの流れ、テンプレートのどこが固定でどこが差し替えか、シードとパラメータの設計、記述が食い違っている箇所までを順に扱います。

algorithmic-artスキルは何を出力するのか

SKILL.mdの冒頭は、出力を「思想の.md、対話用の.html、生成アルゴリズムの.js」と書いています。ところが後半の出力形式の節では、アルゴリズムは別の.jsファイルにせずHTMLに埋め込み、成果物は1つの自己完結したHTMLにまとめるよう指示しています。実際の出力は、次の2点と考えるのが自然です。

• アルゴリズム思想の.md(4〜6段落)
• p5.jsのアルゴリズム、パラメータ操作、シード操作をすべて埋め込んだ単一のHTML

p5.jsはHTMLのscriptタグでCDNから読み込む指定で、バージョンは1.7.0です。ビルド環境もサーバーも要りません。保存したHTMLをブラウザで開けば動きます。

スキルのdescriptionには、使いどころとして「コードでアートを作る」「ジェネレーティブアート」「フローフィールド」「パーティクルシステム」が挙がっています。既存の作家の作品を真似ず、オリジナルのアートを作るよう、同じdescriptionが求めています。

導入: Claude Codeとclaude.aiでの使い方

Claude Codeで入れる

algorithmic-artは、skillsリポジトリのマーケットプレイス定義でexample-skillsプラグインに含まれています。同じプラグインにはskill-creator、frontend-design、canvas-design、slack-gif-creatorなども入っています。READMEのとおり、マーケットプレイスを登録してからプラグインを入れます。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

プラグイン経由のスキルは、スキル一覧のうえでは/プラグイン名:スキル名の形で呼べます。ここでは/example-skills:algorithmic-artです。READMEには「スキルの名前を会話で言えば使える」とあるので、「algorithmic-artスキルで〜を作って」と頼む形でも動きます。マーケットプレイスの登録フラグを選びたいときは、claude plugin marketplace addの3フラグが参考になります。

プラグインを使わず、単体で置く方法もあります。個人用のスキルは~/.claude/skills/<スキル名>/SKILL.md、プロジェクト用は.claude/skills/<スキル名>/SKILL.mdに置く決まりです。algorithmic-artのSKILL.mdはtemplates/viewer.htmlを読むよう指示しているため、SKILL.mdだけでなくtemplatesフォルダも含めて、フォルダごとコピーする形になります。

claude.aiで使う

READMEには、これらの例のスキルはclaude.aiの有料プランで既に使える、とあります。自分で追加する方法は、READMEが参照している「Using skills in Claude」のサポート記事に書かれています。

依頼から出力まで: 3つの段階

SKILL.mdが定める流れは、思想を書く、概念の種を決める、コードにする、の順です。

思想の節には、少し変わった指示が入っています。思想の中で、仕上がるアルゴリズムが「何時間もかけて磨かれた」「その道の第一人者の仕事」に見えることを、繰り返し強調するというものです。生成された思想の.mdが妙に大仰な文体になるのは、この指示に沿っているからと読めます。ここは書き手に任せず、気になるなら依頼文で調子を指定しておく箇所です。

もう1つの注意点があります。SKILL.mdは、利用者の入力を「土台として使うが、創作の自由を縛らないもの」と位置づけています。色やキャンバスサイズ、動かすか静止させるかなど、固定したい条件は依頼文で明示しておくほうが、思想に飲み込まれにくくなります。これはSKILL.mdの記述から導いた運用上の工夫で、スキル自体が定めた手順ではありません。

viewer.htmlテンプレートの固定部分と差し替え部分

SKILL.mdは、HTMLをゼロから作らず、templates/viewer.htmlを「文字どおりの出発点」にするよう強く求めています。固定部分と差し替え部分は次のとおりです。

テンプレートの初期状態も確認できます。paramsの初期値はシード12345、パーティクル5000個、流れの速さ0.5、ノイズの細かさ0.005、軌跡の長さ8、配色は#d97757、#6a9bcc、#788c5dの3色です。キャンバスは1200×1200で、背景はrgb(250, 249, 245)。generateFlowField、draw、Particleは中身が空の「fill this in」で、ここを思想に合わせて書き換える前提になっています。

つまり、テンプレートのフローフィールドは出来上がった作例ではなく、骨組みです。SKILL.mdも「フローフィールドの例をコピーせず、思想が求めるものを作れ」と念を押しています。

シードとパラメータの設計

SKILL.mdの技術要件で外せないのは、シードによる再現性です。randomSeed(seed)とnoiseSeed(seed)を必ず呼び、同じシードは必ず同じ出力になるようにします。Art Blocksという生成アートの流儀にならったパターンだと書かれています。

パラメータは「パターンの種類」ではなく「この系が調整できる性質」で考えるよう求められています。数、大きさや速さ、確率、比率、角度、挙動が切り替わる閾値といった観点です。

この2点を満たす最小の例を、p5.jsで書いてみます。SKILL.mdの要件に沿った自作の例で、スキルが出力するコードそのものではありません。

let params = { seed: 12345, count: 900, noiseScale: 0.004, steps: 140 };
 
function setup() {
  createCanvas(800, 800);
  noLoop();
}
 
function draw() {
  randomSeed(params.seed);
  noiseSeed(params.seed);
  background(250, 249, 245);
  stroke(20, 20, 19, 40);
  noFill();
  const ns = params.noiseScale;
  for (let i = 0; i < params.count; i++) {
    let x = random(width);
    let y = random(height);
    beginShape();
    for (let s = 0; s < params.steps; s++) {
      vertex(x, y);
      const a = noise(x * ns, y * ns) * TWO_PI * 2;
      x += cos(a) * 3;
      y += sin(a) * 3;
    }
    endShape();
  }
}
 
function setSeed(n) {
  params.seed = n;
  redraw();
}

draw()の先頭でシードを毎回設定しているので、同じparamsなら何度描き直しても同じ線が出ます。乱数を使う処理がdraw()の外に散らばると、この前提が崩れます。

作った後の確認は、次の3点で足ります。

• シードを「次へ」で進めて「前へ」で戻し、元の絵と同じ見た目に戻るか
• スライダーを動かしても、画面がリアルタイムに更新されるか
• 「リセット」で初期値に戻るか

依頼の段階で、バリエーションの出し方も指定できます。SKILL.mdには、シード1〜100の100通りを出す、シード番号付きのプリセットボタン(「Variation 1: Seed 42」など)を置く、複数シードのサムネイルを並べる「ギャラリーモード」を足す、という拡張が挙がっています。いずれも同じHTMLの中で完結させます。

依頼文の例

Claude Codeで頼むときの書き方の一例です。これは依頼文の例であって、出力例ではありません。

algorithmic-artスキルで、雨上がりの静けさをテーマにしたp5.jsの作品を作って。
静止画で、キャンバスは1200x1200、配色は3色まで。
思想は.mdに、作品は1つのHTMLに保存して。

保存したHTMLの動作確認は、ブラウザで開くだけです。macOSなら次のコマンドで開けます。

open algorithmic-art-rain.html

記述が食い違っている箇所

SKILL.mdとテンプレートを読み比べると、いくつか食い違いがあります。実際に使うときは、手元のファイルを優先して確かめてください。

通常の依頼とalgorithmic-artの違い

「絵を描いて」と頼む通常の使い方と並べると、手元に残るものが変わります。

スキルの出来を数値で測りたい場合は、skill-creatorのevalで、スキルありとなしの実行を比較できます。見た目の仕様書を作る別の例には、design-handoffスキルがあります。

まとめ

algorithmic-artの価値は、1枚の絵ではなく「シードで再現でき、パラメータで探索できる作品」が単一のHTMLで手に入る点にあります。依頼のたびに固定したい条件(色数、サイズ、PNG保存、静止か動きか)を書き足すと、思想の自由度に振り回されずに済みます。テンプレートはあくまで骨組みで、SKILL.mdの記述と食い違う箇所は手元のファイルで確かめてから使うのが現実的です。