p5.js serial port communication with Arduino

app.js

// Be sure to choose File > Import Library > p5.serialport.js from the P5 IDE main menu to load serial library

// Terminal command to install p5.serialserver:  npm install p5.serialserver
// Terminal command to start server:  node ~/node_modules/p5.serialserver/startserver.js

let serial; // variable to hold an instance of the serialport library
let options = {
  baudrate: 9600
}; // set baudrate to 9600; must match Arduino baudrate
//let portName = '/dev/cu.HC-05-DevB';
//let portName = '/dev/cu.Bluetooth-Incoming-Port';
let portName = '/dev/cu.usbmodem14621'; // fill in serial port name
let data; // for incoming serial data
let val;
let r, g, b, c, d;
//let threshold = 10;
let cBtn, bBtn, wBtn, resetBtn, eraseBtn, clearBtn;
let btnPosX, btnPosY;
let radiusHigh;

function init() {
  createCanvas(windowWidth, windowHeight); // make the canvas
  serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on('data', serialEvent); // callback for when new data arrives
  serial.open(portName, options); // open a serial port @ 9600 

  background(220);

  btnPosX = width / 10;
  btnPosY = height / 10;

  cBtn = createButton("Pick Color!"); // color picker button
  cBtn.position(width - btnPosX, btnPosY);
  cBtn.mousePressed(colorPicker);

  resetBtn = createButton("Reset"); // color reset button
  resetBtn.position(width - btnPosX, btnPosY + 25);
  resetBtn.mousePressed(resetColor);

  eraseBtn = createButton("Eraser"); // eraser button
  eraseBtn.position(width - btnPosX, btnPosY + 50);
  eraseBtn.mousePressed(eraser);

  clearBtn = createButton("Clear"); // clear canvas button
  clearBtn.position(width - btnPosX, btnPosY + 75);
  clearBtn.mousePressed(clearCanvas);

  fill(0); // initiate color to black
}

function spray() {
  stroke(0);
  rect(width - btnPosX + 5, btnPosY - 70, 60, 60);

  radiusHigh = d * 0.5;

  if (d > 0) {
    for (let i = 0; i <= 1000; i++) {
      let angle = random(TWO_PI);
      let radius = random(0, radiusHigh);
      let offsetX = radius * cos(angle);
      let offsetY = radius * sin(angle);
      let sizeX = random(1.2);
      let sizeY = random(1.2);
      //fill(r, g, b);
      noStroke();
      rect(mouseX + offsetX, mouseY + offsetY, sizeX, sizeY);
    }
    // if pointer stays at one point, increase diameter of spray nozzle
    if (d > 0 && mouseX == mouseX) {
      for (let i = 0; i <= 1200; i++) {
        let angle = random(TWO_PI);
        radiusHigh = radiusHigh + 0.032;
        let radius = random(0, radiusHigh);
        let offsetX = radius * cos(angle);
        let offsetY = radius * sin(angle);
        let sizeX = random(1.2);
        let sizeY = random(1.2);
        //                let fDist = dist(mouseX, offsetX, mouseY, offsetY);
        //                let flow = random(-fDist, fDist);
        //console.log(fDist);
        noStroke();
        rect(mouseX + offsetX, mouseY + offsetY, sizeX, sizeY);
        //                ellipse(mouseX + flow, mouseY + 100, 5, 5);
      }
    }
  }
}

function serialEvent() {
  data = serial.readStringUntil("/");
  //console.log(data);
  // let arr = data.split(",").map((item) => item.trim());
  val = data.split(",");
  r = Number(val[0]);
  g = Number(val[1]);
  b = Number(val[2]);
  c = Number(val[3]);
  d = Number(val[4]);

  d = map(d, 50, 1000, 0, 100);

  r *= 255;
  r /= c;
  g *= 255;
  g /= c;
  b *= 255;
  b /= c;

  r = parseInt(r);
  g = parseInt(g);
  b = parseInt(b);
}

function colorPicker() {
  fill(r, g, b);
}

function resetColor() {
  fill(0);
}

function eraser() {
  fill(220);
}

function clearCanvas() {
  background(220);
}