nzl153/paint-video-skill

手描きアニメーション動画

全体の流れ：各フレームは t（秒）の純粋関数 であり、ブラシで描画します（墨線、平坦塗り、水彩のにじみ、ハッチング）。ヘッドレス Chrome でフレームを並列に画像レンダリングし、ffmpeg で MP4 に合成します。例外は流体と砂絵で、画面にフレームを跨ぐシミュレーション状態があるため、頭から順次レンダリングする必要があります。画面内の画像は AI 生成ではなく、すべてコードで描画されています。

8 つのエンジン：

画風	エンジン	スタート地点
水彩、水墨（ハッチングで版画風も可）	p5.js + p5.brush、速度はカメラの複雑さに応じて変動大	ClaudeAnimationBase（MIT）
クレヨン、絵本、漫画	純粋 2D Canvas、1 フレーム 10–50ms	本リポジトリの crayon-kit/、crayon.md 参照
影絵、シルエット、舞台	純粋 2D Canvas、1 フレーム 2–10ms、銅鑼はコード合成	本リポジトリの piying-kit/、piying.md 参照
彩色水墨立ち回り（霧山五行風）	純粋 2D Canvas、1 フレーム 20–100ms	本リポジトリの inkfight-kit/、wushan.md 参照
解説動画（図解、字幕、ナレーション）	純粋 2D Canvas、1 フレーム 60–130ms、効果音はコード合成、ナレーションは edge-tts	本リポジトリの explainer-kit/、explainer.md 参照
版画シリーズ（孔版、銅版、青焼き、網点など）	SVG、1 フレーム約 1 秒、マルチ並列レンダリング；BGM は Tone.js + 実機材サンプル	本リポジトリの prints-kit/、prints.md、music.md 参照
流体インク（音符駆動、抽象的）	WebGL2 安定流体、1 フレーム約 65ms、順次レンダリングのみ	本リポジトリの fluid-kit/、fluid.md 参照
砂絵（ライトボックス透過、一枚を次に塗り替え）	WebGL2 高さ場、1 フレーム約 90ms 以上、順次レンダリングのみ	本リポジトリの sand-kit/、sand.md 参照
ノートの落書き（ボールペン、色鉛筆、写真の紙）	純粋 2D Canvas、ページ全体を事前にテクスチャとしてレンダリング、1 フレーム 2–10ms	本リポジトリの doodle-kit/、doodle.md 参照
同一点モンタージュ（画風リレー）	Node + @napi-rs/canvas で直接フレーム出力、ブラウザ不要	本リポジトリの montage-kit/、montage.md 参照

参考作品：PDoomVideo、2 分半の MV。Claude が Claude Code で生成しました。そのリポジトリにはライセンスがなく、学習のみ可能で、コードを公開することはできません。ClaudeAnimationBase は同じ作者が後から整理した MIT ライセンスのベースです。

環境

• このスキルは paint-video-skill リポジトリからのものです。文中の crayon-kit/、piying-kit/、inkfight-kit/、explainer-kit/、prints-kit/、fluid-kit/、sand-kit/、doodle-kit/、montage-kit/、examples/、tools/ はすべてそのリポジトリ内にあり、スキルディレクトリ内にはありません。ローカルに見つからない場合は、ユーザーにリポジトリのクローン場所を尋ねるか、再クローンしてください。
• Node v22.12 以上、Chrome または Chromium（見つからない場合は render.mjs に --chrome=<パス> を渡すか、環境変数 CHROME_PATH を設定）、ffmpeg が PATH に含まれていること。
• 字幕ツールは Python 3 と numpy、Pillow が必要。
• npm install はサードパーティコードをダウンロードして実行します。実行前にユーザーに確認してください。新規プロジェクトでは、既にインストール済みのテンプレートディレクトリを node_modules ごとコピーすれば、毎回インストールする必要はありません。

作業開始手順（水彩 / 水墨）

