Public Lab Research note

Visualize live sensor data with p5js and an Arduino

by warren | February 08, 2018 04:39 08 Feb 04:39 | #15701 | #15701

(This is a draft!) I made a simple p5js sketch (read below) to live sensor data off of an Arduino, from a web page -- with no drivers or cables, just audio tones. It's not perfect, but it's an interesting starting point and it's pretty neat. The sketch is here:

The Arduino sketch to use with this is here, and you can load it onto most Arduinos, although I tested an Arduino Nano and an Arduino Uno:

If you don't have an Arduino on hand, you can test it out with this test audio, recorded from a sensor by @donblair:

If you do set it up on an Arduino, WebJack will output audio from pin 3 + ground. Use (splice?) an audio cable from those to a speaker or just plug it into your computer's microphone port if it has one.\

The demo isn't anything fancy; it just draws a pink circle higher and lower on the screen:image description

The Shinyei dust sensor

The #shinyei dust sensor (the black box at the top of the lead picture) is not a perfect sensor -- it has a lot of limitations, but it's only $20-30 on Amazon, and only $8 on AliExpress, and it reads #PM10 and #PM2.5 .

In the above photo, I connected it to an Arduino using the Serial #DustDuino sketch, modified for #WebJack. The DustDuino project and others like the Speck project have really done a lot with this sensor, although I believe more recent projects like #PurpleAir use a different one that's trying to get better data.

Anyhow, I'd like to get this graphing nicely in p5js... shouldn't be too hard, but I'm looking for collaborators if you want to give it a try! Here, I show the basic WebJack graphing demo with the Shinyei sensor and some chalkboard dust:


WebJack (by @rmeister and I as part of Google Summer of Code -- #gsoc) is a way to read data from an Arduino (and other sources) using audio -- it basically turns your Arduino into an audio modem. Arduinos are inexpensive ($4-22) electronics boards which can read from a sensor and -- in this case -- generate audio tones with the data.

The audio tones (a kind of chirping sound) can be read by a web page without any cables or software, even on a phone. This is already a demo at the WebJack page.


p5js is an awesome platform for writing short visual code sketches -- based on Processing, for those who are familiar with that platform. They recently got a really nice web editor, so you can just write sketches online now:

I did this Help out by offering feedback! Browse other activities for "webjack"

People who did this (0)

None yet. Be the first to post one!


I also proposed this p5js sketch as an example for the p5js web editor:

Reply to this comment...

Hi, @cfastie - do you think this could be adapted pretty easily for live debugging from a #nano-data-logger or #mini-pearl-logger ?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

I have not used graphing for live debugging because I didn't know how easy it was to do. I use the live serial monitor in the Arduino IDE all the time, but it also has a serial plotter built in. So if values are written to serial from an Arduino singly or separated by comma, spaces, or tabs, the serial plotter will display a time-series graph.

This doesn't require anything that you don't already have working if you are using sensors connected to Arduinos. I'm sure there are advantages to using the additional WebJack hardware (but I bet few people reading this could name one) and there are certainly benefits to knowing how to code in Processing (but asking the common folk to learn ANOTHER language just to make a graph is not the best way to encourage computer literacy).

Maybe I need to hear about a scenario in which WebJack would save the day:

We are trapped in an old power plant that is about to blow. The only things we have are a phone, an Arduino, a headphone jack, and MacGyver's phone number. What should we do?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Oh, that plotter looks great! Thanks for sharing!

So, there are a lot of people out there teaching each other to make great visualizations in the p5js community, who are interested in using live sensor data, but hadn't been able to without some relatively brittle interfaces like a serial-javascript browser extension. So this'll be a nice way to engage a whole lot of expertise on data visualization from that community. They seem excited about it and are suggesting this be included as one of the standard "example sketches" for p5js, which'll be great.

Reply to this comment...

@cfastie love the MacGyver example--laughed so hard at this. @warren ty for bringing this up during the recent weekly call. I knew this language rang a bell and it's because I came across it when I first looked into Processing (something I still need to learn). I think there is merit in connecting sensors and p5js because there are a lot of artists and data viz people that are interested in taking the next step, and this may be something they speak. I also think that the whole webjack thing has a lovely old-school quality that some people will find interesting.

Reply to this comment...

Looking at better breadboardable headphone jacks!

Reply to this comment...

Reply to this comment...

Just compiling some quick links to where these parts can be found cheaply and easily:

For these, it'd be about $21 per kit.

Also, add $14 for a nicer sensor:

Reply to this comment...

Here's a pic of a WebJack plug (using a 4-pin jack) attached to pins 3 and 6 of the #Simple-Air-Sensor, which has WebJack installed by default:


cc @mimiss 😃

Is this a question? Click here to post it to the Questions page.

TRRS plugs (4-pin plugs) are not super consistent, but this worked for me. I'll try to upload another pic with the exact pins of the jack also shown!

Reply to this comment...

Login to comment.