Bluetooth通信をゼロから学ぶのは大変なので、別のファイルにまとめて、簡単に使えるようにしています。
micro:bitとp5jsで「コンマ区切りの数値」を通信し、
うまく通信ができると、p5jsの特定の変数に数値が入るようにしています。
基本的にシリアル通信と同じ考え方です。
基本のプログラム
一応載せておきますが、プログラムが長くてわかりにくいです。
整理したプログラム
Bluetoothの部分を、別のファイルのプログラムにしています。
必要な部分だけ見えて、見やすくなったかと思います。こちらですすめます。
※シリアル通信とほぼ同じように扱えるようにしています。そっくりなプログラムなので、注意してください。
// Web Bluetooth API
// This code is based on the following link,
// https://gist.github.com/kotobuki/7c67f8b9361e08930da1a5cfcfb0653f
//
// micro:bit program
// https://makecode.microbit.org/_awv6hADDWCM3
let latestData = []; // デバイスから送信した数だけデータが入る
function setup() {
createCanvas(500, 500);
//通信接続ボタン
const connectButton = createButton("Connect");
connectButton.mousePressed(connectButtonPressed);
const disconnectButton = createButton("Disconnect");
disconnectButton.mousePressed(disconnectButtonPressed);
}
function draw() {
background(220);
fill(255);
text("DATA", 20, 20);
//シリアルで受信したら、latestData配列にデータが入る
//データが3つ以上あるとき
if (latestData.length>=3) {
let data1 = int(latestData[0]);
let data2 = int(latestData[1]);
let data3 = int(latestData[2]);
//テキストで表示
fill(255);
text(data1, 40, 40 + 20);
text(data2, 40, 60 + 20);
text(data3, 40, 80 + 20);
//四角を描く
let xx1 = map(data1, -1023, 1023, 0, width);
let xx2 = map(data2, -1023, 1023, 0, width);
let xx3 = map(data3, -1023, 1023, 0, width);
noStroke();
fill(50, 0, 100, 100);
rect(0, 100, xx1, 100);
fill(100, 0, 100, 100);
rect(0, 200, xx2, 100);
fill(150, 0, 100, 100);
rect(0, 300, xx3, 100);
}
}
micro:bitからの信号をもとに、p5jsの画面が変化します。
どこのプログラミングが、どの変化になっているのか、その流れを掴んでください。
シリアル通信と同じように見えますが、BluetoothはUSBケーブルを抜いてもmicro:bitに電池をつなげば、無線で接続することができます。