Serial Library:

https://github.com/yoonbuck/p5.WebSerial/wiki/Guide

​

Serial handshaking and multi-value strings using p5.webserial. Sends an 'x' out the serial port on port opening, then waits for serial to come in. Expects a single integer value. Updates circle size based on audio input.

created 31 May 2022

modified 11 Jun 2022

by Tom Igoe

modified 15 Oct 2024

by David Rios

*/

​

// variable to hold an instance of the p5.webserial library:

const serial = new p5.WebSerial();

​

​

let portButton; // HTML button for selecting a serial port

let inData = 50; // Variable to store incoming serial data, default size for circle

​

// Variables for x, y position of a circle

let x = 0;

let y = 100;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  x = width / 2; // Center the circle horizontally

​

  // Check if serial is available

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

​

  // Serial event listeners

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

  serial.getPorts();

  serial.on("noport", makePortButton);

  serial.on("portavailable", openPort);

  serial.on("requesterror", portError);

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

​

  textSize(30);

}

​

function draw() {

  background(240);

  fill(255, 0, 0);

  circle(x, y, inData); // Control circle size based on incoming data

  fill(0);

  text("Circle Size: " + inData, 10, height - 20);

}

​

function serialEvent() {

  let inString = serial.readLine();

​

  if (inString) {

    inData = parseInt(inString.trim()); // Convert incoming data to an integer for size control

​

    // Limit the minimum and maximum circle sizes

    inData = constrain(inData, 10, 300);

    serial.write("x"); // Request next data packet from Arduino

  }

}

​

function makePortButton() {

  portButton = createButton("Choose Port");

  portButton.position(10, 10);

  portButton.mousePressed(choosePort);

}

​

function choosePort() {

  serial.requestPort();

}

​

function openPort() {

  serial.open().then(initiateSerial);

​

  function initiateSerial() {

    console.log("port open");

    serial.write("x");

  }

​

  if (portButton) portButton.hide();

}

​

function portError(err) {

  alert("Serial port error: " + err);

}

​

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

​

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}

​