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, null, or undefined.

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. Arrays are excluded from this mechanism and must be handled explicitly using arrayDisplay.

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, stringDisplay, numberDisplay, colorDisplay, imageDisplay, functionDisplay, arrayDisplay, objectDisplay})

Parameters #