【山崎研Tips】Processing チュートリアル③ シリアル通信
ここではシリアル通信で受け取ったコマンドに応じて描画するファイルを切り替えるプログラムを作成します。
M5 Atom のボタンを押すと、Processing 上の画像が切り替わります。
準備：マイコン（M5 Atom lte）側に次のシリアル送受信のテストプログラムを書き込む
code:M5Atom_Serial_RxTx
//
// M5 Atome lite用シリアル通信テスト用 by yama 2023.06.29
// 受信 Rx： 0，1，2，3を受信しLEDの色が変化
// 送信 Tx： ボタンを押すたびにカウントアップして 0，1，2，3を送信
//
char ch = 0; //シリアル通信用変数（１文字）
uint8_t btn_cnt = 0; //ボタンカウント用変数
void setup()
{
M5.begin(true, true, true);
Serial.begin(115200); //USBシリアル初期化
delay(50);
M5.dis.drawpix(0, 0xf00000);
}
void loop()
{
if(Serial.available()) {
ch = Serial.read();
}
switch (ch)
{
case '0':
M5.dis.drawpix(0, 0xf00000);
break;
case '1':
M5.dis.drawpix(0, 0x00f000);
break;
case '2':
M5.dis.drawpix(0, 0x0000f0);
break;
case '3':
M5.dis.drawpix(0, 0x707070);
break;
default:
break;
}
if (M5.Btn.wasPressed())
{
btn_cnt++;
if (btn_cnt >= 4)
{
btn_cnt = 0;
}
Serial.println("BUTTON_PRESSED");
}
delay(50);
M5.update();
}
code:ImgDisplaySerialpde
import processing.serial.*;
import processing.event.*;
Serial atomPort;
boolean showImage1 = true;
PImage image1, image2;
void setup() {
size(640, 360); // 描画サイズ（640 x 360）
image1 = loadImage("01.png");
image2 = loadImage("02.png");
// Atom Liteとのシリアル通信の設定
atomPort = new Serial(this, "COM4", 115200); // シリアルポートの選択とボーレートの設定
atomPort.bufferUntil('\n'); // 改行文字までデータをバッファリングする
}
void draw() {
background(255);
// 表示する画像を切り替える
if (showImage1) {
// 画像1を表示
image(image1, 0, 0);
} else {
// 画像2を表示
image(image2, 0, 0);
}
}
void serialEvent(Serial port) {
String data = port.readStringUntil('\n');
if (data != null) {
data = data.trim();
println(data);
if (data.equals("BUTTON_PRESSED")) {
// Atom Liteのボタンが押された場合
showImage1 = !showImage1; // 画像の切り替え
}
}
}