I’m working on this p5.js code. I need you to merge two programs together. Also, please place the random button below the grid. 

This is program 1: 


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"];

 

function setup() {
  createCanvas(columns * cellSize + offsetX, rows * cellSize + offsetY);
  for (let i = 0; i < columns * rows; i++) {
    points.push(0);
  }
  
  
}

 

function draw() {
  background(255);
  textAlign(CENTER, CENTER);
  
  // Draw header row
  for (let x = 0; x < columns; x++) {
    fill(0);
    text(columns - x, x * cellSize + offsetX + cellSize / 2, cellSize / 2);
  }
  
  // Draw header column
  for (let y = 0; y < rows; y++) {
    fill(0);
    text(y + 1, cellSize / 2, y * cellSize + offsetY + cellSize / 2);
  }
  
  // Draw grid
  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);
      fill(235);
      rect(px, py, cellSize, cellSize);
      
      // Colorize text in the cell
      // const hue = map(points[index], 0, 10, 0, 255);
      // fill(hue, 255, 255);
      fill(25, 255, 255);
      if (points[index] > 0) {
        text(romanNumerals[points[index] - 1], px + cellSize / 2, py + cellSize / 2);
      }
    }
  }
}

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]++;
  }
}

 





This is program 2: 



const button = document.querySelector("button");
const cellSize = 50;
const selectedCells = [];

function setup() {
  let canvas = createCanvas(7 * cellSize, 8 * cellSize, WEBGL);
  canvas.parent("sketch-holder");
}

function draw() {
  background(255);
  translate(-width / 2, -height / 2);
  drawGrid();
  drawSelectedCells();
  drawLabels();
}

function drawGrid() {
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 8; j++) {
      stroke(0);
      noFill();
      rect(i * cellSize, j * cellSize, cellSize, cellSize);
    }
  }
}

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

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

  let col, row;
  do {
    col = floor(random(7));
    row = floor(random(8));
  } while (isSelected(col, row));

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

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

function drawLabels() {
  textSize(20);
  fill(0);
  textAlign(CENTER, CENTER);
  for (let i = 0; i < 7; i++) {
    text(i + 1, i * cellSize + cellSize / 2 + 50, 25);
  }
  for (let j = 0; j < 8; j++) {
    text(j + 1, 25, j * cellSize + cellSize / 2 + 50);
  }
}