インスタレーション作品「MELT」 試行錯誤な開発裏話

インタラクションデザイナーのMIZUTANI KIRIN (@mizutanikirin)です！普段はデザイニウムでKinectを中心にいろいろなセンサーを使ったインタラクションアプリ、体験型ゲームを作っています。

今回は普段あまり表に出さない、開発での試行錯誤の様子を作品「MELT」の技術的な情報と合わせて書いていきます。

MELTってどんなの？

「MELT」は自分を見つめ直す作品になります。今の自分を見つめ、溶かす。その後の自分との対面でどんな姿が見えるだろうか？それを体験してもらいたく作成しました。液体をスマホにかけると自分が溶けていきます。

技術的にどう実現したか？

当初、簡単にできるだろうと思っていたのですが、つまずきポイントが多く試行錯誤がありました。今回はその開発の流れを時系列で書いていきます。

はじめの構想ではRaspberry Pi zeroを使い感圧センサーで圧力感知したらOSCでスマホ(Android)に送信し、スマホ側で受信＋映像を下に流すというものでした。

これで実現できると思い開発を開始しましたが、最終的にはスマホで振動検知したあとにカメラの映像を下に流すといった実装になっています。

1. Raspberry Pi zeroで開発開始

開発開始早々つまづきました。以前使っていたRaspberry Pi zeroが起動しなません。いろいろ調べた結果SDカードが壊れているのがわかり、別のSDカードを用意してOSをインストールし直し解決しました。使っているうちにファイルにアクセスできなくなり、ついにはPCでSDカードが認識できなくなってしまった感じです。

プチ情報ですがVNCはこのVNC Viwerが便利でした。

2. 感圧センサーの接続

Raspberry Pi自体さほど経験がないため、Raspberry Piと感圧センサーの接続もわからず、検索頼りで4つほど回路図作成を試みていましたが、どれも動作せず。

結局、回路図などはこちら記事を参考に作成して解決しました。

3. スマホ台作成

このようなスマホ台を木で作成しました。基本的にはノミで溝を作ったり穴を掘っています。台はダクトレールに吊り下げ顔の付近になるように設置しています。

4. 「映像を下に流す」を実装

画面下に流すについてはMeshにテクスチャを貼り、Meshを伸ばしていく方法も検討しましたが、流体力学的な動きの方がベストだと判断し、流体力学の方向で進めていきました。

流体力学はAsset「StableFluids」を改良して作成しました。マウスに反応して流体的な事が起こるAssetなんですが自動的に垂れるようにスクリプトを変更し、各変数値も変更しました。

ちなみにAndroidだとPlayer設定(Project Settings > Player > Other Settings > Graphic APIs)が以下でないと動いてくれませんでした。

5. 大きな方向転換

大体の機能ができたので、テストで実際にスマホを置いて水を垂らしてテストをしてみました。

感圧センサーが反応しません。垂らした水が軽すぎなのかスマホ台とスマホの兼ね合いなのか、水でスマホが多少下に沈み感圧センサーが反応すると思ったのですがしません。

これはいろいろ試したりしましたが、作成時間がある程度限られており、このままやると時間がかかるので、スマホで振動検知したときに水が垂れたと認識できるんじゃないかと思い、ここで方向転換しました。

テストをした結果、実現できたのでその方向で以後進めていくことにします。以下テストの様子。

6. 振動検知の実装

ここから撮影当日まで、つまずきが少なく進めていけました。

振動検知はジャイロで以下のように一定振動があった場合、水が流れたと判別すると認識させています。(テストのコードを少し変更した程度です。)

private void VibrationCheckUpdate() {
  Vector3 acceleration = Input.acceleration;

  Vector3 difference = accelerationPre - acceleration;
  float differenceTotal = Mathf.Abs(difference.x) + Mathf.Abs(difference.y) + Mathf.Abs(difference.z);
  if (differenceTotal > differenceThreshold) {
	// 画面下に流す
  }

  accelerationPre = acceleration;
}

7. 液体の作成

液体は水そのものでなく、粘度がある液体にしたかったため片栗粉＋水、スライム、ローションの3パターンでテストをしました。その時の検証結果です。

片栗粉＋水
粘度もいい感じ。粘度の調整ができるのも良い。しかし色が白くなってしまい作品のイメージと違う。

スライム
色の変更は自由で良い。作成時に気泡が入ってなかなか取れない。気泡を取るのに1週間ぐらいかかってしまう。粘度の調整はできるけど調整が難しい。ということで気泡があると白濁してしまうというのと調整が難しいためこちらも却下しました。

ローション
透明で色の変更は自由。粘度の調整はある程度できるし、水混ぜるだけで調整も簡単。気泡は入るが気にならない程度。

ということでローションを採用しました。そのまま透明だと見にくいので少しポスターカラーで黒色にしています。

7まで作業を行い最終テスト＋最終調整＋撮影を行いました。以上が試行錯誤しながらの開発になります。

難しかった点など感想

初めての液体を使った作品というのもありますが、慣れないことが多く予想以上に時間がかかってしまいました。簡単にできるだろうと思っていたことができなかったりでその点は苦労しました。

上には書いていませんが、途中VisualStuidoが壊れてプロジェクト認識してくれなくなったり、普段起こらないようなトラブルが複数重なって辛い開発になった印象です。

最後にひとつ。今回、個人所有のスマホを使って作成しました。防水スマホということで問題ないと思っていたのですが、撮影が終わったあと1日経ってスマホが壊れましたw

水＋スマホのインスタレーション作品など作成する際は気をつけてください。

The Designium.inc
・Interactive website
・遊んで学んで
・Twitter
・Facebook

編集後記

広報のマリコです！今回は開発者の試行錯誤が全開の記事でR&Dの大変さを垣間見れました。開発中にちょっとしたつまづきが重なることも「あるある…」とうなずいた人も多いのではないでしょうか。今回の作品「MELT」はどうやって液体を認識しているんだろう？と動画を見たときから気になっていましたが振動検知だったんですね〜。自分が溶けていくのを見るのは不思議なカンジで、たしかに見つめ直す機会になりそうです。私も近々体験させてもらいたいと思います！