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.

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

code

let sb; // Image variable
let quadrille;
let yellow, blue, red;

async function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength);
  // Load image
  sb = await loadImage('/images/simon_bolivar_wedding.jpg');
  yellow = color('yellow');
  blue = color('blue');
  red = color('red');
  // Define the quadrille with diverse content
  quadrille = createQuadrille([
    ['hi', 100, sb, sb, null, 0],
    [null, yellow, sb, '🐷'],
    [null, blue, sb, 255, '🦙'],
    [null, red, null, 185, '🦜', sb]
  ]);
}

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

ℹ️

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)

code

let sb; // Image variable
let destino; // Video variable
let quadrille;
let yellow, blue, red;

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');
  blue = color('blue');
  red = color('red');
  // Quadrille containing a video, image, text, and colors
  quadrille = createQuadrille([
    ['hi', 100, sb, sb, null, 0],
    [null, yellow, sb, '🐷'],
    [null, blue, destino, 255, '🦙'],
    [null, red, 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;
}

ℹ️

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: WEBGL Mode with Functions, Images, Text, and Colors

code

let sb; // Image variable
let font; // Custom font
let quadrille;
let yellow, blue, red;

async function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength, WEBGL);
  // Load image and font
  sb = await loadImage('/images/simon_bolivar_wedding.jpg');
  font = await loadFont('/fonts/noto_sans.ttf');
  textFont(font);
  yellow = color('yellow');
  blue = color('blue');
  red = color('red');
  // Quadrille containing cell functions and other content
  quadrille = createQuadrille([
    ['hi', 100, sb, pulse, null, 0],
    [null, yellow, pulse, ':)'],
    [null, blue, pulse, 255, ':p'],
    [null, red, null, 185, ';)', pulse]
  ]);
}

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

function pulse() {
  background('green');
  const radius = map(sin(frameCount * 0.1), -1, 1, 5, Quadrille.cellLength / 2);
  noStroke();
  fill('cyan');
  circle(0, 0, radius);
}

ℹ️

Observations about WEBGL mode and function cells

createCanvas with WEBGL and Function Cells: Passing WEBGL as the third parameter in createCanvas enables support for function cells, such as pulse.
Function Cells and 3D Geometry: In WEBGL mode, function cells can render 3D geometry using shapes like box, sphere, and other 3D primitives.
Font Limitations: In WEBGL mode, fonts must be loaded manually, and emojis are not supported (the only known limitation).
Origin in WEBGL vs P2D: In WEBGL mode, the origin defaults to the center of the canvas, while in P2D mode, it defaults to the top-left corner. To ensure the quadrille aligns correctly in WEBGL mode, the origin option is explicitly set to CORNER using: drawQuadrille(quadrille, { origin: CORNER }).
Origin in Function Cells: Similarly, within function cells (like pulse), the origin is also the center. Therefore, circle(0, 0, radius) draws a circle centered at the cell’s center.

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

code

let sb; // Image variable
let pg; // p5.Graphics object
let quadrille;
let yellow, blue, red;

async function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength);
  // Load image
  sb = await loadImage('/images/simon_bolivar_wedding.jpg');
  yellow = color('yellow');
  blue = color('blue');
  red = color('red');
  // 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, blue, pg, 255, '🦙'],
    [null, red, null, 185, '🦜', pg]
  ]);
}

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

function pulse() {
  pg.background('green');
  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);
}

ℹ️

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.

⚠️

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 containing any combination of valid JavaScript values. Use `null` to represent empty cells

createQuadrille(width, height)createQuadrille(array)