Algorithmic Art Skill

Algorithmic Art は、Anthropic の skills リポジトリにあるサンプルスキルで、SKILL.md、LICENSE.txt、templates/ フォルダーで構成されています。SKILL.mdによると、このスキルはシード付き乱数とインタラクティブなパラメータ探索を使い、p5.js でジェネラティブアートを作ります。ジェネラティブアート、アルゴリズミックアート、フローフィールド、パーティクルシステムなどの依頼向けで、既存アーティストの模倣ではなくオリジナルの制作を求めています。

仕組み

スキルは 2 つのステップで進みます。

1. アルゴリズム哲学: 1〜2 語のムーブメント名と、4〜6 段落のマニフェストを .md ファイルとして書きます。創発、ノイズフィールド、パーティクル、パラメトリックな変化などの計算美学を扱います。
2. p5.js 実装: その哲学をコードで表現します。目安は、約 90% をアルゴリズム生成、10% を必要最小限のパラメータとすることです。

主な機能

• シード付き乱数: コードが randomSeed() と noiseSeed() を呼ぶため、同じシードなら常に同じ出力になります。
• シードのナビゲーション: 現在のシードを表示し、前へ・次へ・ランダム・シード指定ジャンプの操作を備え、シード 1〜100 を生成できます。
• リアルタイムのパラメータ操作: スライダーとカラーピッカーで作品がリアルタイムに更新され、リセットボタンもあります。
• ビューアーテンプレート: templates/viewer.html が必須の出発点で、レイアウト、サイドバー、Anthropic ブランディング、シード操作、アクションボタンは固定です。templates/generator_template.js は p5.js の構造の参考で、パターン集ではありません。
• 単一ファイル出力: 成果物は p5.js を CDN から読み込む自己完結型の HTML アーティファクト 1 つで、claude.ai でも任意のブラウザーでも動作します。スキルは別の .js ファイルを作らないよう求めています。
• アクション: 再生成、リセット、PNG ダウンロード。

使用シナリオ

• Claude でフローフィールド、パーティクルシステムなどコード駆動のアートを生成する。
• シードを順に切り替え、パラメータを調整できる探索可能な作品を作る。
• 文章による概念と動くコードを、スキルがどう組み合わせるかを学ぶ。

制限: 出力の質はモデルと p5.js に左右され、スキル自体のガイドラインは Anthropic ブランドのビューアーレイアウトを固定するよう定めています。

はじめかた

1. スキルのフォルダーを開き、SKILL.md を読みます。
2. Claude Skills で説明されている手順でインストールします。
3. Claude Code または Claude にフローフィールドアートなどの作品を依頼し、最初に書かれる哲学を確認します。
4. 生成された HTML ファイルを開き、シードとパラメータを探索します。

よくある質問

Algorithmic Art スキルは何をしますか？

Claude にアルゴリズム哲学を書かせ、それをシード付きのインタラクティブな p5.js アーティファクトとして実装します。

別の JavaScript ファイルは作られますか？

いいえ。スキルは自己完結型の単一 HTML ファイルを求めています。

既存アーティストのスタイルを真似られますか？

いいえ。スキルはオリジナルの制作を求めています。

料金はかかりますか？

スキルは公開 GitHub リポジトリ内のフォルダーです。利用には Claude の製品が必要で、その料金は別です。

代替案

• Canvas Design: インタラクティブなジェネラティブアートではなく静的なビジュアルデザイン向け。
• Claude Skills: スキルのパッケージ化と読み込みの仕組み。
• Claude Code: ターミナルからスキルを実行するホスト。

まとめ

Algorithmic Art は、文章による概念と動作する p5.js 作品を組み合わせた、コンパクトなスキルの例です。関連スキルはスキルカテゴリをご覧ください。