【作品紹介】インタラクション作品tone color

2020年5月19日 15:07

インタラクションデザイナーのMIZUTANIKIRIN (@mizutanikirin)です！普段はデザイニウムでKinectを中心にいろいろなセンサーを使ったインタラクションアプリ、体験型ゲームを作っています。今回は自分が制作したインタラクション作品「tone color」の技術的実現方法についてご紹介します。

1. tone color

tone colorはMIZUTANI KIRINが制作したスマホとディスプレイを連携させたインタラクション作品です。

色と音との関わりは昔からあり、ニュートンが虹の色を7色と定義したとき音のレミソラシドレと結びつけたという話があります。また共感覚の人はドを赤、レは黄色のようにスペクトルで感じることがあるそうです。

その密接に関わる色と音。「身の回りのモノの音を聞けたらどんな音になるだろうか？」をテーマに作品を作成しました。

2. 技術的な仕組み

どういう仕組みで作品が作られているかを紹介していきます。使用機器/Assetは以下になります。

[使用機器]
- Windows10 Pro
- Azure Kinect
- Android端末
- Wifiルーター

[使用した外部Asset]
- KirinUtil
インタラクションアプリでコードを簡易化できるAsset
- Azure Kinect Examples for Unity (ver1.10)
Azure Kinectを簡単に使用できるAsset
- iTween
tweenのAsset

スマホ側でボールが落とされたらその個数分PC側へUDPで色情報を送り、ボールをPC側で落としています。ボールを落とす位置はAzure KinectのDepthで物体検知をしてスマホがどこの位置にあるかを判別しています。

3. Azure Kinectを使用した位置取得方法

Depthで塊(Blob)検出をして物体検出をしないといけないんですが、これはAzure Kinect Examples for UnityのDemo内にあるBlobDetector.csで簡単に実現ができます。しかし、そのままだとBlobの検出範囲/最大のBlobの大きさ指定ができなかったため改良して使用しました。改良点については長くなるためGitHubに公開しているReadmeを御覧ください。

他にFollowingManager.csにて検出BlobにIDを付けるScriptも使っています。ちなみにFollowingManagerはKirinUtilに導入予定のScriptになります。

上の図が物体検出時の画面になります。濃い青が指定範囲内でDepthカメラに写っている物体で、薄い水色が物体検出したい範囲、白い四角が物体認識しているものになります。

4. 使用したKirinUtilクラス/関数

KirinUtilはインスタレーション、Kinectやwebカメラなどを使用した体験型ゲームアプリを作成するときにコードを簡易化できる様々な機能が入ったユーティリティAssetです。ここでは具体的に作品で使用したKirinUtilのクラス、関数を紹介します。

4.1. PCアプリ側一覧

- UDPReceiveManager
スマホとの情報のやり取りに使用しました。

- Util.BasicSetting
解像度設定、カーソル非表示設定で使用しました。

- Util.file.OpenTextFile
xmlファイルの読み込みで使用しました。

- Util.sound
アプリ内で使用する音制御で使用しました。

- Util.GetUIPos
音がなったときに表示される円エフェクトの位置指定に使用しました。
▼の位置によって円を移動させるため。

- Util.GetSplitStringList
スマホから受け取ったボールの色情報(ffcc00,ff0033,...)をListに変更するために使用しました。

- Util.PosX
ボールを下に落とすときになる壁の位置Xだけを変更するのに使用しました。これを使うとコードが短くなります。

// デフォルトの書き方
ballWallObj.transform.position = new Vector3(ballPos.x, ballWallObj.transform.position.y, ballWallObj.transform.position.z);

// ↓

// Utilを使うと以下になりコードが見やすくなる。
Util.PosX(ballWallObj, ballPos.x);

- Util.media.CreateObj
ball prefabをScene内に作成するために使用しました。CreateObjを使うと位置、回転、大きさ、名前、親Gameobjectの指定が一括でできます。

