Creative Coding / CASE 04 / 2026-09-24
Claude Opus 5.5 実測：4 つのクリエイティブコーディング課題、Web ページから完成動画まで
Claude Code 上で Claude Opus 5.5 に、3D 侍ゲーム、インタラクティブな流星群、クレヨン調の短編アニメ、ピクセルアートのメカアニメという 4 つの課題を任せました。どの課題でも、動く Web ページと、モデル自身が組んだ手順でレンダリングした動画を納品しています。
- Model
- Claude Opus 5.5
- Harness
- Claude Code
- Tasks
- 4 つの異なる課題
- Outputs
- Web ページ + 動画
EXPERIMENT SETUP / 01
課題と制作の進め方
4 つの課題は互いに独立していて、どれもブラウザで動く Web ページと動画を 1 本ずつ納品します。動画は画面録画ではなく、モデル自身が組んだコマ送りのレンダリング手順で書き出したものです。制作中、モデルはヘッドレスブラウザのスクリーンショットで画面を確認して自分で修正し、最後に制作記録を書きました。このページはその 4 つの制作記録をもとにまとめています。
逐語的な元の Prompt が残っているのは Ronin at Dusk だけです。ほかの 3 つの実験の要件は制作記録から要約したもので、Prompt の原文ではありません。このページでは原文を書き足したり推測したりしていません。
RESULTS / 02
4 つの課題、4 つの Web ページと動画
動画はモデルが組んだ手順で 1 コマずつレンダリングしたもので、クリックで再生できます。インタラクティブ版はモデルが書いた元の Web ページで、サイトの外枠なしで新しいウィンドウに開きます。
EXPERIMENT 01 / Three.js 3D アクションゲーム
Ronin at Dusk
夕暮れの神社の庭を舞台にした 3D 侍ゲーム。三段斬り、弾き、ガード、ダッシュ、波状に押し寄せる敵を備えます。キャラクターのモデルも効果音もすべてコードで生成し、外部素材は使っていません。
- Video
- 30 秒
- Resolution
- 1080p30
- Audio
- 音声あり
- Three.js r128
- WebAudio
- Chrome DevTools Protocol
- ffmpeg
インタラクティブ版は Three.js とフォントをネットから読み込みます。パソコンのキーボードとマウスでのプレイをおすすめします。スマートフォンの操作は実機で試していません。
インタラクティブ版を開くタスクの要件
- 3D 侍ゲームのデモを作る。元の依頼は 1 文だけで、原文は下に掲載しています。
- 追加：30 秒のデモ動画を収録する。
create a 3d samurai game demoモデルがしたこと
- 浮世絵調の配色という方向性を自分で決めました。鳥居の中に夕日が収まり、枯山水の砂地が闘技場になり、約 380 枚の桜の花びらが舞い続けます。
- 戦闘には三段斬り、0.24 秒の弾き受付、気を消費するガード、無敵時間つきのダッシュがあります。第 3 陣からは、軽い攻撃では止められない鬼武者が登場します。
- 動画ではスクリプトのボットが侍を操作します。戦い方は 3 回作り直し、描画しないシミュレーションモードで 12 個の乱数シードを比べて、第三陣まで進み弾きを 2–3 回決める 1 戦を選びました。
- 効果音は発生時刻だけを記録し、最後にオフラインの AudioContext で音声トラックにレンダリングします。音と映像はコマ単位で同期しています。
セルフチェックで見つけて直した点
- 刀身がほぼ真っ黒だった：映り込む環境マップがシーンになかったため、金属度を 0.9 から 0.35 に下げた。
- タイトル画面の侍がカメラに背を向けていた：最初からカメラの方を向くようにした。
- コマ送り収録中も CSS のバナーアニメーションが実時間で進み、動画より数倍速かった：毎フレームでアニメーションを止め、手動で 1/30 秒ずつ進めるようにした。
EXPERIMENT 02 / Three.js インタラクティブ 3D シーン
Starfall Ridge
山あいの湖に降る流星群。ドラッグで視点を回し、空をクリックすると流星が飛びます。ペルセウス座・オリオン座・しし座・ふたご座の 4 つの実在の流星群を切り替えられます。
- Video
- 10 秒
- Resolution
- 1080p60
- Audio
- 音声なし
- Three.js 0.160
- GLSL
- Puppeteer
- ffmpeg
インタラクティブ版は Three.js とフォントをネットから読み込み、WebGL2 対応のブラウザが必要です。性能の低い端末では動きが重くなることがあります。
インタラクティブ版を開くタスクの要件
- HTML と Three.js で、操作できる 3D の流星群シーンを作る。
- 星空の背景、流星のパーティクルの尾、地形表面のリアルタイムライティング、マウスドラッグでの視点回転（OrbitControls）を入れる。
- 追加：10 秒・16:9 の動画を書き出す。
モデルがしたこと
- 空のシェーダーで大気光、町の光害、天の川を描き、9,601 個の星を色温度と明るさで配置しています。地平線に近いほど暗くなります。
- 流星の尾には容量 36,000 の GPU リングバッファを使い、粒子の動きと冷えていく色の変化は頂点シェーダーで計算します。
- 常設の点光源 8 灯をライトプールにして、流星が通るたびに地形と湖面を照らします。灯数を固定しているので、Three.js がシェーダーを再コンパイルせずに済みます。
- 4 つの流星群は実際の突入速度と ZHR を使い、ページは訪問した日付から見て次に来る流星群を初期表示します。
セルフチェックで見つけて直した点
- 動画に大きな黒い四角がときどき出た：シェーダーが負の数に pow() を使い、Metal で NaN になったものをブルームが四角く広げていた。clamp を入れて直し、Web ページにも同じ修正を入れた。
- 画面が明るすぎ、火球が昼間のようだった：点光源の強さと火球の明るさを全体に下げ、火球は放射点から離れた場所に出して長い軌跡を描くようにした。
- 木が湖を隠し、放射点のマーカーがタイトルに重なっていた：湖岸と視線の通り道の木を取り除き、放射点を画面の中央上寄りに移した。
EXPERIMENT 03 / Canvas 2D クレヨン調ショートアニメ
Baking Time
30 秒のクレヨン手描き風アニメ。Opus 5.5 をモデルにしたオレンジ色のキャラクターが、まばたきするケーキを焼き上げ、最後に自分でサインを書きます。画面はすべてコードでプロシージャルに描いています。
- Video
- 30 秒
- Resolution
- 1080p30
- Audio
- 音声なし
- Canvas 2D
- Chrome DevTools Protocol
- Python
- ffmpeg
元の動画の音楽は商用レコードで、公開用のライセンスがないため、このページの動画とインタラクティブ版はどちらも無音です。
インタラクティブ版を開くタスクの要件
- テーマは「Baking Time」、長さ 30 秒のアニメ。主役は参考画像の Opus 5.5 キャラクター。
- 楽しく、かわいく、魅力的に。最後は Opus 5.5 のサインで締める。
- 合成音声は使わず、ローカルディスクで見つけた音声素材だけを使う。
- 途中の確認なしで一度に完成させ、X に投稿する。
モデルがしたこと
- 参考画像からキャラクターの比率を測りました。クレヨンの質感、紙の地紋、手描きの線の揺れはすべて Canvas 2D でプロシージャルに描き、画像素材は使っていません。
- ローカルの音声を探して曲を選び、曲の 1 拍ごとのビート表に合わせて絵コンテを組みました。映像と 81 個の効果音キューが 1 つのタイムラインを共有します。
- 制作中は試聴できないため、各効果音のエンベロープ、立ち上がりの時刻、主な周波数を計算し、それをもとに選んで位置を合わせました。
- サインが「書かれていく」表現：画面外に描いたサインを列ごとに調べてインクの重心を求め、クレヨンの先の軌道と速度にしています。
セルフチェックで見つけて直した点
- ケーキ型を手からオーブンへ渡すときに位置が飛んだ：始点をキャラクターのポーズからその場で計算するようにした。
- 湯気のトランジションで真っ白な時間が約 0.75 秒続き、お披露目のテンポが落ちた：約 0.35 秒に縮めた。
- 250 ms の区間で測ると、多くの効果音が音楽より 12–30 dB 小さかった：測定結果に合わせて全体のゲインを上げた。
EXPERIMENT 04 / Canvas 2D ピクセルアニメーション
Plasma Lance Mech
ピクセルアートの SF メカが、チャージ、プラズマビームの発射、排熱、復帰をループで繰り返します。外部リソースに一切頼らない単一の HTML ファイルです。
- Video
- 30 秒
- Resolution
- 1080p60
- Audio
- 音声なし
- Canvas 2D
- Node.js vm
- ffmpeg
インタラクティブ版の初期表示は 4:3 の画角です。URL の末尾に #wide を付けると、動画と同じ 16:9 の画角に切り替わります。
インタラクティブ版を開くタスクの要件
- 素の JavaScript と Canvas 2D による自己完結した単一の HTML。外部素材、ライブラリ、ネットワーク通信は使わない。
- まず 128×96 のオフスクリーンキャンバスに描き、整数倍で拡大する。描画はピクセルに揃え、アンチエイリアス、グラデーション、shadowBlur は使わない。
- 約 24 色の固定パレットで、約 28×36 ピクセルのメカをプロシージャルに描く。
- 待機 → チャージ → 発射 → 冷却を繰り返すステートマシン、割り当てのないパーティクルプール、60Hz 固定の更新。
- 追加：30 秒・16:9 の動画を書き出す。
モデルがしたこと
- 描画は「パレット番号」のフレームバッファに書き込むので、パレット外の色が構造上出ません。発光と影はリマップ表と 4×4 の Bayer ディザで表現しています。
- ポーズのパラメータは毎 tick イージングしますが、整数に丸めて取り出すのは 5 tick ごとです。これで 12fps のピクセルアニメらしいテンポになり、ビームとパーティクルは 60fps のまま更新されます。
- 16:9 の動画用に 160×90 の画角を追加し、点滅するライトの周期をすべて 1,800 tick の約数にそろえて、30 秒の動画が継ぎ目なくループするようにしました。
- ページのスクリプトを Node の vm で直接動かしてコマ送りし、30 秒・60fps の動画を約 6 秒でレンダリングします。
セルフチェックで見つけて直した点
- チャージ中の電弧がシアンの線の塊に見えた：揺れの幅、半径、出現確率を下げた。
- ミサイルポッドの赤い弾頭が頭の隣にあり、赤い目のように見えた：暗色の発射管に変えた。
- アームキャノンに「重量級」らしさが足りなかった：外装を 7px から 9px、砲身を 3px から 5px に太くした。
- ヘッドレス Chrome の仮想時間では requestAnimationFrame が進まず、スクリーンショットがすべて最初のコマになった：指定した時刻まで update() を直接呼んでから描画するようにした。
OBSERVATIONS / 03
4 つの実験で繰り返し見られたやり方
どの課題も「コードを書き終えた」ところでは止まりませんでした。モデルは自分で画面を確認し、問題を突き止めて直しています。マシンにツールがなかったり、レンダリングに制約があったりしたときも、別の方法で最後までやり切りました。以下は 4 つの制作記録から拾ったもので、人による試遊や専門家のレビューは経ていません。
- 01
4 本の動画はどれも画面録画ではありません。モデルがページの時計と乱数を乗っ取り、1 コマずつ進めてスクリーンショットを撮り、ffmpeg でエンコードしています。そのため、同じパラメータならまったく同じ動画を再現できます。
- 02
モデルはキーフレームを並べたサムネイル一覧で自分の出力を確認し、見つけた問題を直しました。Starfall Ridge では Metal 上で pow() が NaN を返して生じた黒い四角を、Plasma Lance Mech では「赤い目」に見えるミサイルポッドを、Baking Time では型を持ち替えるときの位置飛びを直しています。
- 03
ffmpeg や Homebrew がマシンにないときは、npm パッケージ ffmpeg-static や Python パッケージ imageio-ffmpeg に同梱の ffmpeg に切り替えました。ffmpeg でデコードできない音声形式に当たったときは、macOS 標準の afconvert を使っています。
- 04
1 回の出力が長すぎると途中で切れます。Plasma Lance Mech ではページ全体を一度に出力しようとして失敗し、その後は同じファイルに 4 回に分けて書き込みました。
- 05
限界：ゲームの手触りと難易度は人による試遊を経ていません。Baking Time のミックスは測定値をもとに調整したもので、制作中に誰も試聴していません。
KEEP EXPLORING