let selectedImageIndex; // Index of the image to memorize\

let nextImageIndex; // Index for the next image to memorize\

let gridImages = [];

let gridSize = 2; // Grid size\

let currentPage = -1; // Page tracker\

let startImage;

let timer = 5;

let timerActive = false;

let ArrowLeft = 0,

  ArrowRight = 0,

  ArrowUp = 0,

  ArrowDown = 0;

let serial; // Serial port object\

let selected;

let correctIndex;

​

​

function preload() {

  startImage = loadImage("Start.jpeg");\

  for (let i = 1; i <= 6; i++) \{\

    images.push(loadImage(`pic$\{i\}.png`));\

  \}\

\}\

\

function setup() \{\

  createCanvas(windowWidth, windowHeight);\

  noLoop();\

  selectedImageIndex = int(random(images.length));\

  nextImageIndex = int(random(images.length));\

  setupGrid(); // Setup the grid with unique images, including the memorized one\

\}\

\

\

function setupGrid() \{\

  let availableImages = images.filter(img => img !== images[nextImageIndex]); // Exclude next image from pool\

  availableImages = shuffle(availableImages); // Shuffle available images to randomize selection\

\

  gridImages = [images[selectedImageIndex]]; // Start by ensuring the current memorized image is in the grid\

\

  // Add more images to fill the grid, ensuring no repetition\

  availableImages.forEach(img => \{\

    if (gridImages.length < gridSize * gridSize && img !== images[selectedImageIndex]) \{\

      gridImages.push(img);\

    \}\

  \});\

\

  shuffle(gridImages); // Shuffle the grid to randomize the position of the correct image\

  correctIndex = gridImages.indexOf(images[selectedImageIndex]); // Find and store the correct index\

\}\

\

function windowResized() \{\

  resizeCanvas(windowWidth, windowHeight);\

\}\

\

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) \{\

    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 drawFirstPage() \{\

  image(images[selectedImageIndex], width / 2 - 60, height / 2 - 60, 120, 120); // Display the image to memorize\

  if (!timerActive) \{\

    timerActive = true;\

    startTimer();\

  \}\

\}\

\

function drawGamePage() \{\

  // Center the main image\

  image(images[nextImageIndex], width / 2 - 100, 100, 120, 120); \

\

  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 image is correct\

    if (selected !== -1 && selected === correctIndex) \{\

      prepareNextLevel();\

    \}\

  \}\

  \

  // Determine the starting point for the image grid\

  let offsetX = width / 2 - (gridSize * (100 + 50)) / 2; // Adjusted the offset to space out images\

  let offsetY = height / 2 - (gridSize * (100 + 50)) / 2 + 150;\

\

  // Draw the grid of images\

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

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

      image(gridImages[i * gridSize + j], offsetX + j * 150, offsetY + i * 150, 100, 100); // Adjust spacing to match ellipses\

    \}\

  \}\

\}\

\

\

function mouseClicked() \{\

  if (currentPage == -1 && mouseX > width / 2 - 30 && mouseX < width / 2 + 30 && mouseY > height / 2 - 20 && mouseY < height / 2 + 20) \{\

    currentPage = 0;\

    redraw();\

  \}\

\}\

\

function keyPressed() \{\

  if (key == " ") \{\

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

    setUpSerial();\

  \}\

\

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

    let fs = fullscreen();\

    fullscreen(!fs);\

  \}\

\

  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 && selected === correctIndex) \{\

      prepareNextLevel();\

    \}\

  \}\

\}\

\

function startTimer() \{\

  let interval = setInterval(() => \{\

    timer--;\

    if (timer <= 0) \{\

      clearInterval(interval);\

      currentPage++;\

      timerActive = false;\

      redraw();\

    \}\

  \}, 1000);\

\}\

  \

/*\

function readSerial(data) \{\

  if (data != null) \{\

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

    ArrowUp = int(fromArduino[0]);\

    ArrowDown = int(fromArduino[1]);\

    ArrowRight = int(fromArduino[2]);\

    ArrowLeft = int(fromArduino[3]);\

\

    let selected = -1;\

    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\

\

    if (selected !== -1 && selected === correctIndex) \{\

      prepareNextLevel();\

    \}\

\

    // Reset input flags to avoid repetitive triggers\

    ArrowUp = ArrowDown = ArrowRight = ArrowLeft = 0;\

  \}\

\}*/\

\

function prepareNextLevel() \{\

  //currentPage++;  // Advance to the next page\

  selectedImageIndex = nextImageIndex;  // The next image becomes the one to memorize\

\

  do \{\

    nextImageIndex = int(random(images.length));  // Select a new image to display, ensuring it's not the same as the current memorized one\

  \} while (nextImageIndex === selectedImageIndex);\

\

  setupGrid();  // Re-setup the grid with the new constraints\

  redraw();\

\}\

\

\

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

\}\

*/\

​