In this p5.js code, please place the easerSwitch and button in a fixed position that is centered below the grid and beautifully aligned: const columns = 6;
const rows = 7;
const cellSize = 50;
const offsetX = cellSize;
const offsetY = cellSize;
const points = [];
const romanNumerals = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X",
"XI", "XII", "XIII", "XIV", "XV", "XVI", "XVII", "XVIII", "XIX", "XX",
"XXI", "XXII", "XXIII", "XXIV", "XXV", "XXVI", "XXVII", "XXVIII", "XXIX", "XXX",
"XXXI", "XXXII", "XXXIII", "XXXIV", "XXXV", "XXXVI", "XXXVII", "XXXVIII", "XXXIX", "XL",
"XLI", "XLII", "XLIII", "XLIV", "XLV", "XLVI", "XLVII", "XLVIII", "XLIX", "L"];
const selectedCells = [];
// Define eraserSwitch at the top level
let eraserSwitch;
// Define new variables
let leftEyeBlink = false;
let rightEyeBlink = false;

function setup() {
createCanvas(columns * cellSize + offsetX, rows * cellSize + offsetY);
  

for (let i = 0; i < columns * rows; i++) {
points.push(0);

}

const button = createButton(' 🤖 Random 🤖');
button.position(350, 545);
button.mousePressed(selectRandomPosition);
// Add eraserSwitch
// Assign eraserSwitch
eraserSwitch = createCheckbox('x', false);
eraserSwitch.position(170, 535);
}

function draw() {
background(255);
textAlign(CENTER, CENTER);
  drawSelectedCells();
drawGrid();
 
drawHeaderRow();
drawHeaderColumn();
drawRobot();
}

function drawHeaderRow() {
for (let x = 0; x < columns; x++) {
fill(0);
text(columns - x, x * cellSize + offsetX + cellSize / 2, cellSize / 2);
}
}

function drawHeaderColumn() {
for (let y = 0; y < rows; y++) {
fill(0);
text(y + 1, cellSize / 2, y * cellSize + offsetY + cellSize / 2);
}
}

function drawGrid() {
for (let x = 0; x < columns; x++) {
for (let y = 0; y < rows; y++) {
const index = x * rows + y;
const px = x * cellSize + offsetX;
const py = y * cellSize + offsetY;
stroke(0);
noFill();
rect(px, py, cellSize, cellSize);

fill(25, 255, 255);
if (points[index] > 0) {
text(romanNumerals[points[index] - 1], px + cellSize / 2, py + cellSize / 2);
}
}
}
}

function drawSelectedCells() {
for (const cell of selectedCells) {
let x1 = cell.col * cellSize + offsetX;
let y1 = cell.row * cellSize + offsetY;
fill(255, 0, 0);
noStroke();
rect(x1, y1, cellSize, cellSize);
}
}

// function mouseClicked() {
// const x = floor((mouseX - offsetX) / cellSize);
// const y = floor((mouseY - offsetY) / cellSize);
// const index = x * rows + y;

// if (index < points.length && x < columns && y < rows) {
// points[index]++;
// }
// }

// function mouseClicked() {
//   const x = floor((mouseX - offsetX) / cellSize);
//   const y = floor((mouseY - offsetY) / cellSize);
//   const index = x * rows + y;

//   if (index < points.length && x < columns && y < rows) {
//     if (eraserSwitch.checked()) {
//       points[index] = max(0, points[index] - 1);
//     } else {
//       points[index]++;
//     }
//   }
// }

function mouseClicked() {
  const x = floor((mouseX - offsetX) / cellSize);
  const y = floor((mouseY - offsetY) / cellSize);
  const index = x * rows + y;

  if (index < points.length && x < columns && y < rows) {
    if (eraserSwitch.checked()) {
      points[index] = max(0, points[index] - 1);
    } else {
      points[index]++;
    }
  }
}

function drawRobot() {
  // Set the robot’s head, body, and legs stroke and fill colors
  stroke(0);
  fill(150);

  // Draw the robot’s body parts
  rect(400, 200, 70, 80); // Head
  rect(405, 290, 60, 100); // Body
  rect(405, 390, 20, 80); // Left leg
  rect(445, 390, 20, 80); // Right leg

  // Draw left eye
  fill(leftEyeBlink ? 255 : 0);
  circle(415, 230, 10);

  // Draw right eye
  fill(rightEyeBlink ? 255 : 0);
  circle(455, 230, 10);

  // Draw robot’s mouth
  fill(0);
  rect(420, 260, 30, 5);
}

function selectRandomPosition() {
    if (selectedCells.length >= columns * rows) {
        alert("All cells have been selected.");
        return;
    }

    // Play sound and call setTimeout for handleClick after 2 seconds
    playRandomRobotSound();
    setTimeout(handleClick, 2000);

     // Set eye blink values
  leftEyeBlink = !leftEyeBlink;
  rightEyeBlink = !rightEyeBlink;
}

function handleClick() {
    let col, row;
    do {
        col = floor(random(columns));
        row = floor(random(rows));
    } while (isSelected(col, row));

    selectedCells.push({ col, row });
}
function playRandomRobotSound() {
    const context = new AudioContext();

    const numNotes = 12;
    const duration = 1.5;
    const interval = duration / numNotes;

    for (let i = 0; i < numNotes; i++) {
        const oscillator = context.createOscillator();
        const gainNode = context.createGain();
        oscillator.connect(gainNode);
        gainNode.connect(context.destination);

        const frequency = Math.random() * 500 + 200;
        oscillator.frequency.setValueAtTime(frequency, context.currentTime);

        const startTime = context.currentTime + (interval * i);
        const endTime = startTime + interval;

        gainNode.gain.setValueAtTime(1, startTime);
        gainNode.gain.exponentialRampToValueAtTime(0.001, endTime);

        oscillator.start(startTime);
        oscillator.stop(endTime);
    }
}


// function selectRandomPosition() {
// if (selectedCells.length >= columns * rows) {
// alert("All cells have been selected.");
// return;
// }

// let col, row;
// do {
// col = floor(random(columns));
// row = floor(random(rows));
// } while (isSelected(col, row));

// selectedCells.push({ col, row });
// }

function isSelected(col, row) {
return selectedCells.some(cell => cell.col === col && cell.row === row);
}

// Here’s a step-by-step explanation of the mouseClicked() function in the given code:

// 1. Calculate the column (x) and row (y) where the mouse click occurred based on the mouse position (mouseX, mouseY) and the grid cell size:

//    const x = floor((mouseX - offsetX) / cellSize);
//    const y = floor((mouseY - offsetY) / cellSize);


// 2. Calculate the index of the clicked cell in the 1-dimensional points array. This array stores the point values for each cell on the grid, and its index is calculated using the x and y values:

//    const index = x * rows + y;


// 3. Check if the index is within the valid range (not out-of-bounds) and the clicked position is inside the grid:

//    if (index < points.length && x < columns && y < rows) {


// 4. Inside the if statement, check the state of the eraserSwitch. If the eraser switch is checked (turned on), decrement the point value of the clicked cell by 1, keeping the minimum value at 0:

//    if (eraserSwitch.checked()) {
//      points[index] = max(0, points[index] - 1);
//    }


// 5. If the eraser switch is not checked (turned off), increment the point value of the clicked cell by 1:

//    else {
//      points[index]++;
//    }


// With this logic, the mouseClicked() function allows users to increment or decrement point values in cells, depending on the state of the eraser switch.