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.
For easier code snippets you can use p5.js editor, but for working with libraries and complex code you will need to use an external IDE (VS Code in our case).
Install VS Code : https://code.visualstudio.com/docs/setup/setup-overview
Follow the seteps in the video to properly setup p5.js in VS Code
...
Although p5.js is written in JavaScript and not Java like Processing, the p5.js implementation has an almost identical API. It is therefore very easy to translate existing Processing code into p5.js e.x similar to Processing, p5.js abstracts away much of the complexity of writing JavaScript and allows to focus solely on interactive graphics and visualisations.
For a communication between p5.js and Arduino, we will use WebSerial API, which enables the webistes 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 Chromembased) browser. To check if your browser supports WebSerial open a console (cmd + shift option+ i on Mac or ctrl + shift alt + i on Windows) and type in:
...
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 can start using p5.js with Arduino.are (almost) set! 🔥
BE CAREFUL! If you have Serial port monitor open the connection is going to break up.
P5.js to Arduino
First of all, you will need serial.js file to import file into your html:
| Code Block |
|---|
|
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<script src="serial.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
<button id="connect-button" onclick="connectPort()"> Connect Port</button>
<button id="send-button" onclick="serialWriteTextData()"> Send Data</button>
</body>
</html> |
| Code Block |
|---|
|
let msg;
let serialOptions = { baudRate: 9600 };
let serial;
let clicked = false;
// Board Info which can be found in Arduino under Tools ---> Get Board Info
let portInfo = { usbVendorId: 0x3EB, usbProductId: 0x2145 }
function setup() {
createCanvas(240, 480);
// Setup Web Serial using serial.js
serial = new Serial();
serial.on(SerialEvents.CONNECTION_OPENED, onSerialConnectionOpened);
serial.on(SerialEvents.CONNECTION_CLOSED, onSerialConnectionClosed);
serial.on(SerialEvents.DATA_RECEIVED, onSerialDataReceived);
serial.on(SerialEvents.ERROR_OCCURRED, onSerialErrorOccurred);
// If we have previously approved ports, attempt to connect with them
// serial.autoConnectAndOpenPreviouslyApprovedPort(serialOptions);
// Add in a lil <p> element to provide messages. This is optional
msg = createP("");
}
async function connectPort() {
if (!serial.isOpen()) {
await serial.connectAndOpen(portInfo, serialOptions);
}
}
function draw() {
background(255);
//sendValue();
}
/**
* Callback function by serial.js when there is an error on web serial
*
* @param {} eventSender
*/
function onSerialErrorOccurred(eventSender, error) {
console.log("onSerialErrorOccurred", error);
msg.html(error);
}
/**
* Callback function by serial.js when web serial connection is opened
*
* @param {} eventSender
*/
function onSerialConnectionOpened(eventSender) {
console.log("onSerialConnectionOpened");
msg.html("Serial connection opened successfully");
}
/**
* Callback function by serial.js when web serial connection is closed
*
* @param {} eventSender
*/
function onSerialConnectionClosed(eventSender) {
console.log("onSerialConnectionClosed");
msg.html("onSerialConnectionClosed");
}
/**
* Callback function serial.js when new web serial data is received
*
* @param {*} eventSender
* @param {String} newData new data received over serial
*/
function onSerialDataReceived(eventSender, newData) {
console.log("onSerialDataReceived", newData);
msg.html("onSerialDataReceived: " + newData);
}
async function serialWriteTextData() {
const data = new Uint8Array([14, 201, 108, 255, 11]);
if (serial.isOpen()) {
console.log("Writing to serial: ", data);
serial.writeLine("<" + data + ">");
}
}Download this file, unzip it and open the folder in VS Code:File → Open... → p5Arduino
Your screen should look like this:
...