drawQuadrille #

p5.js function that draws a quadrille.

Examples #

Positioning #

The quadrille origin (i.e., upper left corner) can be set either with the x & y or the row & col drawing params.

x & y #

The x and y params define the quadrille upper left corner in pixels.

code

// q0 is defined as reference quadrille
let q0, q;

function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength);
  q0 = createQuadrille(6, 4);
  q = createQuadrille(3, 58, color('blue'));
}

function draw() {
  background('orange');
  drawQuadrille(q0);
  // an object literal param is used to pass custom drawing properties
  drawQuadrille(q, { x: mouseX, y: mouseY, outline: 'lime' });
}

row & col #

The row and col params define the quadrille upper left corner in rows and cols units.

Observation
Observe the mouseRow and mouseCol quadrille properties calls used to positioning the q quadrille below.

code

// q0 is defined as reference quadrille
let q0, q;

function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength);
  q0 = createQuadrille(6, 4);
  q = createQuadrille(3, 58, color('blue'));
}

function draw() {
  background('orange');
  drawQuadrille(q0);
  // an object literal param is used to pass custom drawing properties
  drawQuadrille(q, { row: q0.mouseRow, col: q0.mouseCol, outline: 'lime' });
}

Display functions #

The display functions define how the quadrille cell data is to be displayed:

tileDisplay: define the cell contour display.
imageDisplay: define the cell image display.
stringDisplay: define the cell string display.
colorDisplay: define the cell color display.
numberDisplay: define the cell number display.
arrayDisplay: define the cell array display.
objectDisplay: define the cell object display.

Observations
The arrayDisplay and objectDisplay methods don’t have (static) defaults.
The object literal used to parameterize these functions can have the following properties: { quadrille, graphics, outline, outlineWeight, cellLength, textColor, textZoom, value, row, col, width, height }, where value holds the cell contents, row and col hold the cell position within the quadrille and ẁidth and height are defined as quadrille.width and quadrille.height, resp. The remaining properties (outline, cellLength,…) are taken from the drawQuadrille method params themselves.

The following code snippet demonstrates how to display quadrille cells as circles:

code

let quadrille;
let circled;
let tileDisplay;// (all) quadrille cell contours
let colorDisplay;// quadrille color cells

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

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

Syntax #

drawQuadrille(quadrille, [{[graphics], [x], [y], [col], [row], [cells], [tileDisplay], [imageDisplay], [colorDisplay], [stringDisplay], [numberDisplay], [arrayDisplay], [objectDisplay], [cellLength], [outlineWeight], [outline], [textColor], [textZoom]}])

Parameters #

parameter	description
quadrille	Quadrille: `quadrille` to be drawn
graphics	p5.Graphics: renderer target default is `this` (main canvas)
tileDisplay	Function: empty cell drawing custom procedure default is Quadrille.tileDisplay¹. Use `0`, `null` or `undefined` to discard all edges
imageDisplay	Function: image filled cell drawing custom procedure default is Quadrille.imageDisplay
colorDisplay	Function: color filled cell drawing custom procedure default is Quadrille.colorDisplay
stringDisplay	Function: string filled cell drawing custom procedure default is Quadrille.stringDisplay
numberDisplay	Function: number filled cell drawing custom procedure default is Quadrille.numberDisplay
arrayDisplay	Function: array filled cell drawing custom procedure
objectDisplay	Function: object filled cell drawing custom procedure
x	Number: upper left quadrille pixel x coordinate default is `0`. Takes higher precedence than `col`
y	Number: upper left quadrille pixel y coordinate default is `0`. Takes higher precedence than `row`
col	Number: upper left quadrille col default is `0`.
row	Number: upper left quadrille row default is `0`.
values	Iterable: cells to be drawn. All cells are drawn if this parameter is `undefined`
cellLength	Number: edge length in pixels default is Quadrille.cellLength
outlineWeight	Number: edge weight default is Quadrille.outlineWeight.
outline	p5.Color representation: edge color default is Quadrille.outline
textColor	p5.Color representation: text color default is Quadrille.textColor
textZoom	Number:: text zoom level default is Quadrille.textZoom

This function allows to implementing other regular tilings different than the default square tiling. ↩︎