Can P5.js or Processing read the output of the Sense HAT on a Raspberry Pi 3?

Question

My objective is to create interactive art by taking the inputs from the Sense Hat and using the values read to update a drawing created with p5.js or processing.

Is there a way to do this?

I thought of:

• writing a python script which then passes the values to JavaScript every delta-t?
• reading the values of various pins from a JS program? (for example, what is the voltage value of the pin associated with humidity, etc)
• is there a JavaScript API for the Sense HAT?

Any tips or general direction to investigate is welcome.

Answer 1

Generally speaking, JavaScript scripts are not given direct access to hardware by the browser. This would be an enormous security vulnerability; imagine going on to a website and it can then access everything connected to your computer. Not good.

That said, you can still achieve what you want a slightly different way. Your Pi needs to be a web server; you could use a library such as Python's Flask to serve up a simple web API. Then your client-side scripts can simply send a request to your Pi server, which then fetches the data through Python. A trivial example would be as follows:

from flask import Flask
app = Flask(__name__)

@app.route("/humidity")
def humidity():
    humidity = get_humidity_through_python()
    return humidity

The implementation is for you to do what you like; the code simply illustrates the point that you can serve a web page from a server in this fashion.

For a stream of data, you might consider sending the data over a Web Socket. JavaScript can connect to those, so you simply allow clients to run some JavaScript to connect to your web socket, then process the data with P5.

Answer 2

I managed to build a prototype for it. For later readers looking for a solution you can find mine here: https://github.com/alphydan/piArt

This code establishes a bridge between the Sense-Hat of a raspberry pi and a p5.js drawing in the browser.

Raspberry Pi Sensors -> Python -> websockets -> local server <- JS <- p5.js <- Browser

In this example, you can blow hot air on a raspberry pi and watch a circle go big and red on a screen. Or you can blow on the pressure sensor, and watch the circle go up.