p5.brush（ジェネラティブアート）

p5.js 用のブラシライブラリ p5.brush（作者 Alejandro Campos／acamposuribe、MIT ライセンス）を Claude Code から使うためのスキルです。描きたいものを言葉で伝えると、p5.js 2.x と p5.brush v2 を CDN から読み込む単体の HTML ファイルを書き、ブラウザで開くところまで進めます。

p5.brush は、鉛筆・ペン・マーカー・木炭などのブラシ、水彩のような「にじみ」のある塗り、ハッチング（斜線の陰影）、線を有機的に曲げるベクトル場などを p5.js に足すライブラリです。このスキルの SKILL.md には、その API の要点と、WEBGL モードで動かすための決まりごと、すぐ使える作例（レシピ）がまとめて書かれています。

なお、p5.brush 本体はスキルではなく JavaScript ライブラリです（https://github.com/acamposuribe/p5.brush ）。このページで扱うのは、それを Claude Code から使えるようにした第三者（GitHub ユーザー progen）のスキルです。

SKILL.md の構成

SKILL.md は1ファイルだけで、付属スクリプトや参考資料はありません。フロントマターで name は p5-brush、user-invocable: true と argument-hint（例として「激しくにじむ水彩の荒れた海」）が指定され、/p5-brush に続けて描きたいものを書いて呼び出す使い方が想定されています。allowed-tools には Read・Write・Edit・Bash・Glob・Grep が並びます。

本文は大きく「ワークフロー」「出力テンプレート」「重要ルール」「API リファレンス」「レシピ」「デザインのコツ」の順に並んでいます。

進め方

手順は4段階です。利用者が描きたいものを説明し、Claude が p5.brush の API を使ったスケッチ入りの HTML を書き、./output/<分かりやすい名前>.html など適当な場所（利用者の指定があればそこ）に保存し、open コマンドでブラウザに表示します。open は macOS のコマンドなので、ほかの OS では開き方を読み替える必要があります。

出力の形

出力はいつも同じ骨組みの HTML です。jsDelivr から p5.js 2 系と p5.brush の 2.0.0-beta を読み込み、setup() の中で 800×800 の WEBGL キャンバスを作り、brush.load() で初期化し、原点を左上に移し、紙の色の背景を敷いて、randomSeed() で乱数を固定してから描画コードを書く、という流れです。静止画が基本で、draw() ループはアニメーションのときだけ使います。

重要ルール（11項目）

生成時に守るべき点が番号付きで並んでいます。主なものは次のとおりです。

• キャンバスは必ず WEBGL モードで作り、その直後に brush.load() を呼ぶ（p5.Graphics などに描くときは引数で切り替える）
• translate(-width/2, -height/2) で座標を左上基準にそろえる
• 角度は p5 の angleMode() に従うが、brush.addField() は既定で度数法
• brush.arc() は線だけで塗れない。brush.circle() と brush.rect() は線・塗り・ハッチングに対応
• 文字は p5 の text() ではなく、キャンバスに重ねた HTML 要素で出す（WEBGL ではフォント読み込みが不安定なため）
• 画像ブラシは Promise を返すので async setup() と await を使う
• 水彩の塗りは重いので、にじみの強い塗りは目安として50個程度までに抑える

API リファレンス

初期化（brush.load、scaleBrushes、インスタンスモード）、ベクトル場（hand・curved・waves・spiral など組み込みの場と、自作の場の登録）、ブラシの管理（2B・HB・2H・cpencil・pen・rotring・charcoal・spray・marker などの組み込みブラシ一覧と性格）、自作ブラシの定義（太さ・散らばり・粒・不透明度・間隔・筆圧などのパラメータ、自作の筆先、画像ブラシ）、線・塗り・ハッチングの設定、描画命令（直線、ベクトル場に沿う線、スプライン、円弧、四角、円、多角形、beginShape〜endShape）、クリッピング、Polygon・Plot・Position クラスまでが、短いコード例付きで整理されています。

レシピとデザインのコツ

「手描きの線」「水彩のしみ」「クロスハッチング」「ベクトル場に沿った線」「水彩で塗った円」、そしてライブラリ作者の作例をもとにした「ミクストメディアのグリッド」が用意されています。最後に、紙の色の例、薄い層から濃い層へ重ねる描き方、3〜5色に絞った配色、構図の取り方、大きなキャンバスでは brush.scaleBrushes() で線を太くすること、といった見た目を良くするための助言が並びます。

README に書かれている手順は、リポジトリをクローンしてフォルダを Claude Code のスキル置き場に入れる方法です。

git clone https://github.com/progen/p5-brush-skill.git
# シンボリックリンクで入れる
ln -s /path/to/p5-brush-skill ~/.claude/skills/p5-brush
# またはコピーで入れる
cp -r /path/to/p5-brush-skill ~/.claude/skills/p5-brush

~/.claude/skills/ に置くと全プロジェクトで、プロジェクト内の .claude/skills/ に置くとそのプロジェクトだけで使えます（Claude Code 公式ドキュメントの説明）。入れたあとは /p5-brush 木炭で描いた野の花、クリーム色の紙 のように呼び出します。

• ライセンス表記：README の末尾に「MIT」と書かれていますが、リポジトリに LICENSE ファイルはなく、GitHub 上のライセンス判定も出ていません。利用・再配布の前に作者に確認するのが安全です。
• ライブラリの版が古め：テンプレートは p5.brush の 2.0.0-beta を読み込みます。2026-11-08 時点の npm 上の最新は 3.0.0 で、その間に 2.x の正式版も出ています。新しい版の API とずれる可能性があります。リポジトリの最終更新は 2026-03-15 です。
• 初期化の扱い：コミット履歴によると、p5.brush の README では自動で初期化されるとされている一方、この CDN の版では brush.load() を呼ばないと塗りでエラーになったため、呼び出しを必須に戻したと書かれています。
• CDN 依存：生成される HTML は jsDelivr からライブラリを読み込むため、オフラインでは表示できません。
• 静止画が中心：アニメーション向けの手順は「今後追加予定」としてコミットで外されています。動画やアニメーションを作る用途は対象外です。
• macOS 前提の手順：ブラウザで開く手順が open コマンドで書かれています。
• 水彩の塗りを多用すると描画が重くなります。