let gridColors = [];

let gridSize = 2;

let ellipseSize = 100;

let currentPage = 0;

let startImage;

let timer = 5;

let timerActive = false;

let left = 0;

let right = 0;

​

let ArrowRight = 0;

let ArrowLeft = 0;

let ArrowUp = 0;

let ArrowDown = 0;

let ButtonPressed = 0;

​

function preload() {

  startImage = loadImage("Start.jpeg");

}

​

function randomColor() {

  return color(random(255), random(255), random(255));

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noLoop();

  currentColor = randomColor();

  nextColor = randomColor();

  // Initialize grid colors including the currentColor

  gridColors = Array.from({ length: gridSize * gridSize }, () => randomColor());

  gridColors[int(random(gridSize * gridSize))] = currentColor;

  print("hello " + gridColors);

  print("hi " + currentColor);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function drawStartPage() {

  background(startImage);

  fill(0);

  rect(width / 2 - 30, height / 2 - 20, 60, 40);

  fill(255);

  textAlign(CENTER, CENTER);

  text("Start", width / 2, height / 2);

}

​

function startTimer() {

  let interval = setInterval(() => {

    timer--;

    if (timer <= 0) {

      clearInterval(interval);

      currentPage++;

      timerActive = false;

      redraw();

    }

  }, 1000);

}

​

function drawFirstPage() {

  fill(currentColor);

  ellipse(width / 2, height / 2, 120, 120);

  if (!timerActive) {

    timerActive = true;

    startTimer();

  }

}

​

function prepareNextLevel() {

  currentColor = nextColor;

  nextColor = randomColor();

  gridColors = Array.from({ length: gridSize * gridSize }, () => randomColor());

  gridColors[int(random(gridSize * gridSize))] = currentColor;

  redraw();

}

​

function drawGamePage() {

  background(220);

  if (currentPage > 1) {

    let selected = -1;

    // Map arrow keys to grid positions

    if (ArrowUp == 1 && ButtonPressed == 0) {

      selected = 0; // Top-left

      ButtonPressed = 1;

    } else if (ArrowDown == 1 && ButtonPressed == 0) {

      selected = 1;

      ButtonPressed = 1; // Top-right

    } else if (ArrowRight == 1 && ButtonPressed == 0) {

      selected = 2;

      ButtonPressed = 1; // Bottom-left

    } else if (ArrowLeft == 1 && ButtonPressed == 0) {

      selected = 3;

      ButtonPressed = 1; // Bottom-right

    } else if (

      ArrowLeft == 0 &&

      ArrowRight == 0 &&

      ArrowUp == 0 &&

      ArrowDown == 0

    ) {

      ButtonPressed = 0;

    }

​

    // Check if the selected color matches the currentColor

    if (selected != -1) {

      if (gridColors[selected] == currentColor) {

        prepareNextLevel();

      } else {

        currentPage = -1;

      }

    }

  }

​

  fill(nextColor);

  ellipse(windowWidth / 2, 200, 120, 120);

  let padding1 = windowWidth / 2 - 75;

  let padding2 = windowHeight / 2 - 100;

  for (let i = 0; i < gridSize; i++) {

    for (let j = 0; j < gridSize; j++) {

      fill(gridColors[i * gridSize + j]);

      ellipse(

        padding1 + j * (ellipseSize + 50),

        padding2 + i * (ellipseSize + 50),

        ellipseSize,

        ellipseSize

      );

    }

  }

}

​

function drawOverPage() {

  background(220); // Set the background color for the game over screen

  textAlign(CENTER, CENTER);

  textSize(32);

  fill(0);

  text("Game Over", width / 2, height / 2 - 100);

​

  // Draw "Again" button

  fill(200); // Light grey button background

  rect(width / 2 - 100, height / 2, 200, 50);

  fill(0); // Black text

  text("Again", width / 2, height / 2 + 25);

​

  // Draw "Home" button

  fill(200); // Light grey button background

  rect(width / 2 - 100, height / 2 + 70, 200, 50);

  fill(0); // Black text

  text("Home", width / 2, height / 2 + 95);

}

​

function draw() {

  background(220);

  if (!serialActive) {

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

  } else {

    text("Connected", 20, 30);

  }

​

  if (currentPage == 0) {

    drawStartPage();

  } else if (currentPage == 1) {

    drawFirstPage();

  } else if (currentPage == 2) {

    drawGamePage();

  } else if (currentPage == -1) {

    drawOverPage();

  }

}

​

function mouseClicked() {

  if (

    currentPage == 0 &&

    mouseX > width / 2 - 30 &&

    mouseX < width / 2 + 30 &&

    mouseY > height / 2 - 20 &&

    mouseY < height / 2 + 20

  ) {

    currentPage = 1;

    redraw();

  }

  if (currentPage == -1) {

    if (mouseX > width / 2 - 100 && mouseX < width / 2 + 100) {

      if (mouseY > height / 2 && mouseY < height / 2 + 50) {

        // "Again" button

        currentPage = 1; // Restart the game

        redraw();

      } else if (mouseY > height / 2 + 70 && mouseY < height / 2 + 120) {

        // "Home" button

        currentPage = 0; // Return to the home page

        redraw();

      }

    }

  }

}

​

function keyPressed() {

  if (key == " ") {

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

    setUpSerial();

  }

​

  if (key === "f" || key === "F") {

    fullscreen(!fullscreen());

  }

​

  if (currentPage == 1) {

    currentPage++;

    redraw(); // Move to the game interaction page

  } else if (currentPage == 2) {

    let selected = -1;

    // Map arrow keys to grid positions

    if (ArrowUp == 1) selected = 0;

    // Top-left

    else if (ArrowDown == 1) selected = 1;

    // Top-right

    else if (ArrowRight == 1) selected = 2;

    // Bottom-left

    else if (ArrowLeft == 1) selected = 3; // Bottom-right

​

    // Check if the selected color matches the currentColor

    if (selected !== -1 && gridColors[selected] === currentColor) {

      prepareNextLevel();

    } else if (selected !== -1 && gridColors[selected] !== currentColor) {

      currentPage = -1; // Game over

    }

  }

}

​

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 == 4) {

      // only store values here

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

​

      // We take the string we get from Arduino and explicitly

      // convert it to a number by using int()

      // e.g. "103" becomes 103

      ArrowLeft = int(fromArduino[0]);

      ArrowDown = int(fromArduino[1]);

      ArrowRight = int(fromArduino[2]);

      ArrowUp = int(fromArduino[3]);

    }

    //console.log ("left button is" + ArrowLeft);

    console.log("right button is" + ArrowRight);

    //console.log ("up button is" + ArrowUp);

    //console.log ("meow button is" + ArrowDown);

