In the spirit of the two-way serial lab, I made a p5 sketch that graphs the state of two potentiometers and a button. First, the Arduino keeps trying to send a handshake to p5. Once p5 receives and acknowledges the handshake, the Arduino begins sending readings as comma-separated values: pot1Value, pot2Value, buttonPressed (where pot1Value and pot2Value are integers, and buttonPressed is a boolean). The p5 sketch plots pot1Value and pot2Value as a bar graph, and displays a green circle whenever the button is pressed.

A screenshot of the p5 sketch.
The setup in action.

I found the handshaking to be pretty unreliable, though. If I reloaded the p5 sketch, the handshake would fail since the Arduino would no longer be sending it - it would keep sending values indefinitely. I assumed that just pressing the reset button on my Arduino would fix this by restarting the program, but it didn't seem to. Even unplugging and re-plugging the Arduino didn't work. The only way to get the handshake to work again seemed to be to restart the p5serialcontrol service, then plug in the Arduino, then load the p5 sketch.

The fact that restarting p5serialcontrol was the key made me think - maybe it has to with buffering! If the Arduino is sending data faster than p5 can process it, a buffer will build up, which could mess with things on restart. So I added a delay(100) into my loop() on the Arduino side, only sending data every 1/10th of a second. This fixed things! Now I can start the handshake again just by reloading the p5 sketch and resetting the Arduino.

Arduino Code

p5 Code

Not shown: you need to include p5.serialport.js in your index.html.