蓄光シートにお絵かきを「つくるっち」でやってみた


#ネタ出し
　Advent Calenderのネタを作らなくては... なんかないかなー。4日目に出した「[蓄光塗料をプレイマットに塗れば紫外線LEDでtoio core cubeの動いた軌跡が描けると思ったんだけど...](https://qiita.com/kenichih/items/df4b5406a0db65d71947)」のネタから派生してあとひとつかふたつはいけそうな気がする... そういそういえば「つくるっち」がM5StackCとtoio™️ core cubeに対応してたよなー、ということで「[蓄光塗料を(略)](https://qiita.com/kenichih/items/df4b5406a0db65d71947)」を「つくるっち」でやってみることにしました。

#つくるっち
　「つくるっち」はそーたメイさんによるscratchベースのビジュアルプログラミング環境です。特徴としてはESP32ベースの機器(M5Stack)や、MESH™️、toio™️に対応しており、それらをまとめて制御できたりします。
　[「つくるっち」について](http://sohta02.web.fc2.com/familyday_about.html)

　今回使ってみたのは「つくるっち3.x」のWebブラウザ版(chrome限定ですが)でWindows10のPCを使いました。
　　http://sohta02.sakura.ne.jp/tukurutch/

#準備
　つくるっちエディタを使うだけなら「http://sohta02.sakura.ne.jp/tukurutch/ 」にchromeでアクセスすれば使えますが、M5StackC、toio™️ core cubeと通信して使うためには準備が必要です。

## M5StackCの準備
- M5StickCにつくるっち用のプログラムを書き込みます。
    - [つくるっち3.0x ＆ ESP32デバイス (M5StickC, Duke32AIO, 他)](http://sohta02.web.fc2.com/familyday_app3.html)の「事前準備」の手順を行います
- M5StickCをchromeブラウザを使うPCと同じネットワークにあるWiFiルータに繋ぎます。
    - WiFiのSSIDとパスワードをM5StickCにセットして接続したらM5StickCのLCD画面に表示されるIPアドレスを調べます。
    - このIPアドレスをあとでつくるっちエディタのM5Series IPアドレス設定ブロックに入力します。

## toio™️ core cube側側の準備
- toio™️ core cube 側は特になにもしなくていいですが、PCにscratch linkをインストールして起動しておく必要があります。また、PCはBluetooth/BLE通信機能を持っている必要があります。
    - [Windows10用Scratch Link](https://www.microsoft.com/ja-jp/p/scratch-link/9n48xllczh0x)

## 通信相手
　「[蓄光塗料を(略)](https://qiita.com/kenichih/items/df4b5406a0db65d71947)」ではM5StickCがtoio™️ core cubeとBLE通信していましたが

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/b153cb6a-d4b7-7b63-8d35-954d8f970cdb.jpeg" width=80% />

今回はPCがM5StickCとtoio™️ core cubeの両方と通信する形になります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/f58c8901-7459-e9a6-3166-53d4e28205ff.jpeg" width=80% />

## つくるっちエディタをchromeブラウザに表示してからの手順

- 左下のこのアイコンをクリック
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/1ac278d7-10f7-b62c-1d1c-2fa19c1b7d46.png" width=20% />
- 拡張機能から、「M5Series」と「toio」をクリックして追加
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/45e75e6e-40d1-71a5-8f08-f699b032fe22.png" width=70% />
    - 追加される左端の機能ブロックアイコンにM5Seriesとtoioが増えます。
- toioのブロックをクリックするとtoio™️ core cubeに接続しようとします。
    - Scratch Linkを起動していない状態だと以下の警告がでます。
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/f43f0a17-2ded-1acd-c9f6-851a3d8890f3.png" width=60% />
- Scratch Linkを起動し、toio™️ core cubeの電源をオンにしてからtoioのブロックをクリックすると以下のように表示され、「接続する」をクリックすることで接続できます。
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/e33a6a10-ec71-db0d-dec3-9b7aa7935ab8.png" width=60% />
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/40273e39-c97e-b04b-10f0-6d17fe435743.png" width=60% />
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/23902ac8-695a-0e2e-c6c7-c532aaf93a56.png" width=60% />
    - 「エディターへ行く」をクリックし、エディタ表示にします。
- toio™️ core cubeが接続できていると、この表示になります。接続が切れた場合は切れた状態アイコンになるのでクリックして再接続ができます。
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/070042fc-809e-f25f-76c1-7ae379ce3e0d.png" width=80% />接続できているとき
    - <img src="https://drive.google.com/uc?id=12u6jz6KFPRpm9_ZBiKJT4Li3YY1V8BbM" width=80%/> 接続が切れたとき
- 左端の機能ブロック選択で「M5Series」をクリックし、「IPアドレス設定」ブロックにM5StickCのLCD画面に表示されているIPアドレスを入力します。
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/c4b76088-4739-75a2-d409-bf2a657547fe.png" width=80% />

　これで準備が整いました。あとはエディタの右側にブロックを並べてプログラムを作るだけです。

# 蓄光シートにお絵かきをやってみた。

　M5StickCに紫外線LEDをとりつけ、toio™️ core cubeにセロハンテープで固定する手順は「[蓄光塗料を(略)](https://qiita.com/kenichih/items/df4b5406a0db65d71947)」と同じです。
　紫外線LEDの点灯、消灯はM5Seriesブロックの「デジタルピン『26』の出力を『HIGH』」デジタルピン『26』の出力を『LOW』」で行います。
　toio™️ core cubeの制御は「toio」ブロックの「左タイヤを速さ『』、右タイヤを速さ『』で『』秒動かす」「前に『』秒動かす」「右/左に速さ『』で『』秒回す」といったものしか使えません。(蓄光シート上では位置や角度を指定した移動は使えないため)
　実際に動かしてみると、ひとつ問題がありまして、M5StickCのデジタルピンG26の制御でHIGH(紫外線LED点灯)にすることはできたのですが、なぜかLOW(消灯)にすることができませんでした。紫外線LEDが点きっぱなしになります。なので、一筆書きのものしかできませんでした。

## うずまき
![tukuA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/84e3309c-b64a-ac34-37ec-e6be4b7a6da1.png)


![P_20201211_205147.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/6d39078f-399c-7ca7-1df9-1c752f669696.jpeg)

## お団子

![tukuB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/3c8ccf39-8d18-3771-3219-af4f6c36fc44.png)

![P_20201211_205411.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/1aa7f5fc-6138-9cdc-2d43-463360c9532f.jpeg)

  軌跡が「[蓄光塗料を(略)](https://qiita.com/kenichih/items/df4b5406a0db65d71947)」のときとちょっと違うのは「待ち」(wait/delay/sleep)の時間精度の差かなぁという気がします。まあ、ArduinoIDEで書き込み直さないとパラメータを変えられない「[蓄光塗料を(略)](https://qiita.com/kenichih/items/df4b5406a0db65d71947)」のときと比べてつくるっちエディタのほうがパラメータ調整は気軽に試せそうです。

#さいごに
　M5StickCのG26がLOWにならない件は、そーたメイさんに問いあわせたところ、Rover-C対応のための初期化処理が入っているためGPIOの直接制御はうまく動かないとのこと。なるほどー。(いきなり質問を送ってしまいましたが、丁寧なご回答をいただきありがとうございました。)
　対処された版がでたらまた試させていただきます。よろしくお願いします。


#追記
　そーたメイさんにGPIOがLOWにならない不具合を修正していただいたので、一筆書きじゃなくて途中で紫外線LEDをオンオフしながら描く例をやってみました。

##四角

<img src="https://drive.google.com/uc?id=12OGkmqSMM3_wFm0GlwdllZqVCavmTQDb" />

<img src="https://drive.google.com/uc?id=1YmkUDNbpFoSsq0PfLVIWaIdj_pgEHHhH" />

辺の書き始めと書き終わりでGPIOのHIGH/LOW(紫外線LEDのオンオフ)ができています。
蓄光シートの表面の摩擦が(塗料の塗りが均一でないので)違うと90度ターンがうまくいかずときどき三角形になったりします。(笑)