Opus 5で作った「カニ水槽」「ドミノ」「花火」

ブラウザで開くだけで動くHTMLを3つ作りました。カニが暮らす水槽、Clawdがドミノを並べる工房、そして花火大会です。どれもHTML1ファイルで、カニ水槽はライブラリごと埋め込んであるためオフラインでも動きます（ドミノと花火はフォントなどを読みに行くのでオンライン前提です）。
一応スマホでも動きます。また、すべてCowork経由で作成しています。

以下、GIFと一緒に簡単に紹介します。

1. カニ水槽

Three.js（WebGLの3Dライブラリ）のr128を丸ごとHTMLに埋め込んだ水槽です。カニが砂の上を歩き、餌を落とすと気づいて拾いに来て、手が空くと毛づくろいを始めます。カメラを速く動かすと動きを止めてこちらに向き直る、という反応も入れました。

これは一発で出てきたものではありません。動かしてみて変なところを指摘し、直してもらい、また動かす。この往復をかなりの回数繰り返しています。面白かった直り方を2つ書きます。

ひとつめは脚が伸びるバグです。歩いているうちにカニの脚がにゅっと長くなる。原因は逆運動学（関節の角度を目標位置から逆算する仕組み）の実装で、膝の位置は骨の長さを守って計算していたのに、脛を描画する部分だけが「届かない足首の目標地点」まで線を引き伸ばしていました。骨の長さが守られていたのは計算の中だけで、絵にするときに破られていたわけです。足首の目標を脚の届く範囲に収めることで解決し、修正後は36本の骨の長さが90秒間まったく変動しないことをテストで確認しています。

ふたつめは白飛びです。全体が明るすぎて、砂も水草も色が飛んで見える。照明を落としても解決しませんでした。原因は照明ではなく色空間でした。three.jsは自動的なsRGB変換（画面表示用の色を計算用の色に直す処理）をr152から標準で有効にしていますが、使っていたr128はそれ以前のバージョンです。sRGBのつもりで書いた16進数の色コードが、変換されずリニア値として扱われ、意図よりずっと明るく出ていました。公式のマニュアルにも「照明を増減させるだけでは解決しない」と明記されている、色空間まわりの典型的な誤りです。全マテリアルの色を convertSRGBToLinear() に通す形に直したところ、狙った色になりました（Claude談）。

このほか、砂と水槽の境界がチカチカする件（砂の下に敷いた土台の上面と砂丘の最低点がぴったり同じ高さで、2つの面が重なっていた）、餌を掴む瞬間にハサミがぐるんと回る件（手首を餌の位置そのものに置いていたため、向きを求めるベクトルが短くなって不安定になっていた）なども直しています。最終的に、症状ごとの回帰テストを含む検証スクリプトを3本用意し、直すたびに走らせる形になりました（Claude談）。カニを1匹泳がせるだけのつもりが、そこそこの開発になっています。

2. ドミノ工房 ― Clawdといっしょに

Clawd（Claude Codeのマスコットのカニ、これはいわば二次創作です）がドミノを並べてくれます。置ける本数には予算があり（甘め）、崖のふちギリギリや背の高いドミノを絡めて連鎖を成立させるのがコツになっています。

気に入っているのは、Clawdがたまに自分で倒すところです。低い確率で「あっ」という顔をして事故が起き、その後に救済が入ります。それと、失敗したときは並べたものを全消しにせず、倒れた分を立て直すだけにしました。全部消すのは酷なので。

3. 大花火大会

錦冠（柳）、環、型物の心、そしてClawdの形が出る型物まで用意した花火です。スターマインもあります。Spaceキーで打ち上げ、ドラッグで視点移動、ホイールで寄れます。

技術的に手間がかかったのは二段仕掛けです。星の動きはGPU側で計算して描画していますが、「上がって開いた星が、さらにもう一段開く」を実現するには、開く瞬間の位置をCPU側でも知っている必要があります。そのため同じ物理計算をCPU側にも持たせ、二重に走らせています（Claude談）。

ちなみに、水没は意図しないバグでしたが、これはこれでエモいので採用しています。