For the What Does Health Look Like workshop that Laura Pullig organised with DoES Liverpool we took sensor data and fed it into p5js sketches so that participants could experiment with visualizing data from sensors they’d built.

We got good results from that, but the combination of micro:bits and the p5serial.js library was tricky to set up (requiring software to be installed on your computer, and after that getting the right serial port to open correctly was a bit hit-and-miss) and not particularly responsive (reporting values about once-a-second or slower).

There’s a follow-up part to the project where we’ll be visualizing data from dancers, so we wanted something that reported faster. If it also led to something easier to work with that would be a bonus too.

Moving to another of our favourite microcontrollers—the ESP8266 and ESP32 boards—would allow us to push the data straight to the Internet, removing the need to use p5serial.js. A quick Arduino test showed we could push data up much faster: in the video below a new reading is made roughly every 50 milliseconds.

We then needed to get the data from MQTT and into p5js. The Open Processing environment we were using to develop in p5js doesn’t have an MQTT or plain Websockets library, but it does include SocketIO.

So we built a small “bridge” server, which provides a SocketIO interface through to your chosen MQTT broker.

The bridge code is released as open source (and available on Github), and we’ve made it trivial to deploy to your own Heroku account, to make it easy for anyone who needs to bridge between physical computing and p5js to get up and running.

Here’s a quick video of it in operation. Inside my shoe, under the ball of my foot, is one of the DIY velostat pressure sensors we built in the workshop, hooked up to the ESP8266 board and LiPo battery tied to my laces and running Jackie Pease’s MQTT sensor Arduino sketch. That pushes data up to an MQTT broker and from there through the MQTT-SocketIO bridge to a p5js sketch which graphs the last 200 readings.

Testing pressure-sensor to p5js visualisation from MCQN Ltd on Vimeo.