TouchDesignerとHoloLensを繋ぐ

# [Tokyo BLOCKS Hakathon](https://tokyoblockshackathon.devpost.com/submissions)に参加しました
[HoloTone](https://devpost.com/software/holotone)というものを作りました。

BLOCKSという押し込みもできるマルチタッチデバイスのビジュアライズ的なものをやってみました。
ホロレンズ越しの画像ではMixedRealityな表現も。

![gif.gif](https://qiita-image-store.s3.amazonaws.com/0/96808/a4e26032-010b-c79c-0eb2-6044c68f4b48.gif)

# TouchDesignerとHoloLensを繋ぐ

これをVJライブパフォーマンス的には共有したいので、画面に出すのですが
そこにTouchDesignerでのエフェクト掛けてみたいなぁと思った次第。

## Mixed Reality Captureを使う

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/4ed64d09-11f5-d3ff-bc12-c1033816a38c.png)

HoloLenseにWebブラウザで直接アクセスすると
LivePreviewができます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/5de35c29-45a0-5bcb-bc3c-c3540e476af8.png)

これで画面がとれます。リアルタイムといっても１秒くらいラグがあります。

(Windows Mixed Realityだからもしかしてこれから出てくるデバイスとかでも使えるのだろうか？）

# 強引な繋ぎ方

TouchDesignerにはスクリーン画面キャプチャ機能があるので、
表示しているWebサイトをそのまま取り込んでしまった。

もっと良い方法があれば知りたいところ。

ScreenGrabのTOPを使って、キャプチャ位置をうまく調整

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/c7a1c51b-8a21-fe4a-c41b-dc3bde52c8c6.png)

## いけてない点（画面が狭くなる）
スクリーン画面キャプチャなので、作業領域が画面半分になり苦労したり。

![IMG_5017.JPG](https://qiita-image-store.s3.amazonaws.com/0/96808/2e0d9dc6-39f3-2a79-db16-78ecc3796a42.jpeg)
右側のマシンで、画面右半分がキャプチャのためにとってあるので、
TouchDesignerの画面は左側半分で作業するという感じになってた。

## いけてる点（複数接続や切断に強い＝弱い連携）
端末側でLiveViewができない時でも強く接続しているわけではないので、安定している。
デバイスとか握ってしまって別ハードと連携とかだと、1対1接続しかできないとか縛りが多いことがよくあるので、（開発上の理由でそうなっているのだろうけど）
こういうWebッブラウザのようなゆるい接続形式だから、たぶん複数台とかでも取り込めたりするかもしれない。（通信帯域的に間に合えば）
ハッカソンの会場のような、
接続が不安定だったり、ドライバが想定外（複数マシンから接続とか）な状態で復帰しないとかは使いづらいことになるので、
こういうゆるい接続はローテクながらありかもしれない。

余談ですが、
BLOCKSも複数もPCから接続したり、複数PCに状態を送ることはできない。
今回のハッカソンでは、Maxでホストマシン１台と接続してOSCで飛ばすことで複数マシンで処理できるようにしていた。

実際、BLOCKSの接続でMaxがよく落ちるけど、HoloLensやTouchDesigner側はその影響を受けずに済むことができた。
BLOCKSもデバイスIDとPortだけ指定してUDPで入力情報を飛ばすだけみたいな機能があればよかったかもしれない。
（これはUSBとかBluetoothの問題でホスト切り替わり時にマスターとかスレーブとかどう変わるとかわかりにくいし）
->これやろうとするとBLOCKSそれぞれにホストPCが必要になるので、小さいマシンとかたくさんあればできるのだろうか。

# 他に工夫した点

HoloLensのライブストリーミングは遅延（ラグ）があるのですが、
BLOCKSの操作はOSC経由で送っているのでほぼリアルタイムです。

リアルタイムの変化を加えることで、遅延感を感じさせないようにしています。
実際には遅延があるけど、変化がリアルタイムなので気づきにくくなります。

## MaxでBLOCKSのMultiTouchをOSCに変換
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/16202bd9-d31a-ca52-c62d-aa83f177fdf8.png)

ここではudpsendを使って 7600ポートにそれぞれの値を出力

## Select CHOPを使って変換
OSC　CHOPではblocks数字で　のフォーマットだったので、意味のある名前に変えて扱いやすくし

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/c1d77df6-c0b1-3047-7e2e-a84990f82460.png)

適宜フィルターとかいろいろ

## TouchDesignerでOSCを受け取る
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/11684cde-bdad-f753-66dc-b8a1d7ef77e0.png)

## あとは画面を歪ませたり、波形を重ねたり

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/294e4fe7-a8d0-3410-dd52-52193d9ca9aa.png)

OSCでとったxy座標と押し込み具合で
歪ませたり、円を表示する位置や大きさ色を変えたりして重ねています。

若干フィルターでなめらかにしたり、フィードバックをかけて残像感を出したりして調整しています。
Filter　CHOPを通したり、
パレットにあるFeedbackとか使うと見た目が良い感じになって楽しい。これで見栄えがすごく変わる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/6d7a102b-8811-a6f8-b2b5-0b15e44f83d9.png)

## 押した時の反応のためのカーブ
BLOCKSは強めに押し込むと結構な深さまで値が取れる　
で、強く押し込み続けるのは指に負担もかかるので、エフェクトが出やすいようにカーブかけてみたり。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/3c4cae9e-5317-c9f7-9e7f-b6073c06fa30.png)

を数式でわざわざ入れているのですが、CHOPでカーブとかの変換できないのかな？（なにかありそう）
カーブエディタみたいなのがあれば良いのだが。

歪ませている動画　http://www.youtube.com/watch?v=SjHBRmPdl6U
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/SjHBRmPdl6U/0.jpg)](http://www.youtube.com/watch?v=SjHBRmPdl6U)

調整するとかなりいい感じで、押し込んだフィードバック（触覚感）と画面の歪み具合が良い感じに（楽しい）。

# BLOCKS良いデバイスですね。

押し込みやマルチタッチ(15点までとれる）、LEDによる表示も簡単なので、
楽器やインターフェースのプロトタイプ作りとかに使えて便利。

複数繋ぐことで拡張もできるので、ちょっと足りないとかなら買い足せばなんとかなる感じ。

# ソースなど
https://github.com/tatmos/HoloTone

# [Tokyo BLOCKS Hakathon](https://tokyoblockshackathon.devpost.com/submissions)について

こういうAudio Developerの集まりって日本だとなぜかあまりない気がするので、
もっと流行って欲しい。
自作楽器とか音楽プログラムとか、発表やアイデアがとても面白いと感じました。

微力ながらちょっと宣伝　
[もくもく会](https://qiita.com/tatmos/items/6cb6941783826ce727d7)のようなものをやってます https://effectorhack.connpass.com/