Lab: Serial Input to P5.js

For this lab I setup an interface between an Arduino Nano 33 IoT, reading analog values from a potentiometer, and a P5.js sketch. Typically web browsers do not interface with serial ports on a computer so I had to use some additional software including the P5.serialport library and the P5.serialcontrol app by Shawn Van Every (updated by Jiwon Shin). 

Here is the circuit that I setup using an Arduino Nano 33 IoT and potentiometer input to A0:

After installing the library and app for serial control via the Node Package Manager I setup my Arduino and uploaded a sketch to output readings from the potentiometer using this sketch.

void setup() {
  Serial.begin(9600); // initialize serial communications
}
 
void loop() {
  int potentiometer = analogRead(A0);                  // read the input pin
  int mappedPot = map(potentiometer, 0, 1023, 0, 255); // remap the pot value to fit in 1 byte
  Serial.write(mappedPot);                             // print it out the serial port, modified to 'println' for the image below
  delay(1);                                            // slight delay to stabilize the ADC
}

Knowing that the Arduino serial monitor would output gibberish with the ‘Serial.write()’ function I tested with ‘Serial.println()’ first to ensure everything was working properly on the Arduino end of things.

Next I installed the P5.serialcontrol app to read the serial input and relay to P5.js – this went smoothly and I quickly had serial output from the Arduino displaying in the P5.serialcontrol app serial console.

Getting this data to the browser in Safari lead to some headaches. Ultimately I found that the same P5.js sketch works in Chrome but not in Safari, so I switched to Chrome for the rest of the project.

Very cool! With P5.js interfacing through P5.serialcontrol to the Arduino serial output I was able to draw some graphs and see the effect of a longer delay in the Arduino output.

It was helpful to start to see the various ways of controlling serial output from the Arduino and to compare the differences of sending data as binary (single bytes) or a string (encoded in ASCII).

On to the next lab!