1. ベースをコピー して新しいプロジェクトディレクトリを作成します。out、docs、.git は除外します。Windows では robocopy <ベース> <新ディレクトリ> /E /XD out docs .git /XJ を使用します。終了コード 1 はコピー成功を意味します。
2. まず新しいディレクトリ内の ANIMATION_GUIDE.md を一読してください。 そこに完全なルールと API が記載されています：paint()、inkLine()、カメラ、トランジション、clawd() の全パラメータなど。ここでは繰り返しません。
3. まず STORYBOARD.md を書き、ユーザーの確認を得てからコードを書き始めてください。 フォーマットはガイドに従ってください：一言の概要、世界観と配色、一貫したモチーフ、感情の弧、ショットごとの「読みどころ」タイムテーブル。書く前に同じディレクトリの directing.md（監督マニュアル：画角、軸、編集ポイント、リズム、構図、演技）を読み、ショットリストはそのフォーマットに従い、最後にその末尾のチェックリストを確認してください。
4. src/config.js の長さと BPM を変更します。シーンは新しいファイル src/scenes/<名前>.js として作成し、IIFE でラップし、最後に shots([...]) を呼び出します。studio.html で demo.js の行をそれに置き換えます。
5. ショットごとに進め、1 つ完了するごとに以下のチェックループで確認します。
6. 出力：node render.mjs --clip --out=out/video.mp4。長尺の場合は --frames --workers=4 で並列レンダリングし、その後 --encode で合成します。

本リポジトリの examples/brush/ には、実行可能な完全な 2 つのシーンがあります：stars.js（『星を拾う』、14.5 秒、bpm 90）と ink.js（『落款』、水墨、16.8 秒、bpm 80）。これらを src/scenes/ に配置し、studio.html で demo.js を置き換え、config.js の長さと BPM を上記の括弧内の値に変更します。書き方の参考にのみ使用し、ストーリーはそのままコピーしないでください。

ベースに適用する 2 つのパッチ（render.mjs 内の 2 か所の ffmpeg パラメータと 1 か所の Chrome パラメータ）：

• 出力を標準 TV レンジに変更：'-pix_fmt', 'yuv420p' を '-vf', 'scale=out_range=tv,format=yuv420p', '-color_range', 'tv' に置き換えます。そうしないと一部のプレーヤーで真っ黒に表示されます。
• Windows のデュアル GPU ノートPC では --force_high_performance_gpu を追加します。そうしないと Chrome が内蔵 GPU で動作し、徐々に遅くなります。crayon-kit/render.mjs には既にこれらの 2 つの修正が含まれています。

最も重要なルール

全画風に共通

モデルがアニメーションを作成する際に最も間違いやすい点：

• フレームは t の純粋関数：フレームは順不同で並列レンダリングされるため、フレームを跨ぐ状態は持てません。Math.random() は使用できません。ランダム値はすべて時間と要素のインデックスから計算します。
• 純粋な 2D、3D 投影は行わない：奥行きは遮蔽、サイズ、色温度で表現します。
• 文字を書かない：画面内にラベル、看板、吹き出しなどは配置しません。伝えたいことは描画で表現し、emote（!、?、汗、電球）を使用します。MV の歌詞字幕は例外で、別レイヤーとして重ねます。方法は mv-workflow.md の字幕セクションを参照してください。
• 各ショットで 1 つの出来事が起こる、一度に視聴者に 1 つのことだけを見せ、原因があってから反応があります。
• 時間感覚が最も間違いやすい：視聴者は一度しか見ません。各「読みどころ」に、見つけて、理解し、一呼吸置く時間を確保してください。速いのはアクション、遅いのは意味です。初版はほぼ常に速すぎます。
• 全ての継ぎ目にトランジションが必要：開始と終了を含みます。唐突に始まったり、不意に終わったりしてはいけません。トランジションはストーリーに関連したものにし、毎回同じものを使わないでください。ただし立ち回りシーンは例外で、ショット間はアクションの途中で直接カットし、装飾的なトランジションは追加しません（wushan.md 参照）。
• キャラクターは大きく：1080p 画面での高さで、中景のキャラクターは画面高さの約 1/3–1/2、クローズアップの顔は画面高さの半分以上を占める必要があります。1/10 未満は遠景のエスタブリッシングショットのみに使用します。エンジンによってサイズパラメータの意味が異なるため、値を混用しないでください。

p5.brush 専用（水彩 / 水墨）

ベースの ANIMATION_GUIDE.md より：

