Arduino und P5.js

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.

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 + i on Mac or ctrl + shift + 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 can start using p5.js with Arduino.

P5.js to Arduino

First of all, you will need serial.js file to import file into your html:

<!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>

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 + ">");
  }
}