In this tutorial we will look at a quick demonstration of a serial bridge between an esp32 and a p5js sketch.
Because web browsers are sandboxed and do not generally permit direct serial messages (this is changing in 2024 –but not solved yet). We will use p5 serial control to create a bridge between our devices.
P5 serial control is being deprecated and replaced with a non-graphical node server — but its easier when getting started to use the graphical bridge at first. Access to this tool may end at any time — for example, it is known to not work on apple silicon. You need to run the node server in this case.
In this system we are sending message from our huzzah32 to p5serial control and then passing that data to a p5js sketch in a browser. Under the hood, p5 serial control listens for serial messages coming in and then passes them to p5 via a web socket.
Like all things networkedArt — its not hard but there are many little details that can trip you up — I have tried to highlight them in the video.
Circuit
The pot is connected to pin A2, the button has a 1K (brown black red) pull-up resistor connected to 3.3V and a 10K ( brown black orange) pull-down resistor connected to ground. Make sure you jumper the red rails together.
VIDEO
Code
grab the arduino and p5js code from github:
or