let gridColors = [];

let gridSize = 2;

let ellipseSize = 100;

let currentPage = -1;

let startImage, instructionsImage; 

let timer = 5;

let timerActive = false;

let gameOverImage;

let isGameOver = false;

let gameBackgroundImage;

let ArrowRight = 0, ArrowLeft = 0, ArrowUp = 0, ArrowDown = 0;

​

​

function preload() {

  startImage = loadImage('Start.jpeg');

  instructionsImage = loadImage('instructions.webp');

  gameBackgroundImage = loadImage('background.jpeg')

  gameOverImage = loadImage('gameOver.jpeg');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background('red'); 

  noLoop();

  currentColor = randomColor();

  nextColor = randomColor();

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

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

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  redraw();

}

​

​

function draw() {

  background(220);

  if (!serialActive) {

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

  } else {

    text("Connected", 20, 30);

  }

​

  if (currentPage == -1) {

    drawStartPage();

  } else if (currentPage == 0) {

    drawInstructionsPage(); // Draw the instructions page

  } else if (currentPage == 1) {

    drawFirstPage();

  } else {

    drawGamePage();

  }

}

​

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 drawInstructionsPage() {

  background(instructionsImage);

  fill(0); // Use black color for text for contrast; change as needed based on your image

  textSize(20); // Ensure the text size is reasonable

  textAlign(CENTER, CENTER);

  textWrap(WORD); // Ensures text wraps within the specified width

  text("Help Spongebob catch the jellyfish by memorizing the color of the first jellyfish to catch it in the grid of the next page. Do not forget to memorize the new jellyfish above the grid!!!", (width-400)/2, (height-600)/2, width * 0.8); // Set width to 80% of canvas width

}

​

function drawFirstPage() {

  background(gameBackgroundImage); 

  fill(currentColor);

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

  if (!timerActive) {

    timerActive = true;

    startTimer();

  }

}

​

​

function drawGamePage() {

   background(gameBackgroundImage); 

  if (isGameOver) {

    drawGameOverPage();

    return; // Stop the game logic if it's game over

  }

  if (currentPage > 0) {

    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();

    }

  }

  fill(nextColor);

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

​

  // Calculate the starting position of the grid

  let totalGridWidth = gridSize * (ellipseSize + 70) - 50;

  let startX = ((width + 100) -totalGridWidth) / 2; 

  let startY = (height - totalGridWidth) / 2; 

​

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

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

      let x = startX + j * (ellipseSize + 70);

      let y = startY + i * (ellipseSize + 70);

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

      ellipse(x, y, ellipseSize, ellipseSize);

    }

  }

}

function mouseClicked() {

  // Check if we are currently on the start page

  if (currentPage == -1) {

    currentPage = 0;  // Move to the instructions page

  } else if (currentPage == 0) {

    currentPage = 1;  // Move from instructions page to the first game page

  } else if (currentPage > 0) {

    // If there are other interactive elements in later pages, handle them here

  }

  redraw();  // Redraw the screen with the new currentPage

}

​

function randomColor() {

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

}

​

​

​

function keyPressed() {

   if (key == " ") {

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

    setUpSerial();

  }

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

    fullscreen(!fullscreen());

  } 

  if (currentPage == 0) {

    // Any keypress can advance to the game from the first page

    currentPage++;

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

  } else if (currentPage > 0) {

    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();

    }

  }

}

​

​

​

function prepareNextLevel() {

  currentColor = nextColor;

  nextColor = randomColor();

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

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

  redraw();

}

​

​

function startTimer() {

  let interval = setInterval(() => {

    timer--;

    if (timer <= 0) {

      clearInterval(interval);

      currentPage++;

      timerActive = false;

      redraw();

    }

  }, 1000);

}

​

​

//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 == 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);

}

*/

​