p5.toio を使ったシンプルな p5.js のプログラム：接続中の toio の数の表示や move()、rotate() などによる走行

Last updated at 2024-02-08Posted at 2024-02-08

過去に以下の記事を書いたことがあったり、その後、モノ作り系の展示イベント用の作品作りに利用している 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();
}