• 固定ランダム値には hash(i) を使用し、線の揺れには jit() を使用します。各独立要素の先頭で boilSeed(key) を 1 回呼び出します。そうしないと、動いている要素が後続の静止要素すべてを連動して揺らしてしまいます。
• 全てブラシで描画：paint() と inkLine() のみを使用し、p5 ネイティブの rect、ellipse、fill() は使用しないでください。それらは 2000 年代の Flash のように見えます。
• 振り返りは、事前に描かれたいくつかのキーとなる視点の切り替え（turn()）で行います。
• clawd() の u：中景 20–28、クローズアップ 40–70、12 未満は遠景のみ。

クレヨンエンジンの API、ランダム値、キャラクターサイズは別のセットです。crayon.md を参照してください。

デフォルトの美的感覚

ユーザーからスタイルの指定がない場合、以下に従います。「紙と墨」を基調とし、低彩度の暖色、手作りの痕跡、控えめな動き。ユーザー自身のスタイル指示がある場合は、それを優先します。

配色：シーンファイルの先頭でパレットを上書きします。ベースのデフォルトパレットは彩度が高めです（空色、紫、ローズレッド）：

Object.assign(PAL, {
  paper: '#f7f2e6', cream: '#faf7f0', ink: '#2e2a24',
  clay: '#bb5f3c', clayDk: '#8f4428', clayLt: '#d98a6c',   // テラコッタ色；Clawd の体はこの色を使用
  sky: '#a9bfc4', sap: '#8a9a6a', ochre: '#c9a25a', teal: '#6f9590',
  rose: '#c98a8a', indigo: '#4a5670', night: '#262a38', violet: '#7d6f8f'
});

各作品では、ここから 3–5 色を選べば十分です。全てを使う必要はありません。色には物語に沿った弧が必要です。例えば、冷たく暗い始まりから暖かく明るい終わりへ。

質感：ベースには紙のテクスチャと粒状感が含まれています。そのまま残してください。ハッチングは版画風に適していますが、影や部分的な使用に留め、画面全体に敷き詰めないでください。

豊かさ ≠ 安っぽさ：

• 賑やかでも良い：1 つのショットに多くのものが動いていても構いません。これは「パフォーマンス型」の画面です。
• 安っぽくしてはいけない：埋め合わせのために紙吹雪、星、スパークルを撒かないでください。効果はストーリー上の要素である必要があります。例えば、星が落ちてくる、灯りがともるなど。
• セルフチェック方法：その要素を削除しても画面の意味が変わらないか？単に賑やかさが減るだけなら、削除します。
• 抑制 ≠ 空虚：余白には階層が必要です。画面には環境、前景・中景・背景、質感が必要であり、単に広い紙色の上に 2、3 の孤立したオブジェクトが配置されている状態は避けてください。1 つのショットで 1 つのことだけを見せますが、その出来事は生活感のある世界の中に置く必要があります。

筆致は手書きのように：キャラクターはガイドに従って平坦塗りと墨線で問題ありませんが、墨線は全体で同じ太さにしてはいけません。inkLine(pts, sw, colour, brush) の sw は遠近と主従で変化させ、細部は 'inkfine'、'dry' ブラシに切り替えます。背景や環境は水彩の fill、wash で乾湿の階層を描き分けます。全てが同じ太い黒線と平坦塗りだと、切り絵のようになります。

変わらない制約：各作品の冒頭で、作品全体を通じた不変項を 1 つ決めます。例えば、同じ構図位置、同じ形状、同じキャラクターのポーズなど。トランジションやマッチカットはそれを中心に行い、終わりは始まりと呼応させます。

音楽とリズム：ベースの全ては BPM に同期します。BGM がない場合は BPM を低め（80–100）に設定し、リズムを落ち着かせます。

テスト作品から学んだこと

『星を拾う』（examples/brush/stars.js）

Clawd が空き缶を抱えて落ちてくる星を受け止め、その星の光が夜を少しずつ温めていく。

