JavaScript、Canvas、Web Audioで素材不要のプロシージャル映像を作成

procedural-filmの仕組み

procedural-filmは、トピックを約30秒の縦型映像に変換するエージェントスキルです。画像、動画、音声ファイルを組み合わせる代わりに、各フィルムの映像はHTMLキャンバス上でバニラJavaScriptにより描画され、サウンドトラックはWeb Audio APIで合成されます。

完成したプロジェクトでは、自己完結型のHTMLプレーヤーとMP4を書き出せます。映像と音声はコードで生成されるため、フィルムにはメディアアセットが一切含まれません。

リポジトリには、examples/butterfly-lifeに完全なリファレンス制作例が含まれています。この作品は17ショットでオオカバマダラのライフサイクルを描き、120 bpmで32秒間再生されます。フレームは1080×1920の縦型で、フレームレートは毎秒24フレームです。

主な機能

• プロシージャル映像: すべてのピクセルをバニラJavaScriptとCanvasで描画します。
• 合成音声: すべてのサウンドをWeb Audioで生成します。
• アセット不要の配布: フィルムは個別のメディアファイルに依存しません。
• 縦型出力: リファレンスワークフローは、スマートフォン向けの1080×1920形式を対象としています。
• 複数の成果物: パイプラインはスタンドアロンのHTMLプレーヤーとMP4を書き出します。
• エージェントベースの制作: 並列サブエージェントが個々のシーンを作成し、複数回のクリティックウェーブでショットをレビューできます。
• 組み込み検証: 例には、レンダリング前に実行する6項目の品質ゲートが含まれています。

リポジトリ構成を理解する

リポジトリは、再利用可能なスキルと実例に分かれています。

• skills/procedural-film/にはエージェントスキルが含まれています。
• skills/procedural-film/SKILL.mdには、完全な制作パイプラインが定義されています。
• skills/procedural-film/foundation/には、新しいフィルムごとにコピーするエンジンとツールが含まれています。
• skills/procedural-film/templates/には、4種類の計画ドキュメント用テンプレートが含まれています。
• skills/procedural-film/reference/には、ショットタイプのインデックス、シーンと音楽のガイド、リファレンスフレームが含まれています。
• examples/butterfly-life/には、計画ドキュメント、ソースコード、ツール、HTMLプレーヤー、バタフライフィルム用のスマートフォン向けMP4が含まれています。

前提条件

スキルを使用する前に、次のソフトウェアをインストールしてください。

• Node.js 20以降
• システムのPATHから利用できるffmpeg
• Playwright用Chromium
• Claude Codeなど、スキルと並列サブエージェントをサポートするエージェント

Node.jsとffmpegが利用可能であることを確認します。

node --version
ffmpeg -version

procedural-filmスキルをインストールする

1. リポジトリをクローンする

git clone https://github.com/kuhnhomeuk-cell/procedural-film.git

2. スキルをエージェントにリンクする

クローンしたリポジトリを含むディレクトリから、Claude Codeのスキルフォルダーにシンボリックリンクを作成します。

ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film

シンボリックリンクを使うと、examples/butterfly-life/にある実例をスキルの横で利用できます。別の互換エージェントを使用する場合は、同じスキルディレクトリをそのエージェントのスキルフォルダーにリンクしてください。

3. 例のツール依存関係をインストールする

npm install --prefix examples/butterfly-life/tools

4. Playwright用Chromiumをインストールする

npx --prefix examples/butterfly-life/tools playwright install chromium

トピックからフィルムを作成する

スキルをリンクしたら、エージェントにテーマを指定してプロシージャルフィルムを作成するよう依頼します。例:

ミツバチの一生をテーマにしたプロシージャルフィルムを作成してください。

エージェントはskills/procedural-film/SKILL.mdのパイプラインに従います。制作は意図的に大規模です。ショットごとに1つのエージェントが1,000行を超えることもあるシーンファイルを作成し、その後、複数回のクリティックウェーブですべてのショットをレビューします。

