TouchDesigner＋M5StickC をつなげてみた

2020/03/24 ビジュアルプログラミングIoTLT vol.2 の登壇資料です。
https://iotlt.connpass.com/event/168320/

Transcript

1. TouchDesignerと M5Stick C つなげてみた まつした@野良ハック ビジュアルプログラミングIoTLT Vol.2
2. ・野良ハックチームでたまに活動
 
 ・趣味で電子工作
 
 自己紹介
 まつした ＠ 野良ハックチーム

3. https://norahack.booth.pm/ 技術書典 応援祭 参加中
 野良ハック本 Vol.3
 秋葉原Shigezone 委託販売（見本誌あり）
4. ひなチカ
 obnizブロックプログラミングでひな祭りをLEDチカチカ

5. IoTデータの表現
 Lチカ
 
 グラフ化
 
 ダッシュボード
 
 
 もっと豊かな表現を！

6. TouchDesigner

7. メディアアート＋IoT
 IoT
 デバイス
 
 現実世界
 センサ
 メディア
 アート
 
 映像、音楽
 ビジュアル
 プログラム
 
 プロトタイプ
 簡単

8. 構成図
 モーションデータ → MQTT 
 MQTT → カメラ映像加工 
 MQTT ← 音楽の音量 
 
 LEDで音量表示 ← MQTT 
 

9. UiFlow
 MQTT セットアップ モーション取 得してMQTT で送信 TDから送られ たMQTTデー タを元にLED を 光らせる
10. TouchDesigner
 MQTT セットアップ 音楽データか ら音量を取得 音量をMQTT で送信
11. TouchDesigner
 MQTT セットアップ M5StickCから 送られた MQTTデータ を取得 カメラ映像を 取得 MQTTデータ をRGB変換 エッジの映像 効果をかける
12. デモ

13. まとめ１
 ・ビジュアル化は楽しい！
 Lチカ、グラフ化、ダッシュボード、から可視化の向こう側 へ！
 ・TouchDesigner ＋ MQTT の記事は少ない！
 　みんなで試しましょう
 

14. まとめ２
 ・ビジュアルプログラミングは記事にするのが結構大変？
 画面キャプチャ、パラメータの説明、差分
 ・通常のコード　一部だけコピペ再利用が簡単
 ・ビジュアルプログラミングの記事が簡単に書けるQiita的なもの欲し い