• emote は手動でオフにする：ベースの excited、proud 表情は頭の横に自動で spark を発生させ、安っぽい装飾になります。emotions(t, [[0, 'excited', { emote: null }], ...]) でオフにします。!、?、ハートなど意味のある反応は残しても構いません。
• 「温める」を空全体の暖色置き換えで行わない：夜空のベースカラーを直接茶系に混ぜると、画面全体が土色になり汚れます。空は夜のまま、寒色のみを弱め（#4b4356 に混ぜる）、暖かさは地平線のぼかしや発光オブジェクトに置きます。
• 小道具は一目で識別できるように：暗い背景のガラス瓶を最初は灰色で描くと、ゴミ箱のように見えます。寒色系の明るいガラスに変更し、ハイライトを 1 本入れて認識できるようにします。
• 絞り（アイリスアウト）は 3 段階に分ける：最初に被写体に合わせ、一瞬止めてから閉じます。一気に 0 まで閉じると突然のブラックアウトのように見えます。
• Clawd の腕は非常に短い、頭上のものに届かず、掲げる動作は頭の上に乗せているように見えます。「抱える」動作は自分で描く必要があります。
• 実測速度：14.5 秒、348 フレーム、4 プロセス並列で約 6 分、1 フレーム約 1 秒（RTX 4060 ノートPC）、ffmpeg エンコード 10 秒。コンタクトシートは 1 フレーム 0.1–1.7 秒と非常に安価なので、何度も確認してください。

『露を借りる』（反面教師）

カタツムリが露を背負って、水を欲しがる苗を救いに行く。ルールは全て守っていた（文字なし、スパークルなし、パレット適切、キャラクター崩れなし）が、作品は成立しませんでした：

• ストーリーの状態変化は、一目でわかるほど誇張する必要がある：苗は最初から最後までほぼ同じ元気さで、「水不足でうなだれる → 水を飲んで元気になる」の対比ができず、作品全体に因果関係がありません。キーとなる状態の前後の 2 フレームを並べたとき、素人でも違いがわからないレベルでは不十分です。誇張するまで修正してください。
• ストーリーを動かす小道具は、少なくともキャラクターの頭くらいの大きさが必要：露がカタツムリの目よりも小さく、色も薄いため、殻に落ちると見えなくなります。小道具が小さい場合は、カメラを近づけるか、明るくするか、輪郭を追加してください。
• 絵コンテに移動と書いてあれば、画面は実際に移動しなければならない：絵コンテにはカタツムリが水を背負って根元まで歩くと書いてあったが、実際の移動量は非常に小さく、ほとんどの時間は静止画のように見えました。絵コンテと照らし合わせて「誰がどこからどこへ」を項目ごとに確認してください。
• 画面が空っぽ：作品全体に苗 1 本、カタツムリ 1 匹、葉っぱ 1 枚のみ。上記の「抑制 ≠ 空虚」を参照してください。
• トランジションには理由が必要：ストーリーと無関係な緑色の帯が画面を横切るのは、単なるハードカットのバリエーションに過ぎません。

書き終えたらセルフチェック：各ショットの最初と最後のフレームを並べて表示し、このショットで何が変化したか言えないなら、成立していません。イベントを拡大してください。

『落款』、水墨（examples/brush/ink.js）

• 画風を変えるには、パレットと描画方法を変えるだけでよく、ベースは変更する必要がない：作品全体で墨の 3 段階の濃淡と、Clawd の朱色のみを使用。「万墨叢中一点紅」は水墨の古典的な手法であり、Clawd がちょうどその一点紅になります。
• 墨がにじむ：形状の各点は、墨点から距離に応じて順次広がります（bloom()）。「形状全体がフェードイン」するよりも、墨が紙に染み込むように見えます。
• 水墨の階層：最初に薄い色の地を敷き、山の頂上に濃い墨を重ねて下に向かって薄くし、山裾に紙色の霧を重ね、遠くの山は視差でゆっくり動かします。
• 世界はキャラクターとともに、一筆一筆描かれていく：キャラクターが歩いた場所にだけ、葦、川、石が描かれていきます。出来事そのものが絵を描くことです。この方法により、各ショットの最初と最後のフレームに明確な変化が生まれます。
• 構図の制約は最終地点も考慮する：キャラクターが進む道を見えるようにするには、進行方向の後ろ側に立ち、最後は自然と画面のその側の角に落ち着くようにします。

第 2 の画風：クレヨン絵本

