TouchDesignerとNode-REDをWebSocketで連携するメモ

最近、少々TouchDesignerを触っておりまして、その流れでキリョウ(@_kiryo)さんからWebSocketまわりの相談に乗ってワイワイしていたところ、WebSocket DATを存在を知りました。これを使ってTouchDesignerとNode-REDをWebSocketで連携したらどうだろうというメモです。

今回の仕組み

image

今回の仕組みはTouchDesignerとNode-REDでそれぞれの持つWebSocketのフローを使ってメッセージの送受信を行います。

TouchDesignerでボタンを押すとNode-REDへメッセージが送られ、Node-REDからメッセージが送られるとTouchDesignerにログが残る仕組みです。

Node-REDのフローの作成(TouchDesignerへの送信側)

TouchDesignerの同じPCのNode-RED バージョン 0.17.4で制作していきます。

image

このように、injectノードとwebsocket出力ノードで構成します。injectノードから出力されたタイムスタンプデータをTouchDesignerへメッセージを送ります。

injectノード

image

injectノードは以下のように設定します。

image

ペイロードは日時(タイムスタンプ)を指定します。

websocket出力ノード

image

websocket出力ノードは以下のように設定します。

image

種類は待ち受け、パスは以下のように指定します。

image

パスは / (ルート)を指定し、ペイロードを送信/受信を指定します。

Node-REDのフローの作成(TouchDesignerからの受信側)

image

このように、websocket入力ノードとdebugノードで構成し、来たメッセージをデバッグメッセージで表示します。

websocket入力ノード

image

websocket入力ノードは以下のように設定します。

image

種類は待ち受けとして、パスは先ほどのwebsocket出力ノードで指定したルートパスのものをそのまま使います。

debugノード

image

debugノードは配置したままの設定でOKです。

設定が終わったらNode-REDでデプロイをしておきます。

TouchDesignerのフロー作成(Node-REDからの受信側)

TouchDesignerはバージョン099を使用しています。Node-REDからの受信するTouchDesignerのフロー作成を行います。

WebSocket DAT Operatorを配置

image

まず、WebSocket DAT Operatorを選択します。

image

WebSocket DAT Operator 配置されます。

WebSocket DAT Operator の設定

WebSocket DAT Operator の設定は以下のように設定します。

image

  • 名前
    • 配置されたそのままの websocket1
  • Activate
    • ONにする
  • Network Address
    • localhost
  • Network Port
    • 1880
  • Socket.io Format
    • Off

image

ActivateをONにするとNode-REDと接続開始

ActivateをONにしておくとNode-REDに接続をはじめます。

image

Node-REDでもconnect 1となるはずです。

動作させてみる

image

Node-REDのinjectノードにあるボタンを押すと通知が出ます。

image

TouchDesignerのさきほどのWebSocket DAT Operatorを見てみると、Node-REDから送られたタイムスタンプデータがならんでいます!

TouchDesignerのフロー作成(Node-REDへの送信側)

Node-REDへ送信するTouchDesignerのフロー作成です。

ボタンをつくる

image

まず COMP Button OperatorとCHOP Null Operator を配置して接続してボタン反応するようにしておきます。

image

DAT CHOP Execute Operator

つづいて、DAT CHOP Execute Operator を配置します。

image

DAT CHOP Execute Operator の設定で、CHOPをnull1に指定します。

image

これでCOMP Button OperatorとCHOP Null Operator のボタン類と関連付けられました。

image

DAT CHOP Execute Operatorのスクリプトも編集します。

def onValueChange(channel, sampleIndex, val, prev):
	op('websocket1').sendText("onValueChange " + str(val))
	return

onValueChangeイベントをwebsocket1に対してメッセージを送る関数を設定しています。

他のイベントはそのままです。

動作させてみる

image

ボタンをクリックするとON・OFF・ON・OFFとNode-REDにデータが送られます。

Node-REDの確認

image

Node-REDのこちらのフローが反応してデバッグウィンドウに表示されます。

image

Node-REDのデバッグウィンドウを見てみるとDAT CHOP Execute OperatorのonValueChangeで設定したメッセージが表示され、ONは「onValueChange 1.0」、OFFは「onValueChange 0.0」と値が変化していることが分かります。

フローもJSONで置いておきます。インポートして使ってみてください。

[{"id":"c5cb4da5.d62b8","type":"websocket in","z":"86eeff9.01781","name":"","server":"f971ebcd.d8ff98","client":"","x":134,"y":189.5,"wires":[["8c71ff1a.20254"]]},{"id":"8c71ff1a.20254","type":"debug","z":"86eeff9.01781","name":"","active":true,"console":"false","complete":"false","x":390,"y":253,"wires":[]},{"id":"e917ef79.39d1b","type":"inject","z":"86eeff9.01781","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":155,"y":41.5,"wires":[["b846cb85.c48948"]]},{"id":"b846cb85.c48948","type":"websocket out","z":"86eeff9.01781","name":"","server":"f971ebcd.d8ff98","client":"","x":399,"y":102.5,"wires":[]},{"id":"f971ebcd.d8ff98","type":"websocket-listener","z":"","path":"/","wholemsg":"false"}]

フローを使って複雑な動きを作り出すNode-REDとTouchDesignerをWebSocketでつないでみました。

TouchDesignerは3Dや映像をリアルタイムに動かすインタラクションの部分を担当し、Node-REDはIoTやサーバーデータのやり取りを受け持つといった分担するような仕組みが作れるかもしれませんね!

それでは、よき Node-RED & TouchDesigner Flow Editor Lifeを!