P5.js 和映射 Arduino 按钮

Question

我是新来的！我正在做一个学校项目。我正在尝试使用 Arduino Uno、Arduino IDE 和 p5.js 制作蚀刻草图。在 Arduino 上我有两个电位器和一个按钮。 Arduino IDE 和 p5.js 均可正确读取所有三个值。我遇到的问题是正确映射。电位器在不使用我的教授建议的映射的情况下进行绘制（我不确定为什么），但我试图让按钮在按下时清除画布。我使用的逻辑不起作用。如有任何帮助，我们将不胜感激。

let prevX, prevY, button;
let isCleared = false;
let serialPortName = '/dev/tty.usbserial-1130';
let serial;
let sensors = [200,200,0];


function setup() {
  createCanvas(400, 400);
  
  prevX = width/2;
  PrevY = height/2;
  
  serial = new p5.SerialPort();
  serial.open('/dev/tty.usbserial-1130');
  serial.on('data', gotData);
  serial.on('open', gotOpen);
}

function draw() {
  
  if (isCleared ==true){
    background(250);
    isCleared = false;
  } 
 // prevX = map(prevX, 0,1023, 0, 200);
 // prevY = map(prevY, 0,1023, 200,0 );
  
  strokeWeight(10);
  line(prevX, prevY, sensors[0], sensors[1]);
  prevX = sensors[0];
  prevY = sensors[1];
  //button = sensors[2];
  //prevX = map(prevX, 0,1023, 0, 200);
 // prevY = map(prevY, 0,1023, 200,0 );
}


function gotData() {
 let currentString = serial.readLine();
  trim(currentString);
 if (!currentString) return;
 sensors = split(currentString, ',');
 console.log(sensors);
 serial.write('A');
  
} if (sensors[2] == 1){
    isCleared = true;
}

function gotOpen(){
  print("Serial Port is Open");
  serial.clear(); // slears the buffer of any outstanding data
  serial.write('A'); // send a byte to the Arduino
}
//function buttonPressed(){
 // if (sensors[2] == 1){
  //  isCleared = true;
 
//}
//}

Tinkercad 的链接，可以在其中查看 Arduino IDE 代码以及如何设置物理 arduino：https://www.tinkercad.com/things/2aAKAbBGa4M-fantabulous-blorr-hillar/editel

Answer 1

以下源代码清除了我系统上的屏幕。我使用的方法是在 Arduino 端创建一个由三个整数组成的数组，并将它们作为以换行符结尾的逗号分隔值发送。这三个整数如下：1. XValue、2. YValue、3. btnState（0 或 1）。在 p5 一侧，我重新创建了数组，并在 Sensors[2] 等于 1（按下按钮）时清除屏幕。我认为您不必为按钮做任何“映射”；检查第三个数组元素的值就足够了。我没有连接锅，因为我只有一个；按钮使用互联网原理图进行接线，但与您的接线类似。 Arduino 代码遵循 p5 代码：

p5代码：

let prevX, prevY;
let isCleared = false;
let serialPortName = "/dev/tty.usbmodem143301";
let serial;
let sensors = [];

function setup() {
  createCanvas(600, 600);
  prevX = width / 2;
  PrevY = height / 2;
  serial = new p5.SerialPort();
  serial.open(serialPortName);
  serial.on("data", gotData);
  serial.on("open", gotOpen);
}

function draw() {
  if (isCleared == true) {
    background(250);
    isCleared = false;
  }
  // prevX = map(prevX, 0,1023, 0, 200);
  // prevY = map(prevY, 0,1023, 200,0 );

  strokeWeight(10);
  line(prevX, prevY, sensors[0], sensors[1]);
  prevX = sensors[0];
  prevY = sensors[1];
  //prevX = map(prevX, 0,1023, 0, 200);
  // prevY = map(prevY, 0,1023, 200,0 );
}

function gotData() {
  let currentString = serial.readLine();
  trim(currentString);
  if (!currentString) return;
  sensors = split(currentString, ",");
  console.log(sensors);
  if (sensors[2] == 1) {
    isCleared = true;
    console.log("clear screen");
  }
}

function gotOpen() {
  print("Serial Port is Open");
  serial.clear(); // clears the buffer of any outstanding data
}

Arduino代码：

#define BUTTON_PIN 4
#define POTX = A0;
#define POTY = A1;

int potXVal = 0;
int potYVal = 0;
int btnState = 0;

int num[3];

void setup() {
  Serial.begin(9600);
  pinMode(BUTTON_PIN, INPUT);
}

void loop() {
  potXVal = analogRead(A0);
  num[0] = potXVal;
  Serial.print(num[0]);
  Serial.print(",");
  potYVal = analogRead(A1);
  num[1] = potYVal;
  Serial.print(num[1]);
  Serial.print(",");
  btnState = digitalRead(BUTTON_PIN);
  if (btnState == LOW) {
    num[2] = 1;
  } else {
    num[2] = 0;
  }
  Serial.println(num[2]);  // Ends with line feed
  delay(100);
}