ユーザーが童心、絵本、クレヨン、漫画を求める場合、または水彩以外を希望する場合は、同じディレクトリの crayon.md を読んでください。このセットは p5.brush を使用せず、独自の 2D Canvas クレヨンエンジン（crayon-kit/）を使用します。水彩より一桁高速です。中身：エンジンの原理と API、キャラクターパラメータ、変身ギャグとコマ割り・コマ崩しの方法、クレヨン字幕、プローブを使った字幕の人物回避。

第 3 の画風：影絵

ユーザーが影絵、シルエット、舞台を求める場合、または歌なしで銅鑼だけを使った短編を作りたい場合は、同じディレクトリの piying.md を読んでください。エンジンは piying-kit/：各皮を個別に彫って透かし、それを光を通す幕に乗せます。キャラクターは操作レバー付きの関節人形で、銅鑼のタイミングは numpy で合成します。中身：エンジンの原理と API、キャラクターパラメータ、アクションを銅鑼のタイミングに合わせる方法、舞台裏の視点による鏡像とシルエットの輪郭光、シンセサイザー。

第 4 の画風：彩色立ち回り（霧山五行風）

ユーザーが立ち回り、武侠、アクションを求める場合、または霧山五行や彩色水墨を指定する場合は、同じディレクトリの wushan.md を読んでください。エンジンは inkfight-kit/：人物は毛筆の墨線と平坦塗り・影で描き、アクションはキーフレームを通る滑らかな曲線で動かし、足は単独で踏み込みポイントに合わせて動かし、インパクトフレームは反転と朱色を使用し、最後に火の墨が画面を埋め尽くします。中身：エンジンと人体の API、立ち回りの組み立て方（先に接触点を決めてから立ち位置を逆算し、probe.mjs で数値を確認）、カメラワーク、陥りやすい罠。

第 5 の画風：解説動画

ユーザーが解説動画、特定の発見や原理の説明を求める場合は、同じディレクトリの explainer.md を読んでください。ベースは explainer-kit/（『光で、脳を開く』、2026 年ノーベル賞オプトジェネティクス、3:05）。各場面で異なる画風を使用し、字幕、章、図解の注釈を許可。映像、効果音、ナレーションは共通の timeline.js を使用。ナレーションが映像より長い場合は、そのセンテンスの長さに合わせて該当部分の映像を引き延ばします。

第 6 の画風：版画シリーズ短編

ユーザーが素材感を求め、フラットでシンプルなスタイルではなく、版画、孔版、銅版、青焼き、網点などを指定する場合は、同じディレクトリの prints.md を読んでください。ベースは prints-kit/（『遠光』、93 秒、タンポポの種の 6 つの旅路）。中身：

• 地平線と光源は 6 場面固定、技法は場面ごとに変更。
• 6 つの技法それぞれの SVG の作り方。
• 固定乱数を使用して、フレームごとの再描画でちらつかないようにする方法。
• 映像に「物語」を持たせる 3 つの要素：主人公と仲間、一日の時間、鉛筆の書籤。
• 5 種類の場面転換の刷り方。
• マルチ並列レンダリング（各経路約 2–3GB メモリ使用、デフォルト 4 経路）。

第 7 の画風：流体インク MV（音符駆動）

常に動き続け、具体的なストーリーはなく、音楽に合わせて変化する MV を求める場合は、同じディレクトリの fluid.md を読んでください。ベースは fluid-kit/（『一滴の墨』、91 秒、クラシック + ロック）。WebGL2 安定流体、顔料は吸光度で色を重ねます。楽譜から音符テーブルをエクスポートし、各楽器は固定の描画方法を持ちます（ヴァイオリンは筆、バスドラムは衝撃、シンバルは開花）。各セクションは異なる「水性」を持ち、クライマックスの開花には 7 種類の爆発パターンが順に使用されます。人物は描画せず、カメラもなく、フレームは順次レンダリングのみ。

第 8 の画風：砂絵（ライトボックス透過、一枚を次に塗り替え）

