Chess Pattern Recognition

Chess is often described as a battle of patterns. The ability to recognize recurring tactical motifs—like the classic knight fork or other game-changing setups—is what separates casual players from seasoned strategists. As Grandmaster Jonathan Rowson insightfully explains in “The Seven Deadly Chess Sins”, recognizing these patterns is not just a skill but an art that shapes decision-making on the board.

In this demo, you’ll explore how a chessboard described in Forsyth–Edwards Notation (FEN) can be analyzed for tactical patterns using the powerful search(pattern) method. Whether it’s discovering a tactical opportunity or building familiarity with positional setups, the interactive sketch lets you experiment with patterns, customize the board, and even test your own ideas. You can edit the target pattern, reset the board, or jump straight into identifying crucial tactics—all designed to sharpen your chess intuition and bring the hidden dynamics of the game to life.

// Set grid cell size and chessboard dimensions
Quadrille.cellLength = 40;
const COLS = 8, ROWS = 8;

// Declare variables for FEN board, pattern, and user inputs
let fenBoard, fen, patternBoard, pattern, hint;
const defaultFen = 'r3kb1r/ppN1pppp/5n2/8/8/8/PPP3PP/R3KB1R';
let fenInput, rows, cols, pieces, hits;

// Initial setup of the canvas, inputs, and interactive elements
function setup() {
  createCanvas((2 * COLS + 1) * Quadrille.cellLength,
               (ROWS + 1) * Quadrille.cellLength);

  // Initialize FEN board and input field
  fenBoard = createQuadrille();
  fenInput = createInput();
  fenInput.size(8 * Quadrille.cellLength - 5);
  fenInput.position(9 * Quadrille.cellLength + 5, 8 * Quadrille.cellLength + 15);
  fenInput.changed(() => update());

  // Dropdown for selecting chess pieces
  pieces = createSelect();
  pieces.option('clear');
  for (const symbol of Object.values(Quadrille.chessSymbols)) {
    pieces.option(symbol);
  }
  pieces.selected('clear');
  pieces.position(10, 8 * Quadrille.cellLength + 15);

  // Dropdowns for customizing pattern size
  rows = createSelect();
  cols = createSelect();
  for (let value = 1; value < 9; value++) {
    rows.option(value.toString());
    cols.option(value.toString());
  }
  rows.selected('2');
  rows.position(75, 8 * Quadrille.cellLength + 15);
  rows.changed(() => {
    pattern.height = +rows.value();
    patternBoard.height = +rows.value();
    patternBoard.fill();
    update();
  });
  cols.selected('5');
  cols.position(115, 8 * Quadrille.cellLength + 15);
  cols.changed(() => {
    pattern.width = +cols.value();
    patternBoard.width = +cols.value();
    patternBoard.fill();
    update();
  });

  // Initialize default state
  reset();
  update();
}

// Draws the chessboard, patterns, and highlights matches
function draw() {
  background('darkkhaki');
  drawQuadrille(patternBoard, { tileDisplay: 0 });
  drawQuadrille(pattern, { textColor: 'black', tileDisplay: 0 });
  drawQuadrille(fenBoard, { row: 0, col: 9, tileDisplay: 0 });
  drawQuadrille(fen, { row: 0, col: 9, textColor: 'black', tileDisplay: 0 });
  if (hits.length > 0) {
    drawQuadrille(hint, { row: hits[0].row, 
                          col: 9 + hits[0].col, outline: 'magenta' });
  }
}

// Resets the board and pattern to their default states
function reset() {
  fenInput.value(defaultFen);
  fen = createQuadrille(fenInput.value());
  const r = Quadrille.chessSymbols['r'], k = Quadrille.chessSymbols['k'], N = Quadrille.chessSymbols['N'];
  pattern = createQuadrille([
    [r,    null, null, null, k],
    [null, null, N]
  ]);
  patternBoard = createQuadrille(pattern.width, pattern.height).fill();
  rows.selected(pattern.height);
  cols.selected(pattern.width);
  update();
}

// Updates the app state, matching patterns on the board
function update() {
  fen = createQuadrille(fenInput.value());
  hits = fen.search(pattern, true);
  hint = Quadrille.neg(pattern, color(0, 180));
}

// Resets on pressing 'r'
function keyPressed() {
  if (key === 'r') {
    reset();
    update();
  }
}

// Modifies the pattern via mouse interactions
function mouseClicked() {
  const row = pattern.mouseRow, col = pattern.mouseCol;
  pieces.value() === 'clear' ? pattern.clear(row, col) :
                               pattern.fill(row, col, pieces.value());
  update();
}

Reset

The reset function restores the board to its initial state. It sets the default FEN, initializes the pattern, and prepares the patternBoard:

