2023年04月26日 更新

p5.jsとmicro:bitを連携してみよう

どうも、クラゲジュニアです。

前回の「p5.js Web Editor上でBlueJellyをつかってみた」に引き続き、今度はp5.jsライブラリとmicro:bitを連携しました。

p5.jsで扱えるビジュアル的なUIで実際に存在するマイコンボードが動かせると、色々なことができそうです。

必要なもの

• 下記の条件を満たすPC
  • Google Chromeインストール済み
  • Bluetooth機能が利用可能
• micro:bit V2
• USBケーブル（Type-A to microB）

今回のプログラム

micro:bitに下記のプログラムを書き込みます。

https://makecode.microbit.org/_3XV23VK5EfKW

次に、下記リンクのp5.js Web Editorに開きます。

https://editor.p5js.org/henjin01_Fab/sketches/XJhMz7dxL

実行方法

p5.jsの実行ボタン▶をクリックし、Previewに表示されるページ内のScanをクリックすればBLEデバイスの一覧が表示されます。

一覧からデバイスを選択して接続することで、そのデバイス名がページ内に表示されます。

そのあと、Scanの下にある5x5のグリッドをクリックすると、対応するmicro:bit側のLEDが点灯します。

ブラウザの内容とmicro:bitの動作が一致していることが確認できます！

BLE通信のコツ

p5.jsライブラリとBlueJellyの組み合わせに関する内容について説明します。

まず、実際に送信している処理はdraw関数内のble.writeで、この送信はcounter変数が3より大きくなった時に実行されるようになっています。

これは、draw関数のループ頻度が早いことで、ble.writeの処理が追い付かなくなる事象を防ぐために置いています。

countの数が大きくなればなるほどBLE送信の頻度は鈍くなりますが、countの数を小さくしすぎると前述の事象が発生するため、実行しながら適切な頻度を模索する必要があります。

let counter = 0;
function draw() {
  if (mouseIsPressed) {
    ...
    if (counter > 3) {
      const textEncoder = new TextEncoder();
      ble.write(
        "UUID1",
        textEncoder.encode(
          `${Math.floor(mouseX / 100)},${Math.floor(mouseY / 100)}\n`
        )
      );
      counter = 0;
    } else {
      counter++;
    }
  }
}

今回はp5.jsライブラリとmicro:bitを連携するためのコツについてお話しました。p5.jsのビジュアルとデバイスが連携できると色々なことができそうですね！

以上です。