コードで描くフィルム
このスキルは、フレーム f を (f, seed) から描画する1つのHTMLページと、同じように計算されたサウンドトラック、そしてMP4を生成します。フィルムのテーマ、見た目、動きはあなたが自由に決められます。このスキルが保持するのは、最初に書き留める「意図」、判断基準となる「審美眼」、そして完成したフィルムが意図を達成したかどうかを示す「チェック」の3つです。
セットアップ
新しいマシンで最初に bash assets/doctor.sh を一度実行してください。Chrome（または CHROME パス）、Node 22以降、ffmpeg、Python 3（numpyとPillow）がインストールされているか確認し、不足があれば修正方法を表示します。
1. 意図を書く
assets/intent.md をページと同じ場所に piece.intent.md としてコピーします。最初に「要点」と「感情」を記入します。つまり、初見の人が一度見た後に何を言えるようになるか、そして終わったときに何を感じるか、です。スケッチが選ばれるまでは残りの部分は空けておきます。なぜなら、最初にカードを書くことでアイデアが固定され、スケッチはそのルックだけを変更できるからです。これにより、元帳フィルムの3つのスケッチが、3つの異なる外見を持つ1つのアイデアになりました。
スケッチが選ばれたら、カードを完成させます。「判定」セクションでは、私たちが従うもの、この主題だけが提供できるポイント、ルックとその理由、テキストの有無と方法、学習元のギャラリーフィルム、そして終わりが始まりにどう応答するかを記述します。「計測」セクションでは、長さ、テンポ、サウンド、ビートを指定します。以降のすべての選択はこのカードに従います。作業中にカードが間違っていることが判明した場合は、カードを変更し、その旨を報告します。
2. ギャラリーで判断する
reference/gallery.md には、Claudeがすべてのフレームをコードで描いた29作品（音楽、説明、ストーリー、実験）と、好まれた作品に共通する特徴が記録されています。
- すべてのシーンを通して追跡できるものがある。
- すべての絵が何かを語っている。バリエーションのためだけにあるものはない。
- 始まった場所で、変化して終わる。
- 現在地を示すもの（ゲージ、カウンター、時計）がある。
- ルックは実際の素材であり、その欠点も含めて使用され、このストーリーのために選ばれている。
- サウンドと映像は一体である。
- テキストは稀で、大きく、世界の一部である。
- 視点と温かみがある。
- アイデアと同じくらい短い。
これらは「判断基準」であり、「ルール」ではありません。カードが理由を説明している場合は、一つを破っても構いません。reference/taste.md には、このスキルの作者であるKartikがスキル構築中に行った修正が記録されています。これは出発点としての味覚であり、あなたのものではありません。ギャラリーと意見が異なる場合は、その旨を述べ、フィルムの対象者に確認します。
3. 成果を検証する
納品ノートには、以下の3つのレイヤーすべてを報告します。
- 欠陥はビルドをブロックする。 ページはパース、実行、毎回同じフレームを描画します。カットでフレームが点滅したり飛び出したりしません。ミックスは -28 ～ -8 dBFS の間に収まり、クリッピングしません。
check.py、seamcheck.py、verify.py、build.shがこれらを強制します。 - 意図が計測される。
python3 assets/verify.py piece.mp4は、カードの「計測」セクションをチェックします。不一致がある場合は、フィルムまたはカードのいずれかが間違っています。どちらかを修正し、その旨を報告します。 - 視聴テストはあなたの責任である。 すべての数字を満たしていても、依然として品質が悪いことがあります。
verify.pyが出力する5つの質問に答えてください。初心者として語り直す、すべてのタイルに名前を付ける、音を消して見る、ギャラリーフィルムと並べて見る、最後のフレームを評価する。
lookcheck.py と soundcheck.py は決してブロックしません。テンポ、色、同期、ビートを説明し、あなたはそれらをカードと照らし合わせて読みます。
ワークフロー
各ステップには報告行があり、どのように行ったかを言わずにチェックを入れることはできません。
- 参考資料が共有された場合、まずそれを分解する。 クリップ、静止画、HTMLページのいずれでも構いません。
reference/references.mdを読んでください。それがどの形式か、何をするものか、どのギャップが埋められそうか、何を取り入れて何を残すかを報告します。 - 要点と感情を書く。 この2行だけです。報告します。
- 最も近いギャラリーフィルムを2～3本通して見る。 それぞれから何を取り入れ、何をコピーしないかを報告します。
- 3つの異なるストーリーを静止画としてスケッチする。 それぞれが異なる出来事であり、1行で語られ、同じアイデアを3つのルックで表現したものではありません。少なくとも1つは、図ではなく、視聴者が住める世界であるべきです。それぞれを、エンジンとプリント仕上げで完成時のルックで描画します。ワイヤーフレームでは決して描きません。スケッチは欠陥チェックをスキップしますが、技巧はスキップしません。
assets/sketchcheck.pyは、平坦なスケッチや、承認済みフレームを--refsで渡した場合にコピーと判断したスケッチを不合格にします。対象者に見せて、選んでもらうか、混ぜてもらいます。各ストーリーのラインを報告します。その後、カードを完成させます。 - 言葉があれば、それを書く。 1つの声で書かれた1段落を、コードの前に、
piece.chain.txtとして保存します。reference/story.mdの「声のように読める言葉」を読んでください。段落とその接続比率を報告します。 - 計画を立てる。 ビートを順番に、各絵が何を意味するかを1行で、現在地を示すもの、そしてエンディングを記述します。計画を報告します。計画は契約ではありません。
- ページを構築する。
assets/engine.htmlから始めるか、以下の契約に従って独自のページを書きます。各シーンを結合する前に単独で確認します。見直して描き直したものを報告します。 - サウンドを作る。 最初に
TUNEとSECTIONSでメロディを書き、次にストーリーの転換点となる4～8のアクセントを書きます。または、独自のpiece.score.py、ページが生成するpiece.wav、または無音を使うこともできます。score.pyが出力する楽譜と、なぜサウンドがカードに適合するかを報告します。 - ビルドする。
assets/build.sh piece.html out.mp4を実行します。先頭にROUGH=1を付けると、早期に見せるためのドラフトが作成されます。数値を報告します。 - 検証する。 3つのレイヤーすべてを報告します。
- 新しいファイルとして納品する。 最後のビルドを上書きしないでください。
1つのフィルムに2つのルック
フィルムは、リソグラフシーンとインクの元帳のように、2つのレンダラー間でカットすることができます。2つ目のレンダラーには独自のスコープを与え、プレートオプション { raw: (ctx, u, f, size) => {} } でそのアクトを描画し、そのカットを EXTRA_CUTS に配置します。assets/examples/parcel42-day/ がまさにこれを行っています。また、これはワークフロー全体の標準的な実例でもあるため、そのREADMEを読み、方法については参照しても、ルックをコピーしてはいけません。
ページ契約
この契約を満たすページは、ビルドと検証が行われます。const FPS = n を設定します。?capture=1 モードでは、window.__frames にフレーム数を設定し、window.__render(f) が毎回同じ方法でフレーム f を描画し、タイトルを capture ready N に設定します。スクリプトの最初の行は、エラーを document.title に書き込み、クラッシュが空白ページのように見えるのを防ぎます。
エンジン上に構築されたページは、?play=1、?f=N、?grid=1、?scene=id、?cuts=1 もサポートし、score.py は plate() からそれらのアクトを読み取ります。
ファイル
| ファイル | 説明 |
|---|---|
assets/intent.md | 意図カードのテンプレート |
assets/engine.html | オプションの開始点：フレームグリッド、アクトとショット、シーンライブラリ、ムーブ、リソグラフプレス、手書きペン、3つのデモワールド |
assets/score.py | ページのビートグリッド上で計算されたスコア、作品ごとのキー、ハーモニー、キット、スイング、エンディングを含む |
assets/build.sh | ゲート、キャプチャ、シーム、スコア、エンコード、計測、検証を1つのコマンドで実行 |
assets/verify.py | フィルムとその意図カードの比較、ラウドネスとクリッピングのチェック、視聴テストの質問 |
assets/check.py | ページゲート：パース、エラーハンドラ、モード、グリッド、レンダリング |
assets/seamcheck.py | フラッシュ、カットからの飛び出し、ムーブ内のジャーク、ドリフトする固定アンカーをチェック |
assets/sketchcheck.py | ストリースケッチ：平坦でない、承認済みフレームのコピーでない（--refs）、禁止ワールドでない（--world）、スタブが残っていないことをチェック |
assets/lookcheck.py、assets/soundcheck.py | 映像とサウンドの測定値。カードとギャラリーと照らし合わせて読む |
assets/printcheck.py | フレームが印刷されたように見えるか、計算されたように見えるかを、参照画像と比較してチェック。ワイドフレームを中央で正方形にクロップ |
assets/refpage.mjs | HTMLページである参照を分解：そのパレット、マーク、レイヤー、オーディオキットを描画中に抽出し、クリップチェックが機能するようにMP4も生成 |
assets/capture.mjs | CDP経由のフレームキャプチャ。build.shが呼び出す |
assets/capture-range.mjs、assets/capture-par.sh | 任意の幅と高さで、複数のChromeで同時にキャプチャ。16:9および1分以上の場合に使用 |
assets/doctor.sh | このマシンの準備状態を確認：Chrome、Node 22+、ffmpeg、numpy、Pillow |
assets/examples/parcel42-day/ | 承認されたフィルムのソースと、その構築方法に関するREADME |
assets/example-print-still.html | リソグラフ仕上げのモデル |
いつ何を読むか
各ファイルは1回の呼び出しで全体を読んでください。Codexの実行では、出力制限のもとで1回の呼び出しで3～4個のスキルファイルを読んでいました。その結果、gallery.mdの半分を含む、読み取りの途中から約13,000トークンを気づかずに失っていました。読み取り中にトークンが切り詰められたと表示された場合は、そのファイルを単独でもう一度読んでください。
- 意図カードの前、および何かを表示する前に、
reference/gallery.md、次にreference/taste.mdを読む。 - 参照クリップ、静止画、HTMLページが共有されたときに、
reference/references.mdを読む。 - ストーリーを計画したり、キャプションを書いたりするときに、
reference/story.mdを読む。 - 映像とサウンドが同じビートグリッドを共有するときに、
reference/time.mdを読む。 - トランジションやカメラを計画するときに、
reference/moves.mdを読む。 - ルックがリソグラフまたは印刷風のときに、
reference/press.mdを読む。さらにテクスチャを調整する前にreference/surface.mdを読む。 - 手書きを追加するときに、
reference/hand.mdを読む。 - サウンドを作るときに、
reference/sound.mdを読む。 - ビルドするときに、
reference/export.mdを読む。 - フィルムが1分を超えるときに、
reference/export.mdの最後を読む。 - フィルムがYouTube向けのナレーション付きレッスンの場合は、このスキルをベースにした
lesson-filmスキルを使用する。 - トラップ：これまでにこのスキルが破綻したすべての方法を、フェーズごとのチェックリストとして。カードとスケッチの前、および何かを表示する前に
reference/traps-story.md。ページを構築する前にreference/traps-page.md。ムーブ、カメラ、ビートグリッドを計画するときにreference/traps-motion.md。ルックが印刷風のときにreference/traps-print.md。サウンドを作るときにreference/traps-sound.md。最初の完全ビルドの前にreference/traps-build.md。
このスキルの変更
意図と判断を述べ、結果が意図と一致するか確認します。あるフィルムのスタイルをルールにしてはいけません。そうすると、すべての作品が1つの参照のコピーになってしまいます。教訓はそれを所有する1つのファイルに記述し、他のすべてのファイルはそこを1行で指すようにします。誰かが承認した新しいフィルムは、なぜ機能するかの理由とともに、ギャラリーの「私たちの作品」セクションに追加します。
借用と謝辞
フラットフィルプラスクリップ仕上げモデル、および wob、crayon、hatch、grain、dotScreen、scribble の形状は、alesha-pro（MIT、github.com/alesha-pro/tools）による hand-drawn-canvas-animation スキルから来ています。テクスチャはグラデーションではなく仕上げであり、シェイプの塗りつぶしとアウトラインが決して一致してはならないというそのルールが、このスキルの印刷ルックを実現可能にしたものです。
良い状態とは
初心者が一度見て語り直すことができ、その語りが要点の行と一致すること。コンタクトシートのすべてのタイルが、何かを意味する絵であること。ギャラリーフィルムの隣に置くことができ、そのコピーではないこと。最後のフレームで終わること。欠陥がゼロで、カードが一致し、そしてあなたがとにかく見たこと。