function reset() {
  // Sets the FEN input field to the default chess position
  fenInput.value(defaultFen);
  // Creates the FEN quadrille representing the chessboard
  fen = createQuadrille(fenInput.value());
  // Defines specific chess pieces for the default pattern
  const r = Quadrille.chessSymbols['r']; // Black rook
  const k = Quadrille.chessSymbols['k']; // Black king
  const N = Quadrille.chessSymbols['N']; // White knight
  // Creates the default pattern using the specified pieces
  pattern = createQuadrille([
    [r,    null, null, null, k],
    [null, null, N]
  ]);
  // Initializes the pattern board with the same dimensions as the pattern
  patternBoard = createQuadrille(pattern.width, pattern.height).fill();
  // Updates the dropdown menus to reflect the current pattern's dimensions
  rows.selected(pattern.height);
  cols.selected(pattern.width);
}

This function resets the board, offering a clean and consistent starting point for pattern exploration.

Update

The update function handles every user action. It refreshes the app’s state by recalculating matches between the pattern and the board:

function update() {
  fen = createQuadrille(fenInput.value());
  // Searches the FEN quadrille for matches to the given pattern
  hits = fen.search(pattern, true);
  // Creates a copy of the pattern quadrille
  hint = pattern.clone();
  // Generates a semi-transparent overlay for matched patterns
  hint = Quadrille.neg(pattern, color(0, 180));
}

With this function, every interaction is reflected on the chessboard in real time, ensuring that updates to the board or the pattern are immediately visible.

Drawing

The draw function is responsible for rendering the chessboard and patterns, highlighting matches when they are found:

function draw() {
  // Sets the background color of the canvas
  background('darkkhaki');
  // Draws the empty pattern quadrille (background area for the pattern)
  drawQuadrille(patternBoard, { tileDisplay: 0 });
  // Draws the current pattern on the pattern quadrille
  drawQuadrille(pattern, { textColor: 'black', tileDisplay: 0 });
  // Draws the FEN quadrille on the right side of the canvas
  drawQuadrille(fenBoard, { row: 0, col: 9, tileDisplay: 0 });
  // Overlays the FEN data (pieces) on the FEN quadrille
  drawQuadrille(fen, { row: 0, col: 9, textColor: 'black', tileDisplay: 0 });
  // Highlights the first matching pattern (if found) using the hint quadrille
  if (hits.length > 0) {
    drawQuadrille(hint, { row: hits[0].row, 
                          col: 9 + hits[0].col, outline: 'magenta' });
  }
}

Interaction

Keyboard

Press r to reset the board to its default state:

function keyPressed() {
  // Checks if the 'r' key is pressed
  if (key === 'r') {
    reset();  // Resets the board to the default FEN and pattern
    update(); // Refreshes the state to reflect the reset changes
  }
}

Mouse

Click anywhere on the pattern to modify it by adding or clearing pieces:

function mouseClicked() {
  // Gets the row of the clicked cell in the pattern quadrille
  const row = pattern.mouseRow;
  // Gets the column of the clicked cell in the pattern quadrille
  const col = pattern.mouseCol;
  if (pieces.value() === 'clear') {
    // Clears the cell at the clicked position
    pattern.clear(row, col);
  } else {
    // Fills the cell with the selected piece
    pattern.fill(row, col, pieces.value());
  }
  // Updates the board state to reflect the changes
  update();
}

Mouse interactions allow for hands-on experimentation with different tactical setups, making it easy to adjust and test patterns directly on the board.

Further Exploration

This demo is a foundation for exploring tactical pattern recognition on a chessboard, but there are many ways to take it further:

• Dynamic Pattern Complexity: Add functionality to detect rotated or mirrored patterns for a broader analysis of tactical setups. This would simulate real-world scenarios where patterns may not always align perfectly with the board’s orientation.

• Evaluation Metrics: Introduce a scoring system to evaluate the relevance or strength of detected patterns based on positional and material advantages.

• Custom Pattern Libraries: Allow users to save and load commonly used patterns, creating a personal library of tactical motifs for study and experimentation.

• Interactive Challenges: Turn the demo into an interactive puzzle where users must identify the best move based on the detected patterns. Provide feedback and hints to guide learning.

• Heatmaps: Visualize the density of pattern matches across the board using heatmaps, helping users identify critical areas for attack or defense.

• Integration with Chess Engines: Pair the demo with a chess engine to evaluate the positions resulting from the detected patterns and suggest moves based on engine analysis.

By exploring these extensions, you can create a more powerful tool for improving chess skills and understanding the dynamics of tactical pattern recognition.

References

Quadrille API

• createQuadrille(fen).
• createQuadrille(width, height).
• search(pattern, strict).
• clone().
• Quadrille.neg().
• drawQuadrille(quadrille, options).
• width and height.
• fill().

p5 API

• createCanvas — Creates a drawing canvas on which all the 2D and 3D visuals are rendered in p5.js.
• background — Sets the color used for the background of the canvas.
• createInput — Creates a text input element for user interaction.
• createSelect — Creates a dropdown menu element for user selection.
• keyPressed — A function that is called whenever a key is pressed.
• mouseClicked — A function that is called whenever a mouse button is clicked.

Further Reading

• Pattern recognition fact or fiction.
• Improving Your Chess Pattern Recognition.
• Forsyth–Edwards Notation.