After the I knew the port, the next task was communication between the Nano and the p5.js web editor, this is no easy task luckily the aforementioned program , P5.serialcontrol comes to the rescue again. This is especially important for this communication to work since the p5.js environment and the Nano cannot natively communicate. The code is rather complex and includes a library file.

The library file is very long find it at the link below.

https://github.com/p5-serial/p5.serialport/blob/master/lib/p5.serialport.js

Here is the code to interface with the potentiometer connected to the Nano.

// let serial; // variable to hold an instance of the serialport library
 
// function setup() {
//   serial = new p5.SerialPort(); // make a new instance of the serialport library
//   serial.on('list', printList); // set a callback function for the serialport list event
 
//   serial.list(); // list the serial ports
// }
 
// // get the list of ports:
// function printList(portList) {
//   // portList is an array of serial port names
//   for (var i = 0; i < portList.length; i++) {
//     // Display the list the console:
//     console.log(i + portList[i]);
//   }
// }
let xPos = 0; 
let serial;          // variable to hold an instance of the serialport library
let portName = 'COM4';  // fill in your serial port name here
let inData;                             // for incoming se 

function setup() {
  createCanvas(1200, 500);
  background(0x08, 0x16, 0x40);
  serial = new p5.SerialPort();       // make a new instance of the serialport library
  serial.list();
  serial.open('COM4');
  serial.on('list', printList);  // set a callback function for the serialport list event
  serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen);        // callback for the port opening
  serial.on('data', serialEvent);     // callback for when new data arrives
  serial.on('error', serialError);    // callback for errors
  serial.on('close', portClose);      // callback for the port closing
 
  // serial.list();                      // list the serial ports
  // serial.open(portName);              // open a serial port
  
}
 
function graphData(newData) {
  // map the range of the input to the window height:
  var yPos = map(newData, 0, 255, 0, height);
  // draw the line in a pretty color:
  stroke(0xA8, 0xD9, 0xA7);
  line(xPos, height, xPos, height - yPos);
  // at the edge of the screen, go back to the beginning:
  if (xPos >= width) {
    xPos = 0;
    // clear the screen by resetting the background:
    background(0x08, 0x16, 0x40);
  } else {
    // increment the horizontal position for the next reading:
    xPos++;
  }
}

// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    console.log(i + portList[i]);
  }
}

function serverConnected() {
  console.log('connected to server.');
}
 
function portOpen() {
  console.log('the serial port opened.')
}
 
function serialEvent() {
 inData = Number(serial.read());
}
 
function serialError(err) {
  console.log('Something went wrong with the serial port. ' + err);
}
 
function portClose() {
  console.log('The serial port closed.');
}

function draw(){
  // background(0);
  //  fill(255);
  //  text("sensor value: " + inData, 2, 10);
  graphData(inData);
}