I am new here! I have a school project that I am working on. I am trying to make a etch-a-sketch using an Arduino Uno, Arduino IDE, and p5.js. On the Arduino I have two potentiometers and a button. All three values are being read correctly by the Arduino IDE and in p5.js. The issue I am having is mapping correctly. The potentiometers are drawing without using the mapping that my professor suggested (I am not sure why) but I am trying to get the button to clear the canvas when it is pressed. The logic I am using does not work. Any help is appreciated.
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;
//}
//}
A link to the Tinkercad where the Arduino IDE code can be viewed as well as how I set up the physical arduino: https://www.tinkercad.com/things/2aAKAbBGa4M-fantabulous-blorr-hillar/editel
The following source code cleared the screen on my system. The method that I used was to create an array of three integers on the Arduino side and send them as comma separated values terminated with a line feed. The three integers were as follows: 1. XValue, 2. YValue, 3. btnState (either 0 or 1). On the p5 side, I recreated the array and cleared the screen when sensors[2] was equal to 1 (button pressed). I don't think you have to do any 'mapping' for the button; checking the value of the third array element should suffice. I didn't hook up the pots since I only had one; the push button was wired using an internet schematic, but was similar to your wiring. Arduino code follows the p5 code:
p5 code:
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 code:
#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);
}