P5.js and mapping Arduino Button

Question

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

Related/repost? Mapping P5.js to Arduino potentiometers and push buttons — ggorlen
– ggorlen, Commented Apr 10, 2024 at 18:28
Hello! Yes this post is related. Thank you for adding the link! I will try to remember to include that if needed next time. — K-PopCorn
– K-PopCorn, Commented Apr 10, 2024 at 19:09

apodidae · Accepted Answer · 2024-04-12 01:30:03Z

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);
}

Collectives™ on Stack Overflow

P5.js and mapping Arduino Button

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related