Creates a quadrille with the chess board position described by the given FEN.

Example 1 #

Quadrille.cellLength = 50;
Quadrille.tileDisplay = 0;
Quadrille.textColor = 'black';
const COLS = 8, ROWS = 8;
const FEN = '5rk1/1P3Bp1/R6p/8/6P1/2B1rQ2/2K3P1/6q1 b - - 0 36';
let board, fen;

function setup() {
  createCanvas(COLS * Quadrille.cellLength, ROWS * Quadrille.cellLength);
  board = createQuadrille();
  fen = createQuadrille(FEN);
}

function draw() {
  drawQuadrille(board);
  drawQuadrille(fen);
}

Capablanca vs Marshall, 1918 – The Birth of the Marshall Attack
This iconic game, played in New York in 1918, marked the debut of the Marshall Attack in top-level play. Frank Marshall unveiled his long-prepared gambit against José Raúl Capablanca, sacrificing a pawn for dynamic counterplay in the Ruy López. Despite the sharp attack, Capablanca defended flawlessly and won—cementing both the opening’s legacy and his own positional brilliance.

Example 2: Custom Chess Symbols with Chess.com Colors #

Quadrille.cellLength = 50;
Quadrille.tileDisplay = 0;
Quadrille.textColor = 'blue';
// Set Chess.com board colors
Quadrille.lightSquare = '#EBECCF'; // Light square color
Quadrille.darkSquare = '#769555';  // Dark square color
const FEN = 'rnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R';
let board, fen;
let pola;

async function setup() {
  pola = await loadImage('/images/pola.jpg');
  // Set custom chess symbols
  Quadrille.chessSymbols = {
    K: '👑', Q: pola, N: '🐴',
    k: '🤴', q: '👸', n: '🦄'
  };
  createCanvas(8 * Quadrille.cellLength, 8 * Quadrille.cellLength);
  board = createQuadrille(); // Background layer with Chess.com colors
  fen = createQuadrille(FEN); // Foreground layer with custom symbols
}

function draw() {
  drawQuadrille(board);
  drawQuadrille(fen);
}

Custom Symbols and Colors
This example uses chess.com board colors and custom symbols such as emojis or images (any valid JavaScript value). You can assign a plain object or Map to Quadrille.chessSymbols for partial updates, and reverse lookup is always available through the Quadrille.chessKeys getter.

Default Chess Symbols and Keys
By default, the following FEN → symbol pairs are used:

// Default chessSymbols (FEN → symbol)
{
  K: '♔', Q: '♕', R: '♖', B: '♗', N: '♘', P: '♙',
  k: '♚', q: '♛', r: '♜', b: '♝', n: '♞', p: '♟'
}

You can update entries using a plain object or Map:

Quadrille.chessSymbols = { N: '🦄' };
Quadrille.chessSymbols = new Map([['P', '🥚']]);

Both chessSymbols and chessKeys are Map objects:

Quadrille.chessSymbols.get('K'); // '♔'
Quadrille.chessKeys.get('♔');    // 'K'

Syntax #

createQuadrille(FEN)

Parameters #