M5StackのNeoPixelユニットで空中に絵を描く

この記事は[リンク情報システム](https://www.lis.co.jp/)の[「Tech Connect Summer 夏のアドベントカレンダー」](https://qiita.com/dgkz/items/2862d5e6b77203a126b3)のリレー記事です。
engineer.hanzomon のグループメンバによってリレーされます。
（リンク情報システムの[Facebookはこちらから](https://www.facebook.com/lis.co.jp/)）

最終日です。ハックの日(8/9)！


#つくるもの
手で左右に振るタイプの簡易バーサライタをつくります。

最近、光る扇風機のようなものが文字や図を表示しているアレ、どうやって動いているのか気になっていました。
どうやらあれは「バーサライタ」というもので、ググってみると仕組み自体は簡単なようです。
LEDをあるパターンで動かして、点滅させると、文字や図のように見える！という人の眼の残像効果を使った装置です。
筆者の世代だと......「ポケモーション」というおもちゃがありましたね。

M5Stackには簡単に制御できるユニットがたくさんあります。
その中にNeoPixelというフルカラーLEDテープがあります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/5eb108f4-1809-fd82-beb6-0f0b1a3fc199.jpeg" width=60%>
↑NeoPixelユニット

これを使って簡易バーサライタを試作してみることにします。


#環境
・M5Stack Core(FIREかGO)
・M5Flow
・NeoPixelユニット(10cm)
・ユニット接続用のGROVE互換ケーブル

#Lチカ
NeoPixelユニットをM5Stack CoreのBポートに繋いでおきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/51686cd6-f99a-9130-21d4-a87bcf41061f.jpeg" width=60%>

NeoPixelユニットの向きを間違えないようにしましょう。
黒のほうじゃなくて、下の画像の白いほうに繋ぎます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/3733c21b-0933-6191-0784-8f65fb8e9a34.jpeg" width=60%>

M5Flow側でNeoPixelユニットを追加すると、
NeoPixelのブロックを追加できるようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/e3bf674a-84f3-c8c6-5187-54d78f6f4279.png" width=60%>


↑countの数値はLEDの数で良いです。
今回扱うNeoPixelユニットは10cmなので、「15」と入力しておくと全部チカらせることができると思います。

NeoPixelのブロックを追加して......
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/e9ec0cca-5b6b-d59c-59dd-fc5c23eae25a.png" width=60%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/ef69c66f-8498-a3c7-7a1a-7d5ac641a0e7.png" width=60%>



適当な色を設定して実行
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/a4a89698-5791-ede5-853c-562e96d268fd.jpeg" width=60%>

わーい
あっという間にパリピ！


#IMUの値を取得する
M5Stackには9軸のIMUが付いています。
色々試してみたところ「Get X ACC」で取得したX軸の加速度を使うのが良い感じでした。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/edd59294-4659-fcc4-04d6-4f5b53da8dc9.png" width=60%>

LCDにラベルを追加して、取得した値を画面に表示してみましょう。
①ラベルをD&Dで追加する
②追加したラベルをクリックしてフォントサイズを大きくする
③UIのラベルブロックを追加する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/c53dff70-363e-0f57-2e99-81c8e965bdd5.png" width=100%>

表示内容にIMUの「Get X ACC」を入れてやります。
加速度の取得はループさせます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/c25a03c6-9446-11bb-5dd8-2d9e5e3d6ee5.png" width=60%>

実行
![imu.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/832a5838-a304-24b1-c298-dd25a3238c28.gif)





だいたい0.7～-0.7のあたりで動かすのが適当かと思います。
色々試したところで気が付きましたが、腕を身体の外側に振るのが少し辛いです。
筆者の場合は0.7～-0.5の範囲にしておきました。
動作確認時、腕に負担が掛かり過ぎないように注意して下さい（経験者は語る）。

#LEDを制御する
今回は弊社のロゴの簡易版を表示させてみます。
[なんか前にも同じようなことをやった気が......](https://qiita.com/mashed-p/items/1ba7a3dc54e3b766c2a8)

LEDはIndex11～15の5つ使ってちっちゃく出します。
デザインをExcelで適当に作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/fcff88ac-85c0-c9b9-385f-85b0251d3e78.png)


美しさは置いておいて、目的の実現を優先します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/eadcbf83-4317-0686-0ba8-657b24074e6d.png)
メンテナンスが辛そうです。実際辛い。


そうそう、1年前に比べるとM5Flowはかなり使いやすくなりました。
作ったものは保存しておきましょう。M5Flowの画面下のほうにあるので、クリックするとダウンロードできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284836/42ceb44b-1f02-639a-da69-66ba721eafba.png)


#動作の確認
いざ！

ﾌﾞﾝﾌﾞﾝﾌﾞﾝﾌﾞﾝ
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/3Wj78gDSTm">pic.twitter.com/3Wj78gDSTm</a></p>&mdash; mashed-p (@mashedp3) <a href="https://twitter.com/mashedp3/status/1158769648587816960?ref_src=twsrc%5Etfw">August 6, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
うーん......何かが違う


と、思ったら振るのが速過ぎました。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/0vUfEQzrnR">pic.twitter.com/0vUfEQzrnR</a></p>&mdash; mashed-p (@mashedp3) <a href="https://twitter.com/mashedp3/status/1158769751566348289?ref_src=twsrc%5Etfw">August 6, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

出た！

実際のところ、肉眼で見た方が分かりやすいです。残像効果を使うので眼に焼き付ける感じで。
何回も試したせいか、眼がショボショボしています。LEDの明るさを調節するなど、気をつけましょう。

これで、初心者でもなんとか空中に絵を描けました。
自分で作ると何となく愛着がわきますね。

#改善点など
・IMUの使い方をもう少し勉強したほうが良さそう。
・今の状態であれば一定間隔で音を出して、腕を振るスピードを指示したほうが分かりやすい。
・1個1個LEDの値を設定するのが手間なので簡略化する。画像を読み込んで変換とか入力した文字を変換するとか......
etc

モーターでぐるぐる回転させて表示するタイプにもチャレンジしてみたいですね。

***
以上です。
M5Stack関連は今もアプデやら新ハードやらでアツアツですよ！
先日のMaker Faire Tokyo 2019でも大人気でしたね。夏休みの自由研究にいかがでしょうか？

さて、[「Tech Connect Summer 夏のアドベントカレンダー」](https://qiita.com/dgkz/items/2862d5e6b77203a126b3)は本日で終了です。
次は冬のアドベントカレンダーにご期待下さい！今のうちにネタを考えておきます。


***
[リンク情報システム株式会社](https://www.lis.co.jp/)では一緒に働く仲間を[随時募集](https://www.lis.co.jp/employ_top)しています！
また、お仕事のご依頼、ビジネスパートナー様も募集しております。[お気軽にご連絡ください。](https://www.lis.co.jp/inquiry)