長時間にわたり、多くのリソースを消費するエージェントセッションを想定してください。READMEには、完全なフィルムの制作でエージェントの利用プランを大きく消費する可能性があると記載されています。

バタフライのリファレンスフィルムを再構築する

同梱された例を再構築すると、Node.js、ffmpeg、Playwright、Chromiumが正しく設定されているかを確認できます。

1. 検証ゲートを実行する

node examples/butterfly-life/tools/check.cjs

check.cjsスクリプトは、プロジェクトの6項目のゲートを実行します。検証に成功すると、終了ステータスコード0で終了します。

2. MP4をレンダリングする

node examples/butterfly-life/tools/render.cjs

レンダラーは、生成された動画を次の場所に書き込みます。

examples/butterfly-life/exports/butterfly-life.mp4

3. スタンドアロンHTMLプレーヤーを再構築する

node examples/butterfly-life/tools/build.cjs

このコマンドでHTMLプレーヤーを再構築します。既存のインタラクティブプレーヤーはexamples/butterfly-life/dist/butterfly-life.htmlにあり、ダウンロードまたはブラウザーで開くことができます。

実践的な開発ワークフロー

1. まず、明確に定義したテーマから始め、そのテーマについて手順を説明する映像を作成するようエージェントに依頼します。
2. エージェントと並行して動作するサブエージェントに、計画ドキュメントとシーンファイルを生成させます。
3. 初回生成後に停止せず、批評ウェーブでショットをレビューさせます。
4. レンダリング前に、プロジェクトの検証チェックを実行します。
5. 報告された問題を解決し、チェックが正常終了するまで再実行します。
6. MP4をレンダリングし、自己完結型のHTMLプレーヤーを再構築します。
7. ブラウザでプレーヤーを開き、完成した縦型映像を確認します。

高度なヒント

リファレンス映像を制作目標として使う

想定されるプロジェクト構成と出力品質を学ぶ際は、examples/butterfly-lifeを確認してください。そこにある計画ドキュメント、ソース、ツール、レンダリング済みプレーヤー、書き出し済みのスマートフォン向け動画から、このスキルが生成する成果物を把握できます。

スタイルを変更する前に補足リファレンスを読む

reference/ディレクトリには、ショットタイプのインデックス、シーンのガイダンス、音楽のガイダンス、ビジュアルリファレンスフレームが含まれています。これらの資料は、エージェントパイプラインが行う判断の背景を提供します。

最終レンダリングの前に必ず検証する

render.cjsの前にcheck.cjsを実行してください。6項目のチェックゲートが正常終了したことを、最終MP4を生成するための前提条件とします。

時間とエージェントの利用量を見積もる

このパイプラインは、迅速な出力よりも詳細なシーン生成と繰り返しの批評を重視します。個々のショットファイルが1,000行を超えることもあるため、短い1回のプロンプトによる生成タスクのように、すぐに完了すると考えないでください。

スキルはコピーせずリンクしておく

シンボリックリンクを使うと、スキルをクローンしたリポジトリに接続したまま、バタフライのサンプルにも便利にアクセスできます。これにより、リポジトリ構成から切り離された別個のコピー済みインストールを作成せずに済みます。

まとめ

procedural-filmは、JavaScriptによる描画と合成音声だけで縦型映像を制作する、エージェント駆動の方法を提供します。スキルをリンクして必要なツールをインストールすれば、テーマを指定して映像を依頼し、生成されたシーンを検証し、MP4を書き出し、従来のメディアアセットをバンドルせずにスタンドアロンのHTMLプレーヤーを構築できます。

このプロジェクトはMIT Licenseのもとで公開されています。映像および編集面でのアプローチは、Kevin NgoのThe life of a fruit flyをモデルにしており、詳細はexamples/butterfly-life/docs/reference-analysis.mdに記録されています。