Display functions determine how quadrille cells are visually rendered based on their values. To disable a specific display function, assign it a value of 0 or null.

Display function parameters
The display functions receive an object with the following properties: { quadrille, cellLength, outline, outlineWeight, textColor, textZoom, textFont, graphics, origin, value, row, col, width, height, options }.
Here, value contains the cell content; row and col indicate the cell’s position; width and height refer to quadrille.width and quadrille.height. The options object supports custom parameters and is passed as the sole argument to functions in functionDisplay. By default, it includes origin (CORNER in P2D, CENTER in WEBGL) and the cell’s row and col coordinates.

Object fallback rendering
When no objectDisplay is specified, drawQuadrille() attempts to render objects using their display field, if defined. If display is a string, number, color, or image, the corresponding built-in renderer is used. If it is a function, it is called with the options object only, and with this bound to the object itself — so a one-line display() method can re-enter the API on its own value, e.g. a stored quadrille drawing itself via drawQuadrille(this, { cellLength }): the pattern behind quadrille-of-quadrilles nesting. Arrays are excluded from this mechanism and must be handled explicitly using arrayDisplay.

Shipped display function values Beyond the per-type defaults above, the library ships Quadrille.thinWall — a value-agnostic display for the thin-wall maze look, installed per draw as any (or all) of the display params together with tileDisplay: null.

Example#

let quadrille;
let circled;
let customTile; // Custom tile display for all quadrille cell contours
let customColor; // Custom display for quadrille color cells

function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength);
  circled = createCheckbox('circled', true)
    .position(10, 10)
    .style('color', 'magenta');
  customTile = ({ outline, outlineWeight, cellLength }) => {
    noFill();
    stroke(outline);
    strokeWeight(outlineWeight);
    ellipseMode(CORNER);
    circle(0, 0, cellLength);
  };
  customColor = ({ value, cellLength }) => {
    noStroke();
    fill(value);
    ellipseMode(CORNER);
    circle(0, 0, cellLength);
  };
  quadrille = createQuadrille(3, 58n, color('blue'));
}

function draw() {
  background('orange');
  let params = {
    x: mouseX,
    y: mouseY,
    tileDisplay: circled.checked() ? customTile : Quadrille.tileDisplay,
    colorDisplay: circled.checked() ? customColor : Quadrille.colorDisplay
  };
  drawQuadrille(quadrille, params);
}

This example overrides the default square tiling by supplying JavaScript arrow functions to tileDisplay and colorDisplay, causing each quadrille cell to render as a circle.

Syntax#

drawQuadrille(quadrille, {tileDisplay, numberDisplay, stringDisplay, colorDisplay, imageDisplay, functionDisplay, arrayDisplay, objectDisplay})

Parameters#