​

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

    //SEND TO ARDUINO HERE (handshake)

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

    let sendToArduino = "\n";

    writeSerial(sendToArduino);

  }

}

​

//Arduino Code

/*

// Week 11.2 Example of bidirectional serial communication

​

// Inputs:

// - A0 - sensor connected as voltage divider (e.g. potentiometer or light sensor)

// - A1 - sensor connected as voltage divider

//

// Outputs:

// - 2 - LED

// - 5 - LED

​

int leftLedPin = 2;

int rightLedPin = 5;

​

void setup() {

  // Start serial communication so we can send data

  // over the USB connection to our p5js sketch

  Serial.begin(9600);

​

  // We'll use the builtin LED as a status output.

  // We can't use the serial monitor since the serial connection is

  // used to communicate to p5js and only one application on the computer

  // can use a serial port at once.

  pinMode(LED_BUILTIN, OUTPUT);

​

  // Outputs on these pins

  pinMode(leftLedPin, OUTPUT);

  pinMode(rightLedPin, OUTPUT);

​

  // Blink them so we can check the wiring

  digitalWrite(leftLedPin, HIGH);

  digitalWrite(rightLedPin, HIGH);

  delay(200);

  digitalWrite(leftLedPin, LOW);

  digitalWrite(rightLedPin, LOW);

​

​

​

  // start the handshake

  while (Serial.available() <= 0) {

    digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data

    Serial.println("0,0"); // send a starting message

    delay(300);            // wait 1/3 second

    digitalWrite(LED_BUILTIN, LOW);

    delay(50);

  }

}

​

void loop() {

  // wait for data from p5 before doing something

  while (Serial.available()) {

    digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data

​

    int left = Serial.parseInt();

    int right = Serial.parseInt();

    if (Serial.read() == '\n') {

      digitalWrite(leftLedPin, left);

      digitalWrite(rightLedPin, right);

      int sensor = analogRead(A0);

      delay(5);

      int sensor2 = analogRead(A1);

      delay(5);

      Serial.print(sensor);

      Serial.print(',');

      Serial.println(sensor2);

    }

  }

  digitalWrite(LED_BUILTIN, LOW);

}

*/

​