#toio の回転動作の ON/OFF をカメラで認識した手の動きで制御（軽いお試しの概要メモ）【 #GWアドベントカレンダー 2021/5/4 】

この記事は、2021年の GWのアドベントカレンダー 5/4 の分の記事です。

はじめに

自宅にある toio の台数が、購入したもの・コンテスト関連で入手したものと合わせて全部で 6台になりました。
それで、群制御的なことをやりたかったのですがスキル・知識が足りない状況だったので、まずはこんなこと（Web Bluetooth API を使った 6台同時接続と一斉動作）を試してみてました。

自宅にある #toio 6台の同時制御シリーズ、第2弾。

「6台同時接続＆全てに同じモーター制御を適用」という実装を Web Bluetooth API を使って書きました（実行はブラウザ上）。

以前、何度も書いていたプログラムの実装を見直してたらできてしまった（今までの実装だと、同時に 3〜4台までだった）。 pic.twitter.com/NUFRVPEqhV
— you (@youtoy) 2021年4月25日

そして、この toio の動作を自分の手の動きで制御できたら良いな、と思いつつ、まずは過去の以下のプロトタイプを作る時に使った両手の認識（MediaPipe Hands の TensorFlow.js実装を利用したもの）と組み合わせられないかな、と思って試したのが今回の内容です。

Googleさんの MediaPipe Hands と p5.js の描画とを組み合わせた仕組みを試していた件の続き。

描画周りを p5.js にしたのを活かして、簡単なものですが立方体の描画・回転など、WebGL による 3D表現を試しに組み込んでみました。 pic.twitter.com/WQvvCCJLPa
— you (@youtoy) 2021年2月17日

ダイの大冒険に出てくる
「とっておきの手品 by フレイザード」っぽいことができるWebアプリができてしまった。 pic.twitter.com/PvxythOfbx
— you (@youtoy) 2021年2月11日

本当は、5/1（土）・2（日）にオンラインで開催された「子どもプログラミングパーク」というイベントで、自分が担当になっていた企画の「モノとつながる楽しいプログラミング（トーク＆デモ）」という企画でデモができれば、と進めていたものでしたが、途中まで作って間に合わずという状況になったものでもあります。
なお、その企画中では Teachable Machine を使った音の機械学習と組み合わせて「回転・ぐるぐる・回れ」等と声を出すと、それに連動して 6台の toio が一斉に回転する、というデモを行っていました。

5/1・2 に行われた #子どもプログラミングパークの中の企画「モノとつながる楽しいプログラミング（トーク＆デモ）」でデモを行った仕組み。
声を合図に #toio 6台を一斉に動作させるものだったのですが、動画を公開してなかったのでツイート。
※ #TeachableMachine による音の機械学習を組み合わせ pic.twitter.com/KC0lCCZxwu
— you (@youtoy) 2021年5月3日

できあがったもの

ここで、今回作ったものの動画を掲載します。
カメラで認識された手の指先の距離（親指と人差し指の指先の距離）がある閾値以上になると toio 6台が一斉に回転し、その距離が閾値より小さくなると toio が動かなくなる、という内容です。

カメラで認識した指の動き（2本の指の距離の大きさ）を使って、 #toio 6台の回転動作の ON/OFF を制御する、ちょっとしたお試し！

技術的には、以前から個別で使っていた 2つ
「手の認識： #MediaPipe Hands の #TensorFlowJS 実装（ブラウザで動くもの）、toio の制御： Web Bluetooth API」です。 pic.twitter.com/gN4DoKKgDf
— you (@youtoy) 2021年5月3日

技術的な部分の軽い補足

この仕組みを実現するために使っている技術は以下の通りです。
　手の認識： MediaPipe Hands の JavaScript（TensorFlow.js）実装
　toio の制御： Web Bluetooth API

手の認識

MediaPipe Hands は、Google が提供している仕組みで、以下のページに概要が書いてあります。
　●Hands - mediapipe
　　https://google.github.io/mediapipe/solutions/hands.html
自分が使ったのは、ブラウザ上で動く JavaScript実装のものでしたが、Python等の他の言語で利用できるバージョンもあります。

本来は両手を同時に認識したり、複数人の手（3つ以上の手）を同時に認識することもできる仕組みですが、今回は片手分の認識のみを利用しています。以下で補足している toio の動作の ON/OFF のトリガーに使っている情報は、認識した手の「親指と人差し指のそれぞれの指先の位置の距離の大きさ」で、その値が特定の閾値を超えているかどうかで toio 関連の処理の ON/OFF を切り替えています。

toio の制御

Web Bluetooth API を使った toio の制御についてですが、これは以下の toio の通信仕様にある内容を使い、仕様で規定されたバイナリデータを送る等のプログラムを JavaScript で実装しています。
　●通信概要 · toio™コアキューブ技術仕様
　　https://toio.github.io/toio-spec/docs/ble_communication_overview
　●モーター · toio™コアキューブ技術仕様
　　https://toio.github.io/toio-spec/docs/ble_motor
動きの制御は、上記のモーターの仕様に書かれた「時間指定付きモーター制御」で、500ミリ秒の間だけ左右のモーターがそれぞれ順回転・逆回転となるように動かす命令を実装しています。そのモーター制御の命令が、上記の手の認識の結果をトリガーとして ON となった時には連続してたくさん送られるので、500ミリより長い連続した回転動作が行われる形です。

それと、上で掲載した動画の撮影前の下準備として、toio 6台とのペアリングの処理を行っています。

これらの toio 6台とのペアリング・一斉動作の ON/OFF を行うためのプログラムについて等は、以下の記事に書いてあるので、よろしければご覧ください。
　●Web Bluetooth API で toio を 6台同時に制御する - Qiita
　　https://qiita.com/youtoy/items/2fae3f4365788810215d

以上が今回の内容の、おおまかな情報です。