TouchDesignerでネットワークトラフィックを可視化する #Node.js

はじめに

TouchDesignerのリハビリとしてtcpdumpでパケットキャプチャしてとれたものをパラメータにしてジェネラティブアートしよう!!と思い立ち色々やったのでそれを走り書きしてます。

概要

方法として

TD内のpythonからtcpdumpを叩く
外で叩いてwebsocketで取ってくる

の2パターンがありましたが前者は非同期処理書かなきゃいけなかったり、TDを起動しているPCからしか値が取ってこれないなどの制約があるので今回は後者のwebsocketを用いるパターンを使うことにしました。

前準備

今回はnodeを用いてwebsocket通信を行います。
よってnodeを使ってtcpdumpを叩く、結果をwebsocketでTDに渡す、と言う処理を書きます。

1点注意事項でtcpdumpはroot権限がないと叩けません。
nopasswordで実行させるため設定変更します。

sudo visudo

で自身のユーザの権限をパスワードsudo でのコマンド実行をnopasswordで実行できるように書き換えます。

[username] ALL=(ALL) NOPASSWD: ALL

こんな感じで書けば大丈夫です。

これで sudo tcpdumpがパスワードなしで実行できるようになります。

node側実装

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 8080});
wss.on('connection', function(ws) {
        while(1){
            var execSync = require('child_process').execSync;
            var  result =  execSync('sudo tcpdump -c 20').toString();
            var splited = result.split('\n');

　　　　　　　//時間当たりのパケット量の計算

            var splited_f = splited[1];
            splited_f = splited_f.split(" ");
            splited_f = splited_f[0]
            splited_f = splited_f.split(":")
            splited_f = Number(splited_f[2])
            var splited_l = splited[splited.length -2];
            splited_l = splited_l.split(" ");
            splited_l = splited_l[0]
            splited_l = splited_l.split(":")
            splited_l = Number(splited_l[2])
            var time = splited_l-splited_f
            rate = 20/time*10;
            console.log(rate)
            texts = String(rate);
      ws.send(texts);
        };
});

nodeで実装するのはtcpdumpを叩く、それをwebsocketで流すと言う機能です。
tcpdumpで20個のパケットを取得し最初に取得したパケットと最後に取得したパケットの時間差から時間当たりのパケット量を計算しています。

Touchdesigner側実装

いよいよTD側の実装です。今回は
Aleksandr Veshchevさんのパーティクルのチュートリアルをベースに実装してます。
チュートリアルの4:30あたりまでのものをベースに上のnodeで処理したパケットデータをパラメータとして渡していきます。

4:30までやってるとだいたいこんな感じの見た目になってると思います。ここから主にgeometoryCOMPの内部でwebsocketの値を受け取りparticleに反映、さらにlevelTOPへの反映を行っていきます。

まずgeometoryCOMPのなかに入ってwebsocketDATを作成したあと以下の画像のようにパラメータを変更してください。
変更点は主にNetwork Address と Network Portです。

そして次にDAT Executeを追加します。このDATExecuteでwebsocketで受信した値を他のノードに代入する処理を行います。

今回はdef onTableChange(dat):の中に以下の処理を加えています。

    texts = str(op("websocket1")[1,0])
    op("particle1").par.birth = texts
    op("constant1").par.value0 = float(texts)/100

１行目textsと言う変数にwebsocketで送られてきた値を代入しています。
2行目でtextsをparticleSOPのbirthに代入しています。
3行目でtextsをconstantCHOPに代入しています。

この時点ではConstantCHOPが存在しないのでこの階層でConstantCHOPを作成します。

そして最後にこのConstantCHOPの値を一つ上の階層のLevelTOPのbrightnessにExportします。

　実行

node側をローカルpcで実行し、その後touchdesignerのwebsocketDATでローカルpcのwebsocketサーバーへアクセスすることで実行できます。
すると以下のような画面が書き出されます。

あくまで自己責任での実行になりますが、nmapで自身のlanに向かってトラフィック負荷をかけると以下のようにパーティクルの数が増え、さらにパーティクルの色も白くなります。
絶対に自身のl(会社や)