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 now loaded in the async setup function using await with loadImage to ensure they are fully available before being used. This follows the p5.js v2.x pattern for asset loading.

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

  1. Loading the Video: Videos are now loaded in the async setup() function with await and immediately hidden using the destino hide method to remove default controls.
  2. 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();
  3. 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

  1. createCanvas with WEBGL and Function Cells: Passing WEBGL as the third parameter in createCanvas enables support for function cells, such as pulse.
  2. Function Cells and 3D Geometry: In WEBGL mode, function cells can render 3D geometry using shapes like box, sphere, and other 3D primitives.
  3. Font Limitations: In WEBGL mode, fonts must be loaded manually, and emojis are not supported (the only known limitation).
  4. 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 }).
  5. 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.
âš ī¸
The WEBGL mode in p5.js has a higher carbon footprint due to its reliance on GPU acceleration, which consumes more energy. For applications that do not require 3D rendering, consider using PGraphics with P2D mode as a more energy-efficient and sustainable alternative.

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

  1. 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.
  2. Requires a separate p5.Graphics object: A p5.Graphics object (pg) must be created using createGraphics, usually with dimensions matching the cell size.
  3. 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.
  4. Manual update trigger: p5.Graphics requires an explicit update call, such as from draw, which makes it less concise than function cells.
  5. 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

ParamDescription
jagged_arrayAn array containing any combination of valid JavaScript values. Use null to represent empty cells