M5Stack Light Sword with Image Effects（光る剣とエフェクト）

ダイソーで売っているおもちゃの剣を光らせたり、剣を光らせる前に映像エフェクトをつけてみたりしました（デバイスは M5StickC Plus を利用し、PC映像との連動には MQTT を使っています）

動画

開発素材

ツール

p5.js

UIFlow

デバイス

M5Stack

M5StickC Plus

NeoPixel

システム構成

（英語の説明の後に日本語の説明を書いています）

[Outline of the work]
I use RGB LED Strip to make a toy sword from 100 yen stores glow, and I add visual effects and play sound effects before and during the glowing of the sword.

A camera image of myself and a sword glowing with LED stripe is displayed on the website, and video effects and particle drawing using JavaScript are superimposed on the camera image on the website in real time (and sound effects are also played).

This work is made using a toy sword and the following devices, modules, development environments, technologies, libraries, etc.

[devices and modules]

• M5StickC Plus
• SK6812 Digital RGB LED Strip
• PC

[Sound effect data]
Free sound data available on the website "魔王魂"

[development environments, technologies and libraries]

• UIFlow (Control of LED tape, communication by MQTT, etc.)
• HTML and JavaScript (Processing around screen drawing, communication via MQTT, etc.)
  • p5.js (Drawing camera images and effects on the screen, and playing sounds)
  • MQTT.js (Real-time communication between M5StickC Plus and PC)
• shiftr.io Desktop (MQTT broker)

The flow of operation of this work is as written below.

1. When button A on the M5StickC Plus is pressed, send a message to the MQTT broker (Publish).
2. When the message written in above is received by the PC (Subscribe), the following video effects are drawn and sound is played.
   1. A transparent black layer is superimposed on the camera image (the camera image will be dimmed).
   2. Play sound while drawing particles in real time on the above transparent black layer.
   3. After the above particle drawing animation is complete, send a message to the MQTT broker.
   4. Make the color of the above dim layer completely transparent, and play a different sound than the one played above.
3. Make the LED tape glow in rainbow colors when the message sent from the PC above (via MQTT broker) is received by the M5StickC Plus.

【ここから日本語の説明です】

この作品では、LEDテープで光らせることができる刀と自分自身をうつしたカメラ映像が、Webサイト上に表示されています。そして、その Webサイト上に表示したカメラ映像に、JavaScript を使って作った映像エフェクト・パーティクルをリアルタイムに描画・重畳している、という仕組みです。

これを実現するために、ダイソーで売っているおもちゃの刀と、以下のデバイス・モジュールや開発環境・技術・ライブラリ等を使って作っています。

【デバイス・モジュール】

• M5StickC Plus
• M5Stack用NeoPixel互換 LEDテープ
• PC

【開発環境・技術・ライブラリ等】

• UIFlow（M5StickC Plus での LEDテープの制御や MQTTによる通信等）
• HTML＋JavaScript（画面の描画周りの処理や MQTT による通信等）
  • p5.js（画面上へのカメラ映像・エフェクトの描画、音の再生）
  • MQTT.js（M5StickC Plus と PC の間のリアルタイム通信）
• shiftr.io Desktop（MQTTブローカー）

【音のデータ】
魔王魂さんがフリー素材として公開されている効果音のデータを利用させていただいてます。

動作の流れは以下の通りです。

1. M5StickC Plus のボタンA が押された時、MQTTブローカーにメッセージを送る（Publish）
2. 上記1 のメッセージが PC で受信された際に（Subscribe）、以下の映像エフェクトの描画・音の再生を行う
   1. カメラ映像が表示されている上に、透過処理された黒いレイヤーを重畳表示（カメラ映像が薄暗くなる）
   2. 上記1 のレイヤーの上にパーティクルをリアルタイムに描画しつつ音を再生
   3. 上記2 の描画が終わったら、MQTTブローカーにメッセージを送りつつ、上記2 と別の音を再生しつつ、上記1 のレイヤーを完全に透明にする
3. 上記の PC からのメッセージ（MQTTブローカー経由）が M5StickC Plus で受信されたタイミングで、LEDテープを虹色に光らせる

ストーリー

（英語の説明の後に日本語の説明を書いています）

There are a toy sword that various people have modified in appearance and behavior, and I have tried to modify it myself.

At first, I was just using the micro:bit based system that I had posted on the following page to change the way it glows (using "Grove Shield for micro:bit v2.0" and "Grove - WS2813 RGB LED Strips", programmed with MakeCode).

【in Japanese】●100円ショップで売っていたおもちゃの刀を改造して LEDテープを仕込んで光らせるテスト | ProtoPedia
　https://protopedia.net/prototype/2365

I thought of doing this with M5Stack devices, and if I were to use the M5Stack device and UIFlow, I thought of adding something that was difficult to achieve with micro:bit, and came up with the idea of using MQTT communication.
I also wanted to add some visual effects and sound effects other than the sword glowing, so I combined drawing and sound playback with p5.js, which I have been using a lot lately.

p5.js can be used for the following processes, for example, and is often used in the implementation of the display portion of work creation.

• Animation with illustrations
• Drawing Particles
• Simple image composition and 3D object drawing

MQTT, which was used for the inter-device communication in this work, is also conveniently used in my work for collaboration between different devices, applications, and services.

【ここから日本語の説明です】

様々な方が見た目や挙動を改造していたりするダイソーのおもちゃの刀（200円で売っているもの）を、自分も改造してみました。

最初は、以下のページに投稿していた micro:bit をベースにした仕組みで、光らせ方を変えることだけをやっていたのですが（ micro:bit用GROVEシールド v2.0 と Grove RGB LED テープを利用し、MakeCode でプログラムを作成）、これをさらに改変しました。

●100円ショップで売っていたおもちゃの刀を改造して LEDテープを仕込んで光らせるテスト | ProtoPedia
　https://protopedia.net/prototype/2365

M5Stack系デバイス＋UIFlow を使うなら、micro:bit での実現は難しかったものを付け加えようと考えて、MQTT による通信を活用する方向を思いつきました。
そして、刀が光る以外に何らか見た目の効果を加えたり、効果音を鳴らしたかったりしたかったので、特に最近よく利用している p5.js による描画・音の再生を組み合わせました。

ちなみに p5.js は、例えば以下のようなことが行うことができ、作品作りの表示周りでよく活用しています。

• イラストのアニメーション
• パーティクルの描画
• 簡単な画像合成処理や 3Dオブジェクトの描画

今回のデバイス間連携のための通信に使った MQTT も、普段の作品作りの中で、デバイス間通信や、異なるデバイス・アプリ・サービス間の連携に、便利に使っています。

メンバー

• 

  Yosuke Toyota @youtoy

関連イベント

• M5Stack Japan Creativity Contest 20212021-07-15 開催

同じニオイがする作品

• Circle Clock
• ツッコミの祭点
• 縁日風クラッピー～LED常時点滅版～
• 【簡単スマート管理システム】スマぽち