小さなストーリーを語りたいが人物は描かず、画面は常に変化し、動的な PPT のように見せたくない場合は、同じディレクトリの sand.md を読んでください。ベースは sand-kit/（『砂時計』、75 秒、一粒の砂が見た一年、9 枚の首尾一貫した絵）。WebGL2 高さ場で砂をシミュレート：撒く、指でなぞる、手のひらで押す、安息角、砂のカーテン、平らにならす、三角のハイライト、月を開く。背後からの光は 3 チャンネルで別々に透過し、薄い部分は一粒一粒が透けます。ルールは、光が主役、トランジションは形状の継承、余白。映像を先に決めてから BGM を作成、60 BPM、1 拍 = 1 秒。フレームは順次レンダリングのみ。

第 9 の画風：ノートの落書き（ボールペン + 色鉛筆 + 写真の紙）

「紙」「ノート」「授業中の落書き」の感じを求め、主役が生きている落書きの生き物である場合は、同じディレクトリの doodle.md を読んでください。ベースは doodle-kit/（『頁辺』、38 秒、頁辺の小さな団子がペンの隙にひと回り）。ボールペンの線はインク切れを起こし、色鉛筆は斜めハッチングに紙の歯の粒状感、ページ全体は写真撮影時の光が入り、影のある実物のペンが写真感を支えます。生きているものの線は震え、止まれば紙に戻ります。ワンカットで、BGM はアクションに合わせて作成。後半には、この画風を使って曲に合わせたストーリー MV を撮影した経験も記載：人物は描かず、2 本のペンとスライドするノートで 2 人を演じます。

第 10 の画風：同一点モンタージュ（同じ形状が同一点に収まる）

多くの無関係な映像を高速カットし、最後に急停止、毎回同じ形状が画面の同じ点に収まるようにする場合は、同じディレクトリの montage.md を読んでください。ベースは montage-kit/（『一口』、25.8 秒）：ドーナツが画面を埋め尽くし、穴からカウボーイが馬で疾走、各拍で穴の中の画風が変わり、外側は 1 拍遅れて受け継ぎ、24 の画風がリレー、最後に一口かじる。連続アニメーションは、解剖学的に正確な共通の骨格に依存し、各画風は描画方法のみを担当します。別の打法である「一刀一世界」も記載されています。

自分で BGM を作成する

既存の曲がなく、短編用に BGM を作成する場合は、同じディレクトリの music.md を読んでください。Tone.js + 実機材サンプルを使用し、合成音色は使いません。中身：編曲のルール、機械的な印象を取り除く方法、VSCO2 管弦楽サンプルとそのオクターブ表記の落とし穴、音源変更後のラウドネス調整、ローカルサンプルキャッシュ、ヘッドレス Chrome でのオフラインエクスポートと 2 回のラウドネスノーマライゼーション、そして「拍」を使って映像と音楽を同期させる方法。クラシック + ロックの曲は別セクション：複数ベロシティの実ドラム（DRSKit）、ディストーションギター、トラック別エクスポート、そして自作の Python ミキシングコンソール（イコライザー、コンプレッサー、サチュレーター、コンボリューションリバーブ、セクションごとのラウドネス調整、リミッター）。

チェックループ（各ショットで必ず行い、省略しない）

コードを読むだけではアニメーションの効果はわかりません。必ずレンダリングして確認してください：

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/sheet.jpg        # コンタクトシート：各ショットの最初、中間、最後のフレーム
node render.mjs --strip=2.1:2.6 --cols=6 --w=320 --out=out/check/strip.jpg               # 連続フレーム：振り返り、ジャンプ、トランジション
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg     # 部分拡大：表情、手、接触点

コンタクトシートの ms/frame が全て 0 の場合、ページが何も描画していないことを意味します（ほとんどの場合、シーンファイルに構文エラーがあります）。まずターミナルの [page error] を確認してください。

画像ビューアで開き、項目ごとに確認：

• イベントが読み取れるか、キャラクターは十分に大きいか、背景と区別できるか。
• 瞬間移動や突然変異するフレームがないか。
• 体と支え：座る、立つ、寄りかかる動作には、脚を上げる、膝を曲げる、腰を下ろすという遷移が必要。体が物体にぴったりと張り付いて平行移動したり、重なったりしてはいけません。
• 手足の長さが変わらない：手を伸ばして物を取るとき、腕が伸びてはいけません。届かない場合は、キャラクターに近づかせるか、かがませてください。
• 振ったり、ひっくり返したりする小道具は、シーン内の物体を貫通してはいけません。
• 動作に予備動作とフォロースルーがあるか、左右対称に同時に動いていないか。
• 継ぎ目にトランジションがあるか。
• 文字がないか。
• 色が汚れていないか（黄色を青に重ねると緑になる。発光には glow() を使用）。
• 配色が決められた色調を守っているか。

