In this lab, I conducted 2-way duplex asynchronous serial communication.

I was able to successfully do all the labs. But when I use portselector logic with my Windows PC system it goofs up the system and my computer doesn't run serial communication further. Possibly it doesn't close serial port on exiting the program from p5.js . I have run following codes by directly putting the value of the serial port in p5.js.

Lab: 2-way Duplex Asynchronous Serial Communications

I am giving variable voltage analog input through potentiometer to analog input channels A0 and changing the circle and position of the ellipse drawn on the p5.js screen. In return, I am sending character '0' from arduino to p5.js. below is the circuit I have used. I am not using the LED shown in the below picture in this program.

Circuit

let serial; // variable to hold an instance of the serialport library
//let options = { baudrate: 9600}; // change the data rate to whatever you wish
let portName = 'COM3';  // fill in your serial port name here
let inData,outData,outByte; 
let locV =0;
let locH =0;
let circleColor =255;
let inString;

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.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, options);              // open a serial port
  serial.open(portName);              // open a serial port
  createCanvas(400,300);
  background(0);
}
 
// 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() {
  // read a string from the serial port
  // until you get carriage return and newline:
  inString = serial.readStringUntil('\\r\\n');
 
  //check to see that there's actually a string there:
  if ((inString!= "hello") && (inString.length > 0) ) {
  
 
      locH = map(inString, 0, 255, 0, width);   // element 0 is the locH
      locV = map(inString, 0, 255, 0, height); // element 1 is the locV
      circleColor = 255 - (inString * 255);      // element 2 is the button
    
  } 
  serial.write("0");
}
 
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);               // black background
  fill(255);           // fill depends on the button
  ellipse(locH, locV, 50, 50); // draw the circle
  fill(120);
  ellipse(mouseX, mouseY, 50, 50); // draw the circle
  fill(200);
  text("iS "+inString ,50,50);
  text("iS "+locH ,50,100);
  text("iS "+locV ,50,150);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js>"></script>
    
    <script language="javascript" type="text/javascript" src="<https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.serialport.js>"></script>

    <script src="<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js>"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script> 

    <!-- <script src="serial_arduino_to_p5.js"></script> -->
    
  </body>
</html>

2 way asynchronous serial communication