Slide 1
Slide 1 text
TouchDesignerと
M5Stick C つなげてみた
まつした@野良ハック
ビジュアルプログラミングIoTLT Vol.2
Slide 2
Slide 2 text
・野良ハックチームでたまに活動
・趣味で電子工作
自己紹介
まつした ＠ 野良ハックチーム
Slide 3
Slide 3 text
https://norahack.booth.pm/
技術書典 応援祭 参加中
野良ハック本 Vol.3
秋葉原Shigezone
委託販売（見本誌あり）
Slide 4
Slide 4 text
ひなチカ
obnizブロックプログラミングでひな祭りをLEDチカチカ
Slide 5
Slide 5 text
IoTデータの表現
Lチカ
グラフ化
ダッシュボード
もっと豊かな表現を！
Slide 6
Slide 6 text
TouchDesigner
Slide 7
Slide 7 text
メディアアート＋IoT
IoT
デバイス
現実世界
センサ
メディア
アート
映像、音楽
ビジュアル
プログラム
プロトタイプ
簡単
Slide 8
Slide 8 text
構成図
モーションデータ → MQTT
MQTT → カメラ映像加工
MQTT ← 音楽の音量
LEDで音量表示 ← MQTT
Slide 9
Slide 9 text
UiFlow
MQTT
セットアップ
モーション取
得してMQTT
で送信
TDから送られ
たMQTTデー
タを元にLED
を
光らせる
Slide 10
Slide 10 text
TouchDesigner
MQTT
セットアップ
音楽データか
ら音量を取得
音量をMQTT
で送信
Slide 11
Slide 11 text
TouchDesigner
MQTT
セットアップ
M5StickCから
送られた
MQTTデータ
を取得
カメラ映像を
取得
MQTTデータ
をRGB変換
エッジの映像
効果をかける
Slide 12
Slide 12 text
デモ
Slide 13
Slide 13 text
まとめ１
・ビジュアル化は楽しい！
Lチカ、グラフ化、ダッシュボード、から可視化の向こう側
へ！
・TouchDesigner ＋ MQTT の記事は少ない！
みんなで試しましょう
Slide 14
Slide 14 text
まとめ２
・ビジュアルプログラミングは記事にするのが結構大変？
画面キャプチャ、パラメータの説明、差分
・通常のコード 一部だけコピペ再利用が簡単
・ビジュアルプログラミングの記事が簡単に書けるQiita的なもの欲し
い