let obstacles = [];

let xPositions = [];

let obstacleSpeed = 1; // Initial speed of obstacles

let speedIncrement = 0.4;

// A sketch that resizes itself to fill the window

// Mangtronix - 2020-09-30

// MIT License

​

​

let help = "Press f (possibly twice) to toggle fullscreen";

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  print(help);

  xPositions = [windowWidth * (3 / 12), windowWidth * (5 / 12), windowWidth * (7 / 12), windowWidth * (9 / 12)];

}

​

function draw() {

  background('#FFFFFF');

  fill('#bae1ff');

  rect(windowWidth*(2/12), 0, windowWidth*(2/12), windowHeight);

  fill('#ffb3ba');

  rect(windowWidth*(4/12), 0, windowWidth*(2/12), windowHeight);

  fill('#ffffba');

  rect(windowWidth*(6/12), 0, windowWidth*(2/12), windowHeight);

  fill('#baffc9');

  rect(windowWidth*(8/12), 0, windowWidth*(2/12), windowHeight);

  // let border = 30;

  // background('#009bb4');

  // // A rectangle

  // fill('#f39100');

  // noStroke();

  // rect(border, border, windowWidth - 2 * border, windowHeight - 2 * border);

  fill(0);

  ellipse(circleX, windowHeight*(2/3), 50, 50);

  // Use the received distance value to control the size of the ellipse

  // let ellipseSize = map(distance, 0, 100, 10, 200); // Map the distance to ellipse size

    // Create obstacles randomly

  if (frameCount % 40 === 0) {

    let randomIndex = floor(random(xPositions.length));

    let randomX = xPositions[randomIndex];

    let obstacle = new Obstacle(randomX);

    obstacles.push(obstacle);

  }

  if (frameCount % 300 === 0) { 

    obstacleSpeed += speedIncrement; // Increase the speed

  }

  // Update and display obstacles

  for (let i = obstacles.length - 1; i >= 0; i--) {

    obstacles[i].speed = obstacleSpeed; // Update obstacle speed

    obstacles[i].update();

    obstacles[i].display();

  // Update and display obstacles

  for (let i = obstacles.length - 1; i >= 0; i--) {

    obstacles[i].update();

    obstacles[i].display();

    // Remove obstacles when they reach the bottom of the screen

    if (obstacles[i].offScreen()) {

      obstacles.splice(i, 1);

    }

  }

  for (let i = 0; i < obstacles.length; i++) {

    let obstacle = obstacles[i];

    if (circleX + 25 > obstacle.x && circleX - 25 < obstacle.x + obstacle.width && windowHeight * (2 / 3) + 25 > obstacle.y && windowHeight * (2 / 3) - 25 < obstacle.y + obstacle.height) {

      gameOver();

      return; // End the draw loop

    }

  }

  }

  if (!serialActive) {

    text("Press Space Bar to select Serial Port", 20, 30);

  } else {

    text("Connected", 20, 30);

  }

}

​

function keyPressed() {

  if (key == " ") {

    // important to have in order to start the serial connection!!

    setUpSerial();

  }

}

​

// This function will be called by the web-serial library

// with each new *line* of data. The serial library reads

// the data until the newline and then gives it to us through

// this callback function

function readSerial(data) {

  ////////////////////////////////////

  //READ FROM ARDUINO HERE

  ////////////////////////////////////

​

  if (data != null) {

    // make sure there is actually a message

    // split the message

    let fromArduino = split(trim(data), ",");

    // if the right length, then proceed

    if (fromArduino.length == 1) {

      // only store values here

      // do everything with those values in the main draw loop

      if (data === '1') {

      circleX = windowWidth*(3/12); // Change circle position if '1' is received

    } else if (data === '2') {

      circleX = windowWidth*(5/12); // Change circle position if '2' is received

    } else if (data === '3') {

      circleX = windowWidth*(7/12); // Change circle position if '3' is received

    } else if (data === '4') {

      circleX = windowWidth*(9/12); // Change circle position if '4' is received

    }

    }

​

    //////////////////////////////////

    //SEND TO ARDUINO HERE (handshake)

    //////////////////////////////////

    let sendToArduino = circleX + "\n";

    writeSerial(sendToArduino);

  }

}

​

​

class Obstacle {

  constructor(x) {

    this.x = x;

    this.y = 0;

    this.speed = obstacleSpeed; // Adjust speed as needed

    this.width = 40;

    this.height = 20;

  }

  update() {

    this.y += this.speed;

  }

  display() {

    fill(255, 0, 0);

    rect(this.x, this.y, this.width, this.height);

  }

  offScreen() {

    return this.y > windowHeight;

  }

}

function gameOver() {

  noLoop(); // Stop the draw loop

  textSize(32);

  textAlign(CENTER, CENTER);

  fill(255, 0, 0);

  text("Game Over", windowWidth / 2, windowHeight / 2); // Display Game Over message

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  xPositions = [windowWidth * (3 / 12), windowWidth * (5 / 12), windowWidth * (7 / 12), windowWidth * (9 / 12)];

}

​

function keyTyped() {

  // $$$ For some reason on Chrome/Mac you may have to press f twice to toggle. Works correctly on Firefox/Mac

  if (key === 'f') {

    toggleFullscreen();

  }

  // uncomment to prevent any default behavior

  // return false;

}

​

// Toggle fullscreen state. Must be called in response

// to a user event (i.e. keyboard, mouse click)

function toggleFullscreen() {

  let fs = fullscreen(); // Get the current state

  fullscreen(!fs); // Flip it!

}

​