パフォーマンスと既知の落とし穴（p5.brush）

• 再レンダリングはフレームファイルの有無のみを確認する：コードを変更して --frames を実行すると、既存のフレームはそのまま保持され、完成品に古い映像が混入し、エラーも報告されません。ベースの render.mjs はその仕様です。コード変更後は、まず out/frames を移動（削除はしない）してからレンダリングしてください。crayon-kit の render.mjs はフレームにコード署名を記録し、コードが変更されると停止して、--force（古いフレームを out/frames_old_* に移動）または --keep-frames（変更したショットを手動で移動済みの場合）を選択するよう促します。
• ページエラー：crayon-kit の render.mjs はページエラーが発生すると失敗終了します。ベースのものは [page error] を 1 行出力して通常通り画像を出力するため、自分で注意する必要があります。
• コンタクトシートはフレームごとの処理時間を出力します。目標は ≤1.5 秒/フレーム。水彩の fill が最も高負荷です。広い面積の形状には wash を使用し、fill は使用を控え、頂点数も少なくしてください。
• 専用 GPU がある場合、1 フレーム約 1 秒。明らかに遅くなった場合は、node gpu_probe.mjs <chromeパス> で Chrome がどの GPU で動作しているか確認してください。
• studio.html は Google Fonts から Permanent Marker フォントを読み込みます。これは letter() でのみ使用されます。文字を書かない作品では、その <link> 行を直接削除してください。ネットワークが不通の場合、読み込みで止まる可能性があります。
• ポイント座標に NaN が含まれる場合、エラーメッセージは Failed to construct 'OffscreenCanvas' となり、スタックトレースはシーンコードではなく NaN 自体を指すため、幾何計算をさかのぼって調査する必要があります。
• カメラを 2 倍以上に拡大すると、原点から遠く離れた長い線が 1 点に縮退することがあります。非常に長いエッジは inkLine で分割して描画してください。
• まれに 5 件の WebGL: INVALID_OPERATION 警告が表示されることがありますが、無害です。その他のページエラーは実際のエラーです。
• 大きな形状を fill のみで描画するとほぼ透明になる：遠くの山や水面など、横幅が 1000 ピクセルを超える形状を fill のみで描画すると、淡くて見えなくなります。まず wash（washOp: 255、色は薄く）で下地を敷き、その上に fill を重ねてにじみとエッジを表現してください。
• inkLine に 2 点のみを渡すと何も描画されず、エラーも出ない：直線でも 3 点以上を渡し、できれば少し起伏をつけて、より手書きらしく見せてください。さざ波、水面の跡、地面の短い線が最も影響を受けやすいです。
• 同じ形状を分割して描画しない：山の頂上の影の部分を分割して描画すると、重なり部分に縦方向の継ぎ目が現れます。全体を一度に描き、エッジの起伏は hash(i) で生成してください。
• inkLine を分割する際は、最後のセグメントの点数を確認する：スライス処理の最後に 1 点だけ残ると、spline() requires at least 2 points というエラーが直接発生します。

長編または MV

まず同じディレクトリの mv-workflow.md を読んでください：音楽分析、拍子駆動のショットリスト、パーツライブラリ、分割制作、部分レンダリング、部分修正、完成品のカラーグレーディング、歌詞字幕。

別のアプローチとして、メインエージェントが絵コンテとスタイル指示を作成し、章ごとに複数のサブエージェントに分割し、それぞれが自分の章のファイルを編集する方法もあります。ユーザーから要求がなければ、1 人で最初から最後まで行った方が、作品全体の統一感が増します。

歌詞のタイミング合わせ、オーディオビート分析については、paint-mv-skills（MIT、中国語）も参考にできます。

納品

• 納品物は out/video.mp4 です。コンタクトシートのスクリーンショットも添付してください。
• 報告時には 3 つのことを伝えてください：総尺、1 フレームあたりの平均処理時間、自分で確認して発見し修正した点。確認していない部分は、確認していないと明言してください。