Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ゲーミングソード?(100円ショップの刀をブロックプログラミングで光らせる) / Visual Programming IoTLT vol9

ゲーミングソード?(100円ショップの刀をブロックプログラミングで光らせる) / Visual Programming IoTLT vol9

Cd931bc05e7cee46b9a950a63e47ba4c?s=128

you(@youtoy)

October 28, 2021
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. ゲーミングソード?(100円ショップの刀を ブロックプログラミングで光らせる) 2021年10月28日 (木) ビジュアルプログラミングIoTLT vol.9 @オンライン   豊田 陽介 (

    @youtoy )
  2. 豊田陽介(@youtoy) 自己紹介 普段は、某通信会社勤務 自宅にたくさん ガジェット好き その他 IT系イベント主催、登壇や運営なども 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 Microsoft

    MVP(2021/10 から) ⇒ のびすけさんと同じカテゴリ
  3. 今日の話題は 「光る刀」

  4. ダイソーで 1本200円で 売られてるおもちゃの刀 もともと、4箇所くらい光る (音も鳴ったりする)

  5. 分解するとこんな感じに LED 4つがつながってたり、 スピーカー・スイッチ等も

  6. 派手に光らせてみる

  7. ゲーミングな光り方にしてみたり MakeCode for micro:bit で LEDテープを制御

  8. IoTでお馴染み「MQTT」を使い映像・音の連動 M5StickC Plus の処理は UIFlow、MQTT で PC の 表示と連動させた形 (PC側は

    JavaScript)
  9. 物理的な部分

  10. 以前からよく使っている LEDテープ 動画でも変化がよく分かる

  11. M5Stack社から出ている LEDテープ

  12. プログラム

  13. MakeCodeのほう(動画1つ目) セットアップ ゲーミングな 色になるやつ 光る LED の 数が変わるやつ

  14. UIFlowのほう(動画2つ目) 7つの色の指定 (RGBそれぞれ) 光る LED の数を 変化させる MQTTの セットアップ ボタン押下で

    Publish メッセージ受信で 処理を実行
  15. UIFlowを使ったほうの 機器構成

  16. M5Stackのコンテスト用に作った構成図 M5Stack Light Sword with Image Effects(光る剣とエフェクト)

  17. MQTTで両デバイスの処理の間をつなぐ M5StickC Plus のボタン押下 p5.js での アニメーション LEDテープを 光らせる処理

  18. 100円ショップグッズ、 他にも光らせてみた

  19. お化けのミニバケツ(ハロウィン向け) 良い感じに光を拡散させる グッズだという話@Twitter を見かけて

  20. MakeCodeでの実装内容 セットアップ ゲーミングな 色になるやつ 時間経過で色を 変化させる

  21. 【告知】 イベント・コンテスト

  22. 詳細はこちら 告知: ヒーローズ・リーグの VUI賞 「音声での入力・出力のどちらか、または両方が可能な作品」を  募集中! ⇒ 11/15 〆切 ヒーローズ・

    リーグについて VUI賞 について
  23. ビジュアルプログラミング交流会 再来週 11/2(火)19:30 から(視聴は YouTube にて)

  24. 終わり!