TouchDesignerとobnizをWebsocket連携してLチカしてみた

こんにちは。まつしたと申します。

TouchDesignerについてはTouchDesigner Study Weekend(以下TDSW)で初心者コースとarduinoコースを受講しただけの超絶初心者ですが、無謀にもAdvent Calendarに参戦しました！
普段は野良ハックチームという名前でIoT界隈でデモなどをしているので、IoT開発ボードとTouchDesignerの連携の話です。

obnizとは

IoTの開発ボードには様々な種類があり、新しいものも次々に発売されていますが、今回はobnizと連携してみます。他のボードと比べて以下のような特徴がありTouchDesignerユーザにも親和性が高いと思います。

• Javascript/Node.jsでプログラムが書ける
• obniz-idによるデバイス指定で配線不要でプログラムが書き込める
• ボードに付属のディスプレイ、ボタンで初期設定ができる

WebsocketでLチカ

ではさっそくTouchDesignerとobnizを連携させましょう。IoTの基本、LEDを光らせてみます。
方法はいくつかありますが今回はWebsocketを使います。obnizにはWebsocket APIとREST APIが用意されていてJSONで操作することができます。
https://obniz.io/spec/api
TouchDesingerにもDATにWebSocketオペレータがあるので、これを連携していきます。

obniz側の準備

クラウドに用意されているAPIと、全てのobnizに割り振られているobniz-idを使えばプログラム不要です。超便利ですね。

obniz本体にはLEDを直接挿します。(抵抗入りのLEDを使っています)
アノード(足が長い方)を0、カソード(足が短い方)を1に挿しています。

TouchDesinger側の準備

DAT WebSocket

WebSocketオペレータを用意し「Network Address」にobnizのWebsocket APIを入れます。ただしAPIはリダイレクトされるようで、リダイレクト先を指定しないとうまく動きませんでした。この辺りはenebularでobnizをLチカしてみたを参考にさせてもらいました。

Websocket API: wss://obniz.io/obniz/{obniz_id}/ws/1|
リダイレクト先1: wss://1.ws.obniz.io/obniz/{obniz_id}/ws/1
リダイレクト先2: wss://2.ws.obniz.io/obniz/{obniz_id}/ws/1
{obniz-id}には自分のIDを入れます

接続成功するとWebSocketのtableに以下のようなAPIからの応答メッセージが表示されます。

[{"ws":{"ready":true,"obniz":{"firmware":"1.0.12"}}}]


DAT CHOP Execute

CHOP Executeで値が1の場合にLEDを光らせる、0の場合には消すというプログラムを書きます。
obnizの準備でLED配線として0番にアノード、1番にカソードを挿したので、光らせる時にはio0にTrue、io1にFalseをioをコントロールするJSONとして送ります。これで電流が流れてLEDが光ります。消す時にはio0、io1ともにFalseとして電流が流れないようにします。

import json

def onValueChange(channel, sampleIndex, val, prev):
    if val == 1:
        op('websocket1').sendText(json.dumps([{"io0":True, "io1":False}]))
    elif val == 0:
        op('websocket1').sendText(json.dumps([{"io0":False, "io1":False}]))
    return

次にCHOP Null を用意して、CHOP ExecuteのCHOP欄にnull1を指定すると、Nullオペレータに入ってきた1か0を判定してLチカするようになります。

WebSocketの使い方は以下の記事を参考にしました。
TouchDesignerとNode-REDをWebSocketで連携するメモ

ボタン連携

まずはTouchDesigner上のボタンを押すとLEDが光るようにしてみましょう。
COMP Buttonオペレータを用意しNullと接続します。

ボタンを押すとLEDがついたり消えたりしました！

音楽と同期

次は音楽に同期してLEDを光らせます。
音楽と同期して3Dの箱が大きくなる部分は初心者用ワークショップで作ったものです。
Audio File InからTriggerで音が大きくなった瞬間を取り出して先ほどのNullに接続しています。

箱が大きくなるのと同期してLEDが光るようになりました！

おまけ TouchDesignerのデモTips

手元のデバイスを画面表示する方法

Lチカについてデモをする機会がTouchDesigner Study Weekend vol.12でありました。
プレゼンをしながらカメラ映像を共有をする方法は色々とありますが、開発画面を見せながらobnizのLチカを見せたく、Video Stream Inオペレータを使ってrtspで映像を配信して同一画面上に出すという方法を取りました。
映像ソースにはiPhoneをrtspサーバにして映像配信できるLiveReporterというアプリを使っています。

デモの時の映像はこちらです。（デモは3分あたりから）
https://www.youtube.com/watch?v=3XBNCjJLUA4

デモは微妙にうまくいっていませんが(笑) 画面左上にVideoStreamInを使って手元のobnizを表示しました。今見ると画面が小さくて見辛いので、今後は大きく映すなど工夫したいと思います。

明日はTDSW主催の@narumin256の記事ですね。楽しみです！