display functions

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	Value Type	Default
`tileDisplay`	All cells	`Quadrille.tileDisplay`: Draws cell contours as square tiles
`stringDisplay`	String	`Quadrille.stringDisplay`: Displays strings in cells
`numberDisplay`	Number	`Quadrille.numberDisplay`: Renders numbers in cells as grayscale colors, clamped to the range [0..255]
`colorDisplay`	Color	`Quadrille.colorDisplay`: Fills cells with specified p5.Colors
`imageDisplay`	Image	`Quadrille.imageDisplay`: Draws images in cells
`functionDisplay`	Function	`Quadrille.functionDisplay`: Executes a function to draw the cell (available only in WEBGL)
`arrayDisplay`	Array	No static default. It must be explicitly defined if used
`objectDisplay`	Object	No static default. It must be explicitly defined if used

ℹ️

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

code

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

Param	Description
`tileDisplay`¹	Function: Renders cell contours. Default is `Quadrille.tileDisplay`
`stringDisplay`	Function: Renders strings in cells. Default is `Quadrille.stringDisplay`
`numberDisplay`	Function: Renders numbers in cells. Default is `Quadrille.numberDisplay`
`colorDisplay`	Function: Renders colors in cells. Default is `Quadrille.colorDisplay`
`imageDisplay`	Function: Renders images in cells. Default is `Quadrille.imageDisplay`
`functionDisplay`	Function: Renders functions in cells, available only in WEBGL. Default is `Quadrille.functionDisplay`
`arrayDisplay`	Function: Renders cells filled with arrays. No static default provided
`objectDisplay`	Function: Renders cells filled with objects. No static default provided

The tileDisplay function enables the implementation of regular tilings other than the default square tiling. ↩︎

origin