P5.js as a web-based language that can be used with Arduino to allow a fast exchange of information between Arduino and a website. It is the officially supported JavaScript-based library for Processing and renders natively to the Canvas element. P5.js implementation has a very similar API as Processing, despite being written in JavaScript and not Java.
P5.js Mode in Processing
For a communication between p5.js and Arduino, we will use WebSerial API, which enables the websites to communicate with peripherals connected to the computer. Currently, Web Serial only runs on Internet Explorer and Chrome, so to use it, you need to install Chrome (or a Chrome-based) browser. To check if your browser supports WebSerial open a console (cmd + option+ i on Mac or ctrl + alt + i on Windows) and type in:
await navigator.serial.requestPort();
If the browser supports it, you will see a pop-up window, where you can choose one of the ports with Arduino plugged in.
If everything works you are (almost) set! 🔥
BE CAREFUL! If you have Serial port monitor open the connection is going to break up.
To write code in p5.js we will use Processing, with p5.js mode enabled. Running the sketch opens a live server directly in the browser.
An index.html file is created in each new sketch folder. It contains a section where each .js file from the sketch is added automatically. Removing this block of code (it’s clearly marked in the file) will cause the sketch to no longer run inside the PDE.
Add library files or additional code to the libraries subfolder of the sketch. References to that code will automatically be added to the HTML file, though the libraries won’t be visible as tabs in the Editor.
Like everything else in the PDE, this uses the data folder (unlike many p5js examples which use an assets folder). Because sketches must specify assets in the path, it's just as easy to do that as to specify data instead (rather than rewrite file handling in the PDE).
First download the code:
To make use of WebSerial API make sure that you include serial.js in libraries subfolder (as in the example) or use jsDelivr service:
<script src="https://cdn.jsdelivr.net/gh/makeabilitylab/p5js/_libraries/serial.js"></script>
To connect with already connected port use: serial.autoConnectAndOpenPreviouslyApprovedPort(serialOptions);
To open the port menu use:
serial.connectAndOpen(portInfo, serialOptions);
serial.on subscribes to the events of the Serial class and handles the proper communication between WebSerial API and Arduino.
serialWriteTextData(); and serialWriteNumberData(); uses serial.writeLine(); to write values to Arduino. Notice the extra “<“ and “>” signs, which mark the beginning and end of a message.
Alternative Method with IDE
Install VS Code : https://code.visualstudio.com/docs/setup/setup-overview
Follow the steps in the video to properly setup p5.js in VS Code.
Download the file, unzip it and open the folder in VS Code either by draggin into into the window or by opening it via Taskbar:
Your screen should look like this:
