【toio 2021（2つ目）】 #toioDo の新バージョンで追加された #toio の姿勢角ブロックを試す

この記事は、[2021年の toio のアドベントカレンダー](https://qiita.com/advent-calendar/2021/toiotomo) の <del>14日目</del> ⇒ 11日目の記事です。
（諸事情により、登録日を後から変更しました）

今年は、toio のカレンダーには 1日目に以下の記事を投稿していたので、これで今年 2つ目になります。
●【toio 2021】 #toio の姿勢角（ロール・ピッチ・ヨー）をブラウザ上で可視化（Web Bluetooth API、Smoothie Charts を利用） - Qiita
　https://qiita.com/youtoy/items/9b3b39b3f91b36821305

内容は、以下のツイートにも出てきていて、上記の記事で JavaScript のプログラムで扱った姿勢角の話です。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">【機能④_Scratchブロックいろいろ増加！】<br>姿勢角や、電池残量、接続状態などが取れるようになりました！！<br>●姿勢角とは？↓↓<a href="https://t.co/0SnEVGuwSa">https://t.co/0SnEVGuwSa</a></p>&mdash; toio(トイオ)公式 (@toio_jp) <a href="https://twitter.com/toio_jp/status/1468160370766655491?ref_src=twsrc%5Etfw">December 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 姿勢角を扱うブロック
以下の公式ブログの記事で、toio Do の新バージョン v1.3 に新ブロックが追加された話が書いてあります。

●toio Doの新バージョンv1.3が公開されました | toio blog | toio（トイオ）
　https://toio.io/blog/detail/20211207toio_do_v1-3.html
![新ブロック.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f95c1d8a-cd0c-42f7-5d8b-51535e46cf35.jpeg)

そして、PC版の toio Do の画面で、姿勢角に関わるブロックの部分を見てみました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> の新バージョンで追加されたブロック、その中の姿勢角に関するものを確認！<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/yb5XCZU9Gq">pic.twitter.com/yb5XCZU9Gq</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1469576188272463874?ref_src=twsrc%5Etfw">December 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 取得できる値を確認する
まずは、取得できる値を確認するため、以下のようにしてみました。

Scratch のブロックによっては（例えば、標準のブロックの x座標とか y座標とか）、「チェックボックスを ON にして、値の変化をリアルタイムに確認」というのができるものがありますが、姿勢角についてはそれができなそうでした。
そのため、値を格納するための変数を準備し、その変数の値を出力させる形にしています。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> の新バージョンで追加された「姿勢角（ロール、ピッチ、ヨー）」は、チェックボックスを ON にして中身を確認、みたいなことができなそう？<br><br>とりあえず、変数に入れて値を確認する方向にしてみた。<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/on5g1exFLc">pic.twitter.com/on5g1exFLc</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1469577825774878725?ref_src=twsrc%5Etfw">December 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#### 値の表示にスライダーを使う
Twitter で、値の表示を数値でなくスライダーにすると良い、とコメントいただきました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">おーありがとうございます！！<br><br>ついでにですが、3つ作っていただいているロール・ピッチ・ヨーの変数を右クリックしてスライダー表示にすると、動きが見えやすいかもしれません。</p>&mdash; Akichika Tanaka (@akichika) <a href="https://twitter.com/akichika/status/1469583047201013765?ref_src=twsrc%5Etfw">December 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

表示のみ切り替えると、良い感じの表示にならなかったので、表示の切り替え後に「スライダーの最大値と最小値の変更」を行いました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【動画2つ目追加】<a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> の新バージョンで追加された「姿勢角（ロール、ピッチ、ヨー）」のブロックの変数表示、<a href="https://twitter.com/akichika?ref_src=twsrc%5Etfw">@akichika</a> さんに、スライダーにすると良い、というアドバイスをいただき、追加で試したもの。<br>（最小値と最大値がデフォルト 0〜100 なので、それを -180〜180 にした）<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/rDC0PbFxlk">pic.twitter.com/rDC0PbFxlk</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1469585863655174145?ref_src=twsrc%5Etfw">December 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

少し補足すると、デフォルトのスライダー表示は 0 から 100 の値をとるようになっていて、姿勢角がとる値の範囲と異なっているため、これを変更する必要がある、というものです。
（ひとまず、一律 -180 から 180 の値にしました）
![デフォルト.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c00461be-9465-6a60-db77-c515004846e3.jpeg)

### 2台の toio　で使う
そして 2台の toio を使って、それぞれの姿勢角の値を、1つのスプライトの x・y座標に割り当てる形で動かしてみました。

単純に、「片方のピッチ」と「残りもう 1つのロール」のそれぞれを、画面上の toio のスプライトの x・y座標に常に代入する、というプログラムです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> の新バージョンで追加された「姿勢角（ロール、ピッチ、ヨー）」のブロックを、少ないブロックでお試し。<br>（片方の 3つの値を出す仕組みは残しつつ）<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/UaX2Y2KEDt">pic.twitter.com/UaX2Y2KEDt</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1469582461000888320?ref_src=twsrc%5Etfw">December 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

数値の変化も、スプライトの移動も、良い感じになったと思います。