arduinop5.jsarduino-unoarduino-idetinkercad

P5.js and mapping Arduino Button


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 Arduino routing on Tinkercad


Solution

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