p5.toioで忖度福笑い

お正月の接待プレイにいかがでしょうか。

忖度福笑い pic.twitter.com/PjrVtHT1AC

— 🐸 (@_coboco) December 1, 2022

開発デバイス

• toioコアキューブ2個
  本当は顔のパーツ6個分あると良かったんですが富豪じゃないのでとりあえず2個で。。。

プレイマット（下に敷いてる紙）が面白そうだったので買ってみました。
紙面上に特殊パターンが印刷されていて、座標を認識する仕組みだそうです。
これはコアキューブについてきた簡易プレイマットですが、無地のマットや印刷できるマットなどもあるみたいです。

開発環境

toioをJavaScriptで制御するライブラリとしてtoio.jsがtoio公式から提供されていますが、
環境構築せずにオンラインエディタなどでサクッと開発したい場合は、p5.toioが便利です。
p5.toioのα版リリースについて

注意点として、上記の記事で紹介されているp5.js Web Editorでは現在p5.toioは使えません。

こんな経緯だそうです。

つい最近の改変だと思うのですが、p5.js Web EditorでWebBluetoothが使えなくなっていました(p5.ble.js, p5.toioなどなど)。
接続時に出るエラーの内容はかなり明確なのでIssueをあげたけど、アーキテクチャ思想的に対応できないです、となるとキツいな。https://t.co/aqvLwQADg2

— Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) July 15, 2021

現在は、OpenProcessing上でp5.toioが利用できます。
以下はp5.toio公式からリンクされているサンプルです。
p5.toio Basic Sample

管理画面

シンプルにこんな感じです。

ソースコード

// キューブのインスタンス格納用
const gCubes = [];
// 正解の位置
const correctPosition = {
    eye: {x: 210, y: 187, angle:-1.6},
    lip: {x: 172, y: 273, angle:-1.6}
};

// キューブとWebBluetooth接続
function connectDevice(partsName) {
	P5tCube.connectNewP5tCube().then(cube => {
		gCubes.push({device: cube, targetPosition: correctPosition[partsName]});
  });
};

// キューブを正解の位置へ移動
function moveDevice() {
	for(let i=0; i<gCubes.length; i++) {
		gCubes[i].device.moveTo({
			x: gCubes[i].targetPosition.x, 
			y: gCubes[i].targetPosition.y, 
			angle: gCubes[i].targetPosition.angle	// ここがなぜか効かない
		}, 50);
		
		// 移動後に角度を変えるため、1秒後に実行
		setTimeout(() => {
            gCubes[i].device.turnTo(gCubes[i].targetPosition.angle, 50);
		}, 1000);
	}
}

めちゃくちゃ簡単ですね！
moveTo()で指定した座標に飛んでってくれます！
ただ、なぜかangleの指定がうまくいかず、移動後に角度が変わってくれなかったです。
turnTo()を使うと角度は変えられました。
なので、無理やりsetTimeout()を使って移動→角度変更の二段構えで動かしてます。
移動完了のタイミングを取る方法もありそうな気がしますが、まだよくわかってません。

複数個のキューブを操作する処理は逐次実行しないと1個しか動かなかったので、
for文ではなくforeach()でやりたい場合はPromiseでラップしてあげるとかしないとダメだと思います。

最初プレイマットの仕様や座標移動の仕組みがよくわかっておらず、
現在位置から動かしたい方向と長さを指定するんだろうなーと変な思い込みをして
「アレだあの…三平方の定理…えっとまず直角三角形を作るために直角の点の位置を求めて…」とか
ものすごく無駄なことをやっていましたが。。。
公式ドキュメントをちゃんと読んでないせいですね。
p5.js Web Editorで動かないことにもしばらく気づかずドはまりしてしまいました。。。
どうしてもQiitaの記事がSEO強いのでそっち見ちゃうというか。。。（いいわけ）

「p5.js Web Editorでp5.toioはもう動かないよ！」とQiitaに書き残しておくだけでも意味があると思うので、
どなたかの参考になれば幸いです！