let latestData = "wait"; // variable to hold the

let val = 0; // Variable to store a value for serial communication

let colorValue = 0;

​

function setup() {

  createCanvas(1000, 800);

  textSize(18);

  // serial constructor

  serial = new p5.SerialPort();

​

  // serial port to use - you'll need to change this

  serial.open("/dev/tty.usbmodem14301");

​

  // what to do when we get serial data

  serial.on("data", gotData);

}

​

// Callback function for processing received serial data

function gotData() {

  let currentString = serial.readLine(); // Read the incoming data as a string

  trim(currentString); // Remove any leading/trailing whitespace

  if (!currentString) return; // If the string is empty, do nothing

  console.log(currentString); // Log the data to the console for debugging

  latestData = currentString; // Update the latestData variable

}

​

function draw() {

  background(211, 215, 255);

  fill(102, 11, 229);

​

  // Map the latestData to a rotational degree value

  let rotDeg = map(latestData, 0, 1000, 0, 10000);

​

  // Check for the space bar key press to start

  if (key != " ") {

    // Display the starting screen

    textSize(30);

    fill(0, 0, 0);

    rect(0, 0, 1000, 800); // Draw a black rectangle covering the canvas

    fill(200, 200, 200); // Set text color

    text("PRESS SPACE BAR TO START THE HFR", width / 4, height / 2);

  } else {

    // Main interaction screen

    // Display forward and backward areas and instructions

    textSize(18);

​

    // Forward area

    fill(102, 11, 229);

    rect(890, 0, 110, 1000); // Draw the forward area

    fill(255, 245, 224);

    text("FORWARD", 900, 450); // Label for the forward area

​

        // Backward area

    fill(102, 11, 229);

    rect(0, 0, 110, 1000); // Draw the backward area

    fill(255, 255, 255);

    text("BACKWARD", 0, 450); // Label for the backward area

​

        // Draw the robot representation

    fill(35, 45, 63);

    rect(500, -100, 100, 600);  // Draw the robot's body

    fill(180, 101, 229);

    rect(500, 500, 100, -rotDeg); // Draw the robot's moving part

​

        // Additional robot features

    fill(200, 120, 157);

    rect(500, 500, 100, 80); // Base of the moving part

    fill(0, 0, 0);

    rect(460, 580, 40, -30); // Left wheel

    rect(600, 580, 40, -30); // Right wheel

    fill(255, 255, 255);

    text(latestData, 540, 560); // Display the latest data

        // Display control instructions

    fill("black");

    text("Control the Robot:\n\n", 470, 600);

    text(

      "Forward Movement:\n" +

        "- 'Forward' area on right\n" +

        "- Click to move forward\n" +

        "- Click again to stop\n\n",

      670,

      650

    );

    text(

      "Backward Movement:\n" +

        "- 'Backward' area on left\n" +

        "- Click to move backward\n" +

        "- Click again to stop\n\n",

      150,

      650

    );

    text("Move mouse to desired side and click to control movement!", 300, 770);

    textStyle(BOLD);

​

​

        // Serial communication based on mouse position

    if (!colorValue) {

      if (mouseX <= width / 2) {

        val = 1; // Set val to 1 if mouse is on the left half

        serial.write(val); // Send val to the serial port

        console.log("Left"); // Log the action

      } else {

        val = 0; // Set val to 0 if mouse is on the right half

        serial.write(val); // Send val to the serial port

        console.log("Right"); // Log the action

      }

    }

  }

    // Draw a circle at the mouse position

  fill(255, 255, 255);

  ellipse(mouseX, mouseY, 10, 10);

}

// Function to handle mouse click events

function mouseClicked() {

  if (colorValue === 0) {

    colorValue = 255;

  } else {

    colorValue = 0;

  }

}

​