​

let portButton;

let inData = 0; // Variable to hold incoming serial data, acting as volume level

let bgcolor;

​

function setup() {

  createCanvas(600, 600);

​

  // Initialize background color

  bgcolor = color(250);

​

  // Initialize serial communication

  if (!navigator.serial) {

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

  }

​

  serial.getPorts();

  serial.on("noport", makePortButton);

  serial.on("portavailable", openPort);

  serial.on("requesterror", portError);

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

​

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

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

}

​

function draw() {

  background(bgcolor);

​

  // Normalize the data to a smaller range for visual effects

  let vol = map(inData, 0, 10000000, 0, 1); // Adjust the upper limit based on observed data range

​

  // Make the background color change more sensitive

  if (vol > 0.05) {  // Lowered threshold to make color change more sensitive

    bgcolor = color(random(200, 255), random(200, 255), random(200, 255)); // Brighter colors

  }

​

  // Draw circles with sizes based on normalized volume level

  let sizeFactor = vol * 500; // Increased size factor for more noticeable change

  fill("purple");

  ellipse(500, 500, sizeFactor, sizeFactor);

  fill("yellow");

  ellipse(400, 400, sizeFactor, sizeFactor);

  fill("blue");

  ellipse(300, 300, sizeFactor, sizeFactor);

  fill("red");

  ellipse(200, 200, sizeFactor, sizeFactor);

  fill("green");

  ellipse(100, 100, sizeFactor, sizeFactor);

​

  // Display the current volume level as text for debugging

  fill(0);

  textSize(20);

  text("Volume Level: " + inData, 10, height - 30);

}

​

// Handle incoming serial data from the Arduino

function serialEvent() {

  let data = serial.readLine();

  if (data) {

    inData = parseInt(data.trim());

    console.log("Received data:", inData); // Debug: Log the incoming data

  }

}

​

// Button for selecting the serial port

function makePortButton() {

  portButton = createButton("Choose Serial Port");

  portButton.position(10, 10);

  portButton.mousePressed(() => serial.requestPort());

}

​

// Open serial port when available

function openPort() {

  serial.open().then(() => {

    if (portButton) portButton.hide();

  });

}

​

// Handle port connection and disconnection

function portConnect() {

  console.log("Port connected.");

}

​

function portDisconnect() {

  console.log("Port disconnected.");

  makePortButton(); // Show the button to reconnect

}

​

function portError(err) {

  console.error("Serial port error: " + err);

}

​