プロジェクト概要
I’m Upping My P(doom) には、Claude Code で Claude Opus 5.5 を使って生成されたミュージックビデオのソースコードが含まれています。完成した「I’m Upping My P(doom)」のミュージックビデオはYouTubeで視聴できます。
アニメーションは2世代にわたって制作されました。Claude Opus 5.5 の Medium 設定で作成された第1世代は、legacy/ に保存されています。第2世代がリポジトリの残りの部分を構成しています。
プロジェクトのドキュメントによると、リポジトリ内のすべてはモデルによって生成されました。クリエイティブディレクションでは、Clawd のキャラクターデザインを使用し、各歌詞に興味深いビジュアルとトランジションを与えることだけが指定されました。個々のシーンのアイデアは指定されていません。
アニメーションの仕組み
動画は9つのチャプターに分かれており、各チャプターに1つのソースファイルがあります。フレームは p5.js と p5.brush を使ってブラウザーページ上に描画されます。Node.js のレンダリングスクリプトがそのページをヘッドレス Chrome で開いてフレームをキャプチャし、付属の音声トラックとともに ffmpeg でエンコードします。
重要なファイルとディレクトリ
src/ch/には9つのチャプターファイルが含まれています。src/には、Clawd、ゲストキャラクター、小道具、歌詞、タイムラインの共有コードが含まれています。studio.htmlは、すべてのフレームを p5.js と p5.brush で描画するページです。render.mjsはヘッドレス Chrome でフレームをレンダリングし、ffmpeg を呼び出して MP4 を作成します。assets/pdoom.mp3は付属の楽曲です。STORYBOARD.mdには、モデルが生成したショットごとの計画が記載されています。ANIMATION_GUIDE.mdには、並列サブエージェント向けに作成されたスタイルとコーディングの指針が記載されています。legacy/にはプロジェクトの第1世代が保存されています。
前提条件
動画をレンダリングする前に、以下のツールをインストールしてください。
- Node.js：依存関係のインストールと
render.mjsの実行に使用します。 - Google Chrome：ヘッドレスブラウザーでフレームを描画するために使用します。
- ffmpeg：レンダリングしたフレームと楽曲を結合して MP4 にするために使用します。
Node.js と ffmpeg をコマンドラインから利用できることを確認してください。Chrome は、パスを明示的に指定する予定がない限り、Windows のデフォルトの場所にインストールされている必要があります。
プロジェクトをインストールする
リポジトリのルートでターミナルを開き、Node.js の依存関係をインストールします。
npm installリポジトリにはすでに assets/pdoom.mp3 として楽曲が含まれているため、記載されている手順で別の音声ファイルをダウンロードする必要はありません。
アニメーションフレームをレンダリングする
記載されているフレーム範囲と4つのワーカーを指定して、レンダリングスクリプトを実行します。
node render.mjs --frames=0:156.6 --workers=4これにより、動画のフレームが out/frames に描画されます。フレームのレンダリング処理は途中から再開できるため、ミュージックビデオ全体の生成に時間がかかる場合に便利です。
--workers=4 オプションは、4つのレンダリングワーカーを使用するようコマンドを設定します。この値を変更する場合は、お使いのコンピューターで利用可能なリソースに適したワーカー数を選択してください。
最終 MP4 をエンコードする
フレームのレンダリングが完了したら、付属の楽曲と結合します。
node render.mjs --encode --out=out/pdoom.mp4これにより ffmpeg がレンダリング済みのフレームと音声を結合し、完成した動画を out/pdoom.mp4 に書き出します。
カスタム Chrome パスを使用する
Chrome が Windows のデフォルトパスにインストールされていない場合は、レンダリングコマンドに --chrome オプションを追加します。
node render.mjs --frames=0:156.6 --workers=4 --chrome=<path to chrome><path to chrome> を Chrome 実行ファイルのパスに置き換えてください。
制作物を探索・変更する
まずストーリーボードを確認する
シーンを変更する前に STORYBOARD.md を読んでください。第1世代の後に作成されたショットごとの計画が記載されています。この計画では Claude に対して、P5 のブラシストロークを使用し、すべてのシーンを視覚的に興味深いものにし、各シーンから次のシーンへトランジションさせるよう指示されています。
アニメーションガイドに従う
プロジェクトのスタイルと実装のリファレンスとして ANIMATION_GUIDE.md を使用してください。Claude Opus が並列で実行したサブエージェント向けのブリーフィングとしてこのファイルを作成したため、チャプターファイル間の一貫性を保つうえで最も関連性の高いガイドです。
チャプターを個別に編集する
src/ch/ 内の9つのファイルによって、動画は扱いやすいセクションに分割されています。動画の特定の部分を変更する場合は、まず該当するチャプターを特定し、次に src/ 配下の共有タイムライン、歌詞、キャラクター、小道具のコードを確認してください。
両方の世代を比較する
legacy/ ディレクトリには、最初に生成されたバージョンが含まれています。これを現在のソースと比較すると、第2世代でビジュアルディレクション、P5 のブラシストロークに関する指針、シーンのトランジションがどのように発展したかを理解するのに役立ちます。
高度なワークフローのヒント
- 再開可能な出力を保持する: レンダリングされたフレームは
out/framesに書き込まれ、処理は再開可能なため、中断されたレンダリングを続行する際はこのディレクトリを削除しないでください。 - レンダリングとエンコードを分ける: エンコードコマンドを実行する前に、フレーム生成コマンドを完了させてください。これにより、最終エンコードを不必要に繰り返すことなく、時間のかかるフレームレンダリングを再開しやすくなります。
- 大規模な変更の前に共有コードを確認する: キャラクター、 props、歌詞、タイムラインの動作は
src/以下で共有されています。そこでの変更は複数のチャプターに影響する可能性があります。 - 他のプロジェクトには新しいベースを使う: 作者は、Claude Opus 5.5で新しいClaudeアニメーションを作成するための、より信頼性が高く汎用的な基盤としてClaudeAnimationBaseを推奨しています。
クレジットと参考資料
このプロジェクトは、Xへの投稿に着想を得ています。READMEでは、作者が確認できた範囲で、この曲の出典として2024年のYouTube動画を挙げています。
結論
このリポジトリでは、完成した生成アニメーションと、モデルによって作成された制作構造を完全に確認できます。Node.js、Chrome、ffmpegをインストールすれば、フレームをレンダリングし、付属の音声をエンコードし、ストーリーボードとアニメーションガイドを確認するとともに、9つのp5.jsチャプターがどのように組み合わさって最終的なミュージックビデオになるのかを詳しく調べられます。