06
Work 06 — Interactive Art / Web App

実写素材でつくるインタラクティブ水槽システム

個人開発(企画・素材制作パイプライン構築・アニメーション実装・配布形式設計)

実写の魚や海草、サンゴを自由に配置し、自分だけの景観をつくれるブラウザ水槽です。配置した魚は水槽内を泳ぎ、ドラッグで移動、右クリックで削除できます。エサをまくと魚が最寄りの粒へ集まり、食べ終えると再び通常の遊泳へ戻ります。

魚の写真を縦方向のスライスに分け、尾に近い部分ほど変位を大きくすることで、体をうねらせる動きを表現しました。旋回時には体の厚みを考慮した擬似3D投影とし、海草やサンゴも根元を固定したまま先端ほど大きく揺らしています。背景には陽光、コースティクス、マリンスノー、気泡、ビネットを重ね、水中らしい奥行きを構成しています。

素材制作にはColab上のパイプラインを用意しました。Wikimedia Commonsからライセンス条件を満たす候補を収集・採点し、人が写真を選択した後、背景除去、傾き補正、品質チェック、動作パラメータ算出、マニフェスト生成までを自動化しています。公開用には画像を埋め込んだ単一HTMLと、Lively Wallpaper向けパッケージを書き出せます。

  • 魚・海草・サンゴの選択配置、ドラッグ移動、右クリック削除
  • 魚が餌の粒へ向かって集まり、捕食するインタラクション
  • 実写スプライトの分割描画による魚体のうねり表現
  • 体の厚みと旋回時のしなりを加えた擬似3Dターン
  • 根元を固定し、先端ほど大きく動かす海草・サンゴの揺れ
  • 陽光、コースティクス、マリンスノー、気泡による水中演出
  • 描画負荷の低下を検知する自動軽量モード
  • 素材収集から切り抜き、マニフェスト生成まで行うColabパイプライン
HTML5 Canvas JavaScript Python Google Colab Pillow rembg SciPy Lively Wallpaper
← Prev All Works Next →