createQuadrille(jagged_array)

The createQuadrille function creates a quadrille and fills its cells using items from a jagged_array. The array can contain any combination of valid JavaScript values, with null representing empty cells. Rows may have different lengths — shorter rows are padded with null to the longest row's width — and holes or explicit undefined entries likewise normalize to null on entry.

Example 1: Images, Text, Colors, Numbers, and Emojis

Note

Observation about images Images are loaded in the async setup function using await with loadImage to ensure they are fully available before being used.

Example 2: Videos, Text, Colors, Numbers, and Emojis

(click to toggle the video playback)

'use strict';
let sb; // Image variable
let destino; // Video variable
let quadrille;
let yellow, dodgerblue, tomato;

async function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength);
  // Load image and video
  sb = await loadImage('/images/simon_bolivar_wedding.jpg');
  destino = await createVideo(['/videos/destino.webm']);
  destino.hide(); // Hide video controls
  yellow = color('yellow');
  dodgerblue = color('dodgerblue');
  tomato = color('tomato');
  // Quadrille containing a video, image, text, and colors
  quadrille = createQuadrille([
    ['hi', 100, sb, sb, null, 0],
    [null, yellow, sb, '🐷'],
    [null, dodgerblue, destino, 255, '🦙'],
    [null, tomato, null, 185, '🦜', sb]
  ]);
}

function draw() {
  background('#DAF7A6'); // Light green background
  drawQuadrille(quadrille); // Render the quadrille
}

function mouseClicked() {
  // Toggle video playback on mouse click
  destino.looping ? destino.pause() : destino.loop();
  destino.looping = !destino.looping;
}

Note

Observations about video
Loading the Video: Videos are loaded in the async setup() function with await and immediately hidden using the destino hide method to remove default controls.
Interactive Playback Toggle: This code toggles the video playback when the mouse is clicked:
destino.looping ? destino.pause() : destino.loop();
destino.looping = !destino.looping;
The ternary operator (condition ? exprIfTrue : exprIfFalse) is shorthand for if/else. Equivalent code:
if (destino.looping) destino.pause();
else destino.loop();
destino.looping custom property: Initially, destino.looping is undefined (a falsy value). The line destino.looping = !destino.looping; flips its value to true on the first click, and subsequently toggles it between true and false.

Example 3: Functions, Images, Text, Colors and Emojis

Note

Observations about P2D mode and function cells

Canvas Mode and Function Cells: Using P2D mode—either by omitting the third argument to createCanvas() or explicitly setting it—supports 2D function-based cells like pulse.

Origin in the Canvas: In P2D mode, the canvas origin defaults to the top-left corner. To position the entire quadrille with its top-left corner at the center of the canvas, use drawQuadrille(quadrille, { origin: CENTER }).

Origin in Function Cells: Likewise, within each function cell (such as pulse), the coordinate origin is also the top-left corner of the cell. To draw shapes centered within the cell (like circle(center, center, radius)), define center = Quadrille.cellLength / 2. Alternatively, pass options: { origin: CENTER } to drawQuadrille() to shift the coordinate system to the cell center.

Example 4: WEBGL Mode with Functions, Images, Text, and Colors

'use strict';

let sb; // Image variable
let font; // Custom font
let quadrille;
let yellow, dodgerblue, tomato;

async function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength, WEBGL);
  sb = await loadImage('/images/simon_bolivar_wedding.jpg');
  font = await loadFont('/fonts/noto_sans.ttf');
  textFont(font);
  yellow = color('yellow');
  dodgerblue = color('dodgerblue');
  tomato = color('tomato');
  quadrille = createQuadrille([
    ['hi', 100, sb, ringTorus, null, 0],
    [null, yellow, ringTorus, ':)'],
    [null, dodgerblue, ringTorus, 255, ':p'],
    [null, tomato, null, 185, ';)', sb]
  ]);
}

function draw() {
  background('#DAF7A6');
  drawQuadrille(quadrille, { origin: CORNER });
}

function ringTorus() {
  push();
  ambientLight(60);
  directionalLight(255, 255, 255, 0.25, 0.25, -1);
  rotateX(frameCount * 0.03);
  rotateY(frameCount * 0.03);
  colorMode(HSB);
  fill((frameCount * 2) % 360, 255, 255);
  noStroke();
  torus(Quadrille.cellLength / 3);
  pop();
}

Note

Observations about WEBGL mode and function cells

3D Function Cells: Using WEBGL mode as the third argument to createCanvas() enables 3D function-based cells like ringTorus, which can render geometry using primitives such as box, sphere, and torus.

Font Limitations: In WEBGL mode, fonts must be loaded manually, and emojis are not supported (the only known limitation).

Origin in the Canvas: In WEBGL mode, the canvas origin defaults to the center. To align the top-left of the quadrille with the canvas, use drawQuadrille(quadrille, { origin: CORNER }).

Origin in Function Cells: Likewise, within each function cell (such as ringTorus), the coordinate origin is also the center of the cell. To draw from the top-left corner instead, pass options: { origin: CORNER } to drawQuadrille().

Example 5: p5.Graphics, Images, Text, Colors, and Emojis

'use strict';
let sb; // Image variable
let pg; // p5.Graphics object
let quadrille;
let yellow, dodgerblue, tomato;

async function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength);
  // Load image
  sb = await loadImage('/images/simon_bolivar_wedding.jpg');
  yellow = color('yellow');
  dodgerblue = color('dodgerblue');
  tomato = color('tomato');
  // Create a p5.Graphics object for custom drawing
  pg = createGraphics(Quadrille.cellLength, Quadrille.cellLength);
  quadrille = createQuadrille([
    ['hi', 100, sb, pg, null, 0],
    [null, yellow, pg, '🐷'],
    [null, dodgerblue, pg, 255, '🦙'],
    [null, tomato, null, 185, '🦜', pg]
  ]);
}

function draw() {
  background('#DAF7A6');
  pulse(); // Update the p5.Graphics animation
  drawQuadrille(quadrille); // Render the quadrille
}

function pulse() {
  pg.background('green'); // p5.Graphics background should explicitly be set
  const radius = map(sin(frameCount * 0.1), -1, 1, 5, Quadrille.cellLength / 2);
  pg.noStroke();
  pg.fill('cyan');
  pg.circle(pg.width / 2, pg.height / 2, radius);
}

Note

Observations about p5.Graphics cells

Alternative to function cells: p5.Graphics can be used instead of function cells and works in both P2D and WEBGL modes, but the resulting code is less clean compared to function cells.

Requires a separate p5.Graphics object: A p5.Graphics object (pg) must be created using createGraphics, usually with dimensions matching the cell size.

Origin in P2D mode: In this example, the origin is the top-left corner, so pg.circle(pg.width / 2, pg.height / 2, radius) centers the circle within the cell.

Manual update trigger: p5.Graphics requires an explicit update call, such as from draw, which makes it less concise than function cells.

Performance: p5.Graphics is less efficient than function cells, which are more performant.

Warning

Function cells are the preferred choice in this API's examples while occasionally using p5.Graphics.

Syntax

createQuadrille(jagged_array)

Parameters

Param	Description
`jagged_array`	An array of rows, possibly of different lengths, containing any combination of valid JavaScript values. Use `null` to represent empty cells (short rows pad with `null`; holes and `undefined` normalize to `null`)