let gridColors;

let gridSize = 20; // Size of each square

let gridCount = 15; // Number of rows and columns to make it square

let direction = 'right'; // Initial direction

let showLetter = false; // Flag to show the letter

let currentKey = ''; // Store the current key being pressed

let pg; // Off-screen graphics buffer

​

function setup() {

  createCanvas(800, 800);

  pg = createGraphics(gridCount * gridSize, gridCount * gridSize);

  colors = [

    '#F73222', // red

    '#9EA728', // olive

    '#B7BCBA', // light gray

    '#289D8D', // teal

    '#5F64AD', // blue

    '#ED9959', // salmon

    '#8BD2D8', // light blue

    '#EDF731', // lime

    '#F2C6BB', // light pink

    '#3165A9', // dark blue

    '#F6D82F', // yellow

    '#000000', // black

    '#FFFFFF'  // white

  ];

  // Initialize the grid with random colors

  initializeGridColors();

  frameRate(10); // Set frame rate for the animation

}

​

function draw() {

  background(0);

  // Calculate margins to center the grid

  let xOffset = (width - gridCount * gridSize) / 2;

  let yOffset = (height - gridCount * gridSize) / 2;

  // Draw the grid

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

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

      fill(gridColors[i][j]);

      rect(i * gridSize + xOffset, j * gridSize + yOffset, gridSize, gridSize);

    }

  }

  // Shift colors based on the direction

  shiftColors();

  if (showLetter) {

    drawLetter(currentKey, xOffset, yOffset);

  }

}

​

function initializeGridColors() {

  gridColors = new Array(gridCount);

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

    gridColors[i] = new Array(gridCount);

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

      let colorIndex = floor(random(colors.length));

      gridColors[i][j] = colors[colorIndex];

    }

  }

}

​

function shiftColors() {

  if (direction === 'right') {

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

      let lastColor = gridColors[gridCount - 1][j];

      for (let i = gridCount - 1; i > 0; i--) {

        gridColors[i][j] = gridColors[i - 1][j];

      }

      gridColors[0][j] = lastColor;

    }

  } else if (direction === 'left') {

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

      let firstColor = gridColors[0][j];

      for (let i = 0; i < gridCount - 1; i++) {

        gridColors[i][j] = gridColors[i + 1][j];

      }

      gridColors[gridCount - 1][j] = firstColor;

    }

  } else if (direction === 'down') {

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

      let lastColor = gridColors[i][gridCount - 1];

      for (let j = gridCount - 1; j > 0; j--) {

        gridColors[i][j] = gridColors[i][j - 1];

      }

      gridColors[i][0] = lastColor;

    }

  } else if (direction === 'up') {

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

      let firstColor = gridColors[i][0];

      for (let j = 0; j < gridCount - 1; j++) {

        gridColors[i][j] = gridColors[i][j + 1];

      }

      gridColors[i][gridCount - 1] = firstColor;

    }

  }

}

​

function keyPressed() {

  if (keyCode === RIGHT_ARROW) {

    direction = 'right';

  } else if (keyCode === LEFT_ARROW) {

    direction = 'left';

  } else if (keyCode === DOWN_ARROW) {

    direction = 'down';

  } else if (keyCode === UP_ARROW) {

    direction = 'up';

  } else if (keyCode === BACKSPACE) {

    showLetter = false; // Remove the letter overlay

  } else {

    showLetter = true;

    currentKey = key;

  }

}

​

function drawLetter(key, xOffset, yOffset) {

  pg.background(255);

  pg.textSize(gridSize * 10); // Adjust size as needed

  pg.textAlign(CENTER, CENTER);

  pg.fill(0); // Black for the letter

  pg.text(key, pg.width / 2, pg.height / 2);

  // Sample the graphics buffer and draw black squares for the letter

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

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

      let x = i * gridSize + gridSize / 2;

      let y = j * gridSize + gridSize / 2;

      let col = pg.get(x, y);

      if (col[0] < 128) { // Check for black color

        fill(0); // Black color for the letter

        rect(i * gridSize + xOffset, j * gridSize + yOffset, gridSize, gridSize);

      }

    }

  }

}

​