メインページに戻る

• 概要 ← 今ココ
• PC[動画(p5.js)→色情報(RGB)]→MQTT→M5→LED
  • Step1 PC側（p5.js）：ブラウザ上で動画を再生する
  • Step2 PC側（p5.js）：ブラウザ上で動画を再生しつつ色情報を取得する
  • Step3 PC側（p5.js）：ブラウザ上で動画を再生しつつ色情報を取得し、MQTTでその色情報を送る
  • Step4 M5側：受信してLEDを点灯させる
• PC[動画(p5.js)→色情報(RGB)]-UDP→M5→LED
  • TCP (MQTT) と UDP の違い
  • Step5 PC側
    • Step5-1 PC側：中継サーバーの準備 (Node.js)
    • Step5-2 PC側：p5.js (sketch.js)
  • Step6 M5側：UDP受信 (step06_led_udp.ino)
• 課題

このページのゴール

「PCで再生する動画の色をリアルタイムで取得し、M5StickC Plus2のLEDを光らせるプログラムを完成させる。最終的には、全員のLEDを一つの動画に同期させて光らせる体験をすること。」

今日のねらい

• p5.jsを使って、動画の再生・色情報の取得・MQTTでの送信といった一連の流れを理解する。
• M5StickC Plus2を使って、Wi-Fi接続・MQTT受信・LED点灯といった制御の流れを理解する。
• MQTTが、PCとM5StickC Plus2をつなぐ情報の橋渡し役」してどのように機能しているのかを体験する。
• 全員で同時にLEDを光らせることで、複数のデバイスが同期する仕組みを実感する。

※ （念の為）本日の講義の様子をSNSなどでアップしないようお願いします。