始めてのビジュアルプログラミングで、はじめましてtoio

どうも。
[メイカー系イベント出展](https://profiee.com/i/_SAM)に入れ込むあまり、人生(の金と時間を)溶かし中の小野寺修([@SAMonodera](https://twitter.com/SAMonodera))と申します。
この記事では、"開封の儀"からスタートしても半日あれば作品が完成する、[ソニーのロボットトイ **toio** ](https://toio.github.io/toio-spec/)の素晴らしさをお伝えしたいと思います！
　　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318815/43ca270e-ec44-de08-a51a-7b7c11079832.jpeg" width=50%>


#はじめに
 先日、[こちらのキャンペーンに応募して「開発者向けマット(仮)」を頂戴した](https://note.toio.io/n/n15ace43c69e6)ことが、本作品の製作のキッカケです。
都合およそ4時間で、作品を完成させることが出来ました。
現在は、[単体からコアキューブを購入することが可能](https://www.switch-science.com/catalog/list/?keyword=toio)になったため、より手軽にtoioの世界を体感できるようになっています。


#作品

二台のtoioを使って、(紫の)コンピュータと徒競走します。
キーボードの連打が早いほど、(白い)自分のtoioが速く走ります！

###[**【動画】 toioでヨーイドン！**](https://www.youtube.com/watch?v=q2O24BB0odg)
[![toioでヨーイドン！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318815/8ea9eca6-a6d7-cb64-7907-6e22f030a4a5.jpeg)](https://www.youtube.com/watch?v=q2O24BB0odg)


参考までに、下のリンクは本作を[第63回IoTLT](https://iotlt.connpass.com/event/173861/)で発表した時のスライドです。
https://www.slideshare.net/OsamuOnodera1/toio-234271130


#プログラム

プログラムは次の通りです。
ビジュアルプログラミング言語[ Scratch 3.0 ](https://scratch.mit.edu/)ベースの、[公式にtoio関連の機能が拡張されたバージョン](https://note.toio.io/n/nefce44149d68)を用いています。
メインループを可能な限りシンプルにすることを心がけて、機能毎に分割できる処理はモジュール(イベント)化しています。

![toioプラグラム.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318815/7149f675-1965-ef67-57af-58b370bbcc7c.jpeg)


#解説

マット上に置いた2台のtoioが、ゴール地点への到達を目指して、横方向の右から左方向への移動を繰り返します。

ただし、相手のtoioが一定の速度で移動するのに対して、自分のtoioは変数「パワー」の値が移動速度に反映されていく仕組みです。
そして、その「パワー」はキー入力の有無によって少しずつ加減されるため、結果としてキー入力の反復速度が自分のtoioの移動速度に比例して影響するようになっていきます。

最終的には、相手または自分のどちらかがゴール位置を超過した時に、勝敗の判定ロジック「勝利判定を受け取ったとき」が作動して、ゲームは終了します。


#マットのひみつ

開発者向けマットには予め細微なドットが多数印刷されており、toioの下面に搭載されたセンサーがそれを読むことで、マット上の絶対座標ならびに方向を得ることが出来るようになっています。

例えば今回の作例では、ゴール地点を「横方向の-45の地点 (x=-45)」と設定していて、プログラムからはリアルタイムにtoioの絶対位置を知ることができるため、ゴールの到達の是非を簡単に判定したりすることが可能です。

　　　![toioマット.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318815/471eec74-107c-bbcd-2d0c-727b153ce42c.jpeg)

このマットは、一見しただけでは普通の工作用紙にしか見えませんが、マットの左下隅などを拡大すると、確かに微細なドットが印刷されていることが確認できます。

　　　![toioマット拡大.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318815/99ab7f82-c757-623b-329b-f0770214effe.jpeg)

これらのドットから位置等を取得するアルゴリズムについて興味のある方は、[「アノトパターン」で検索](https://www.google.com/search?rlz=1C1EJFA_enJP792JP792&sxsrf=ALeKk02dDIOsSMtI03oLX17j2yh8b1KpQw:1590739106079&source=univ&tbm=isch&q=%E3%82%A2%E3%83%8E%E3%83%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3&sa=X&ved=2ahUKEwiQjeT6zNjpAhVZE4gKHQ5XCOsQsAR6BAgKEAE&biw=1724&bih=1294)すると参考となる情報を取得できると思います。


#まとめ
###ビジュアルプログラミング言語「Scratch」について：
Scratchは、他のプログラミング言語の経験がある場合において、習得コストは(ほぼ)ゼロです。
そしてビジュアルプログラミングは、大きなサイズの開発にこそ馴染まないかもしれませんが、視覚的な分かり易さでは群を抜いており、まるで「プログラミング言語のGUI版」のように私には感じられました。
それでいて、ロジックの思考/構築については通常の言語のそれと何ら変わりはありませんので、プログラミングの最初の教材としても、正にうってつけだと思います。

###ロボットトイ「toio」について：
通常、プログラムの実行結果は画面内のみで完結するものですが、toioを使うことで、それが易々と現実世界の方へ向かって飛び出してきます。
バーチャルな計算結果にフィジカルな物体であるtoioの物理現象が掛け合わされるこの相乗効果が、何とも言えない味わいを醸し出しているようです。
IoT的な実装が未経験の方であれば、きっとこの雰囲気は新鮮に映ることでしょう。
まだ触った経験のない方は、先ずは触れてみることで、何か新しい気付きや発見があるかもしれません。

（ツイッターフォローは<a href="https://twitter.com/SAMonodera?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">**こちら**</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>）


#参考
###作品の製作について：
[toio™コア キューブ 技術仕様](https://toio.github.io/toio-spec/)

[toio™️「ビジュアルプログラミング」のあそびかた 基本・番外編：2台のキューブを動かそう！（開発者版）](https://note.toio.io/n/nb6281d260431)

[#toio の開発者向けマット（仮）をビジュアルプログラミングで使ってみる（#GWアドベントカレンダー 5/2）](https://qiita.com/youtoy/items/cb018dd44bf3e533e42b)

###キャンペーンについて：
[『「toio」ではじめよう、おうちでロボット開発キャンペーン』と『開発者向けマット（仮称）』について](https://note.toio.io/n/n15ace43c69e6)

[「toio」ではじめよう、おうちでロボット開発キャンペーン第2回開催決定！](https://mag.switch-science.com/2020/05/20/toio-campaign2/)

[「toio™コア キューブ」単体発売開始
 株式会社スイッチサイエンスによるロボット開発者やクリエイターを応援するキャンペーンを実施 ](https://toio.io/news/2020/20200423-1.html)