- Util.media.HexToColor
スマホから受け取ったHex形式(例：#ffcc00)の色情報をColorに変換するために使用しました。

- Util.GetWorldPos
Kinectで取得した物体の位置をWorld座標に変換する際に使用しました。

- Util.net.GetLocalIPAddress
UDPで使用するIPアドレスを取得するために使用しました。

- Util.GetSplitIntList
スマホのIPアドレスの末番号をUDPで使用するポート番号にするために使用しました。例：スマホのIPが192.168.1.60だとすると

List<int> ipList = Util.GetSplitIntList("192.168.1.60", ".");
int sendPort = 6000;

// udpsendの初期化
// (sendPort + ipList[ipList.Count -1]) -> 6060
udpSendManager.Init(jsonData.ip, sendPort + ipList[ipList.Count -1]);

- Util.GetWorldMousePos
デバック用で画面をマウスクリックするとスマホを使わなくてもボールが落ちるようにしているのですが、その際にカーソルの位置をworld座標に変換してボールを上から落とすために使用しました。

4.2. スマホアプリ側一覧

- UDPSendManager
PCとの情報のやり取りに使用しました。

- Util.media.SetUISize
カメラのサイズをテクスチャのサイズにするために使用しました。

- Util.RoundToInt
四捨五入するために使用しました。Mathf.RoundToIntだと最も近いIntへと丸めるので四捨五入ではないため注意が必要です。

- Util.PosX
PCと同様にtransform.positionのコードを簡略化するために使用しました。

- Util.media.CreateObj
ball prefabをScene内に作成するために使用しました。

- Util.ShuffleArray
スマホでシェイクするとボールの位置をシャッフルできる機能があるため、ボール位置をシャッフルするために使用しました。

- Util.To360Angle
ジャイロの角度を計算しやすいように0～360度の間で変化するように使用しました。この関数を使うと例えば取得角度が-90度だったとしても270度にしてくれます。

- Util.GetSplitIntList
スマホのIPアドレスの末番号をUDPで使用するポート番号にするために使用。詳しくは上記PCアプリの方を見てください。

- Util.GetSeparatedString
PCに色情報を送る際にListに入っているHex色を「,」で区切ったstringに変換するために使用しました。

5. ソース公開について

今回たくさんの方にtone colorを使っていただきたいと思い、ソースを公開しました。自分なりの表現をプラスして作品をさらに良いものにしてもらえすと幸いです。

tone color (GitHub)
https://github.com/mizutanikirin/ToneColor

最後にデザイニウムで出たカスタマイズアイディアを紹介します。

玉同士の接触や床&壁との接触で音が鳴っても面白いかもしれないです（その場合は玉の数を制限した方が良さそうですが）。
https://youtu.be/mKK3sYxeZR4?t=70
逆▼のオブジェクトがピンボール的な感じで並んでて、玉が落ちていく間にそれっぽい演奏になると感動させやすいかもです（just idea）。

• 三角形の杯？の下にも数本棒や床を設置して反射時に音を出して複雑にする
• 暗い色はボールも若干大きくして、大きいボールは重く、反射率も低い、音程も低い。明るいボールはその逆でカラカラとよく跳ねて軽い音を出す
• 彩度を見て、スケール(音の並び)を変えてみるとかどうでしょう。渋い色の組み合わせだとマイナースケールで悲しげ、みたいな
というのはどうでしょう。ジャストアイデアですが！

子供向けに、出る音を楽譜通り順番に指定しておいて、ゆっくり上手に玉を流すと曲が聞こえるというバージョンも楽しそうかなと思いました！高速で走ってると段差が曲に聞こえる的な。（子供のおもちゃを見て思ったアイデア）

https://www.youtube.com/watch?v=hPpmpNGHAgI
スティールパンみたいな感じでボールが落ちる場所で音程が変わるとか鳴る楽器が変わるとかになると面白いかと思います。

ぜひカスタマイズして色々な作品を作ってもらえると嬉しいです。

編集後記

広報のマリコです。可愛らしいインスタラクション作品は癒やされますね😊今回の作品では、ミズタニキリン自身がつくった便利なユーティリティAsset「KirinUtil」も使用しており、記事でわかるようにたくさんの機能をKirinUtilで制作できていることがわかったかと思います。（私もビックリしました！）
こちらの作品はソースコードを公開しているので、ぜひカスタマイズして楽しんで頂けたらと思います❗みなさん楽しいアプリを作ってみてくださいね。

The Designium.inc
・Interactive website
・Twitter
・Facebook

この記事が気に入ったらサポートをしてみませんか？