シリアル通信をゼロから学ぶのは大変なので、別のファイルにまとめて、簡単にシリアル通信が使えるようにしています。
micro:bitとp5jsで「コンマ区切りの数値」を通信し、
うまく通信ができると、p5jsの特定の変数に数値が入るようにしています。
基本のプログラム
一応載せておきますが、プログラムが長くてわかりにくいです。
整理したプログラム
シリアル通信の部分を、別のファイルのプログラムにしています。
必要な部分だけ見えて、見やすくなったかと思います。こちらですすめます。
// Web Serial API
// micro:bit
// https://makecode.microbit.org/_Uf3KRD5mUTxc
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の画面が変化します。
どこのプログラミングが、どの変化になっているのか、その流れを掴んでください。