(英語の説明の後に日本語の説明を書いています)
[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.
- When button A on the M5StickC Plus is pressed, send a message to the MQTT broker (Publish).
- When the message written in above is received by the PC (Subscribe), the following video effects are drawn and sound is played.
- A transparent black layer is superimposed on the camera image (the camera image will be dimmed).
- Play sound while drawing particles in real time on the above transparent black layer.
- After the above particle drawing animation is complete, send a message to the MQTT broker.
- Make the color of the above dim layer completely transparent, and play a different sound than the one played above.
- 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ブローカー)
【音のデータ】
魔王魂さんがフリー素材として公開されている効果音のデータを利用させていただいてます。
動作の流れは以下の通りです。
- M5StickC Plus のボタンA が押された時、MQTTブローカーにメッセージを送る(Publish)
- 上記1 のメッセージが PC で受信された際に(Subscribe)、以下の映像エフェクトの描画・音の再生を行う
- カメラ映像が表示されている上に、透過処理された黒いレイヤーを重畳表示(カメラ映像が薄暗くなる)
- 上記1 のレイヤーの上にパーティクルをリアルタイムに描画しつつ音を再生
- 上記2 の描画が終わったら、MQTTブローカーにメッセージを送りつつ、上記2 と別の音を再生しつつ、上記1 のレイヤーを完全に透明にする
- 上記の PC からのメッセージ(MQTTブローカー経由)が M5StickC Plus で受信されたタイミングで、LEDテープを虹色に光らせる