const serial = new p5.WebSerial();

​

// HTML button object:

let portButton;

// for incoming serial data

let inData;

// for outgoing data

let outByte = 0;

​

// arduino number

let lineX = 0;

let lineY = 0;

let prevSensorX = 0,

  prevSensorY = 0;

let sensorX = 0,

  sensorY = 0;

let finalRectSize = 200,

  textSizeValue = 20;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // check to see if serial is available:

  if (!navigator.serial) {

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

  }

  // if serial is available, add connect/disconnect listeners:

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

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

  // check for any ports that are available:

  serial.getPorts();

  // if there's no port chosen, choose one:

  serial.on("noport", makePortButton);

  // open whatever port is available:

  serial.on("portavailable", openPort);

  // handle serial errors:

  serial.on("requesterror", portError);

  // handle any incoming serial data:

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

​

  background(0);

​

  //the final rect

  finalRectX = random(width - finalRectSize);

  finalRectY = random(height - finalRectSize);

  rect(finalRectX, finalRectX, finalRectSize, finalRectSize);

​

  // Write "hit me" text under the white rectangle

  fill(255);

  textSize(textSizeValue);

  textAlign(CENTER, CENTER);

  text(

    "HIT ME",

    finalRectX + finalRectSize / 2,

    finalRectX + finalRectSize + 10

  );

}

​

function draw() {

  // Calculate the change in sensor values

  let sensorXChange = sensorX - prevSensorX;

  let sensorYChange = sensorY - prevSensorY;

​

  // Determine the new line endpoint position

  lineX += sensorXChange;

  lineY += sensorYChange;

​

  // Draw the line and leave traces

  stroke(255);

  strokeWeight(2.5);

  line(prevSensorX, prevSensorY, lineX, prevSensorY);

  line(lineX, prevSensorY, lineX, lineY);

​

  prevSensorX = sensorX;

  prevSensorY = sensorY;

​

  // Generate a random number between 0 and 1

  let randomValue = random();

​

  // Define colors inspired by Broadway Boogie Woogie

  let colors = [

    color(0), // White

    color(255, 165, 0), // Orange

    color(255, 204, 0), // Yellow

    color(255, 0, 0), // Red

    color(0, 0, 255), // Blue

  ];

​

  // Determine the color based on the random value

  let chosenColor;

  if (randomValue < 0.2) {

    chosenColor = colors[2]; // Yellow

  } else if (randomValue < 0.4) {

    chosenColor = colors[3]; // Red

  } else if (randomValue < 0.6) {

    chosenColor = colors[4]; // Blue

  } else {

    chosenColor = colors[1]; // Black

  }

​

  // Draw a square with the chosen color

  fill(chosenColor);

  noStroke();

  rect(lineX, lineY, 15, 15);

​

  // Clear the canvas and reset the background

  if (

    lineX > finalRectX &&

    lineX < finalRectX + finalRectSize &&

    lineY > finalRectY &&

    lineY < finalRectY + finalRectSize

  ) {

    saveCanvas('savedImage', 'png');

    clear();

    background(0);

​

    // Decrease the size of the final rect by 10

    finalRectSize -= 25;

    if (finalRectSize < 10) {

      finalRectSize = 10;

    }

    // Decrease the text size

    textSizeValue -= 2;

    if (textSizeValue < 10) {

      textSizeValue = 10;

    }

​

    // Generate a new random location for the final rect

    finalRectX = random(width - finalRectSize);

    finalRectY = random(height - finalRectSize);

​

    // Draw the new final rect

    fill(random(220, 255));

    rect(finalRectX, finalRectY, finalRectSize, finalRectSize);

    // Write "hit me" text under the white rectangle

    fill(255);

    textSize(textSizeValue);

    textAlign(CENTER, CENTER);

    text(

      "HIT ME",

      finalRectX + finalRectSize / 2,

      finalRectY + finalRectSize + 10

    );

  }

}

​

// if there's no port selected,

// make a port select button appear:

function makePortButton() {

  // create and position a port chooser button:

  portButton = createButton("choose port");

  portButton.position(10, 10);

  // give the port button a mousepressed handler:

  portButton.mousePressed(choosePort);

}

​

// make the port selector window appear:

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

​

// open the selected port, and make the port

// button invisible:

function openPort() {

  // wait for the serial.open promise to return,

  // then call the initiateSerial function

  serial.open().then(initiateSerial);

​

  // once the port opens, let the user know:

  function initiateSerial() {

    console.log("port open");

  }

  // hide the port button once a port is chosen:

  if (portButton) portButton.hide();

}

​

// pop up an alert if there's a port error:

function portError(err) {

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

}

​

// read any incoming data as a string

// (assumes a newline at the end of it):

function serialEvent() {

  let inString = serial.readLine();

  if (inString) {

    let data = split(inString, ",");

    if (data.length === 2) {

      // Convert sensor data to numbers and update global variables

      sensorX = map(int(data[0]), 0, 100, 0, width); // Update global sensorX

      sensorY = map(int(data[1]), 0, 100, 0, height); // Update global sensorY

    }

  }

}

​

// try to connect if a new serial port

// gets added (i.e. plugged in via USB):

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

​

// if a port is disconnected:

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}

​

function closePort() {

  serial.close();

}

​