過去に以下の記事を書いたことがあったり、その後、モノ作り系の展示イベント用の作品作りに利用している p5.toio の話です。

●toio をブラウザ上から簡単制御！ p5.js用ライブラリの p5.toio の始め方（p5.js Web Editor上からの利用） - Qiita
　https://qiita.com/youtoy/items/0544183ed0f0dba65f51

上記の記事ではセットアップ方法と、以下の動作をさせるシンプルなプログラムを掲載していました。

toio との接続
toio で音を鳴らす
toio をその場で回転させる（モーターの制御、move() を利用）
上記の回転動作を停止させるモーターの停止

今回の内容

今回は、以下の内容を試してみます。

toio との接続
接続中の toio の数をキャンバス上に表示
move() を使い toio がある円周上を走るような動き
- 円の半径を異なる 2種類の大きさにする
rotate() を使い toio をその場で回転させる
stop() で上記のモーターを使った動作を停止させる

なお、前回の記事で書いていたセットアップ周りの話は省略します。

プログラムの内容

それでは、今回作ったプログラムの話です。

今回のプログラムの内容は、以下のとおりです。

const gCubes = [];

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(0);

  drawToioNum();
}

function drawToioNum() {
  fill(255);
  textSize(32);
  textAlign(LEFT, CENTER);
  text(`toioの接続数： ${gCubes.length}`, width * 0.1, height * 0.4);
}

function keyPressed() {
  if (key === "f") {
    P5tCube.connectNewP5tCube().then((cube) => gCubes.push(cube));
  } else if (key === "1" || key === "2") {
    const rate = key === "1" ? 0.3 : 0.6;
    const speed = 80;
    moveCube(rate, speed);
  } else if (key === "3") {
    rotateCube(60);
  } else if (key === "a") {
    stopCube();
  }
}

function moveCube(rate, speed) {
  console.log("move");
  gCubes[0]?.move(speed, speed * rate, 0);
}

function rotateCube(speed) {
  console.log("rotate");
  gCubes[0]?.rotate(speed, 0);
}

function stopCube() {
  console.log("stop");
  gCubes[0]?.stop();
}

キーの押下時に、以下の動作をさせるようにします。

f： toio との接続
1、2： toio がある円周上を走るような動き（円の半径は 2種類）
3： toio をその場で回転させる
a： toio のモーターを静止させる

この処理を動作させた時の様子は、以下のとおりです。

また、toio の接続台数をキャンバスに表示する処理を入れているので、キャンバス上の表示は toio が接続されているかどうかによって、以下のように変化します。

公式ドキュメントの関連部分

以下は、公式ドキュメントの記載の中で、今回用いた処理が書かれた部分のリンクです。

●P5tCube | p5.toio ＞ move
　https://tetunori.github.io/p5.toio/docs/cube/classes/p5tcube#move

●P5tCube | p5.toio ＞ rotate
　https://tetunori.github.io/p5.toio/docs/cube/classes/p5tcube#rotate

●P5tCube | p5.toio ＞ stop
　https://tetunori.github.io/p5.toio/docs/cube/classes/p5tcube#stop