toioの開発者用マットとビジュアルプログラミングで遊んでみた

# はじめに
[toioのキャンペーン](https://mag.switch-science.com/2020/05/20/toio-campaign2/)で開発者用マットをゲットしたのと、しばらく前からtoioのビジュアルプログラミングのwindows対応版が出てたので遊んでみました。

開発者マットはX,Y座標が取れるマットと、カードの値が読める2種類入っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/88b6797c-38f7-179d-32d4-2e2bd35749bd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/239e57b9-f0ef-6a9d-791a-8ecbd498b93b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/665016c3-93a7-8aaf-2dac-dab36db1373d.png)



# ビジュアルプログラミング使い方
ビジュアルプログラミングはいわゆるscratchと同じです。
使い方はこちらを見ればすぐできます。

[toio™️「ビジュアルプログラミング」のあそびかた 基本編：起動方法とトラブルシューティング（Windows10編）](https://note.toio.io/n/nce33be04b2eb)

私の場合は古いscratch linkが残っていましたので、それを削除したら特に問題なく使えました。

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

# 動作確認（マットの読み取り）
まずは簡単にマットの値を読み取って表示してみました。

コスチュームにtoio cubeがあるので、それもマットの位置に合わせて移動させています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/c3a1aa64-7593-27b3-059d-77780eec7464.png)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">toioの開発者向けマット届いたのでビジュアルプログラミングで読み取り値確認。<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://twitter.com/hashtag/%E3%81%8A%E3%81%86%E3%81%A1%E3%81%A7%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#おうちでロボット開発</a> <a href="https://t.co/x0aER6j3PV">pic.twitter.com/x0aER6j3PV</a></p>&mdash; Katsu Shun (@katsushun89) <a href="https://twitter.com/katsushun89/status/1269468943128727553?ref_src=twsrc%5Etfw">June 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


コードはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/8454e712-5c7a-d46a-cb0f-d0f08ed2143c.png)

# ゲズンロイドのめだま生物
2つのtoioの角度をちょっと扱おうと考えていたら、ゲズンロイドのめだま生物が作れるんじゃないかと思い、やってみました。

ゲズンロイドのめだま生物は、このようにもう一個のtoioの方を常に向いてくるこわいやつです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ずっと見られてて怖い😱<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/fcDDAn8dlU">pic.twitter.com/fcDDAn8dlU</a></p>&mdash; Katsu Shun (@katsushun89) <a href="https://twitter.com/katsushun89/status/1264431341854027776?ref_src=twsrc%5Etfw">May 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


これをビジュアルプログラミングでやってみました。
atan2をtoioの角度に合わせて象限ごとに変換しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/b4abbb58-eb34-3699-9eb6-f2687198b09a.png)

めだま生物と同じように動きました。(やっぱりこわい。）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ゲズンロイドのめだま生物をビジュアルプログラミングでやってみた！<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://twitter.com/hashtag/%E3%81%8A%E3%81%86%E3%81%A1%E3%81%A7%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#おうちでロボット開発</a> <a href="https://t.co/SbkAicEpXj">pic.twitter.com/SbkAicEpXj</a></p>&mdash; Katsu Shun (@katsushun89) <a href="https://twitter.com/katsushun89/status/1269526707083468801?ref_src=twsrc%5Etfw">June 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# toioでルーレット
人生ゲームのルーレットがうまく回せずつっかえたりするので、toioでルーレットを作ってみました。
1-10の乱数を使って出た目の通りにまわります。最後の5コマ分はスピード落としてルーレット感出しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">人生ゲームでルーレット回すの失敗したりするので、toioでルーレット作ってみた😊<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://twitter.com/hashtag/%E3%81%8A%E3%81%86%E3%81%A1%E3%81%A7%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#おうちでロボット開発</a> <a href="https://twitter.com/hashtag/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#ビジュアルプログラミング</a> <a href="https://t.co/tVl7XwQTlc">pic.twitter.com/tVl7XwQTlc</a></p>&mdash; Katsu Shun (@katsushun89) <a href="https://twitter.com/katsushun89/status/1269646327069188098?ref_src=twsrc%5Etfw">June 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

コードはこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/e50b5492-30e9-69a2-c9b4-e68813b627d4.png)

音を出すともうちょっと良い感じになりそうです。

# おまけ（ルーレットいかさま版）
ルーレットの出る数字をもう一枚の開発者キットの数字の箇所に回るようにいかさま版を作りました。カードに10はないので、Aを10にしています。
軽蔑されても、どんな手を使ってでも人生ゲームで勝ちたい人は使ってみてください。（笑）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ルーレットいかさま版。<br>（もう一個のtoioのシートの番号の通りになるやつ。）<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://twitter.com/hashtag/%E3%81%8A%E3%81%86%E3%81%A1%E3%81%A7%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#おうちでロボット開発</a> <a href="https://twitter.com/hashtag/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#ビジュアルプログラミング</a> <a href="https://t.co/FkF66C0x7Q">pic.twitter.com/FkF66C0x7Q</a></p>&mdash; Katsu Shun (@katsushun89) <a href="https://twitter.com/katsushun89/status/1269646329610788869?ref_src=twsrc%5Etfw">June 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

コードはさきほどの乱数で設定していたroulette_numberをもう一個のtoioから読むようにしただけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/7a7c771b-ab64-6452-9108-ce372fba7ac4.png)

# おわりに
どれも複雑なことはやっていないですが、ビジュアルプログラミングのコードは1枚の画像に収まるぐらい簡潔に出来ました。
toioは絶対座標が取れるので、それを使いつつ思いついたものをサクッと作るのにビジュアルプログラミングは向いていると思います。ご興味あれば試してみてください。