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
}
ℹ️
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 withawait
and immediately hidden using thedestino
hide method to remove default controls. - Interactive Playback Toggle: This code toggles the video playback when the mouse is clicked:The ternary operator (
destino.looping ? destino.pause() : destino.loop(); destino.looping = !destino.looping;
condition ? exprIfTrue : exprIfFalse
) is shorthand forif/else
. Equivalent code:if (destino.looping) destino.pause(); else destino.loop();
destino.looping
custom property: Initially,destino.looping
isundefined
(a falsy value). The linedestino.looping = !destino.looping;
flips its value totrue
on the first click, and subsequently toggles it betweentrue
andfalse
.
Example 3: Functions, Images, Text, Colors 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 and font
sb = await loadImage('/images/simon_bolivar_wedding.jpg');
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, '🦙'],
[null, red, null, 185, '🦜', sb]
]);
}
function draw() {
background('#DAF7A6');
drawQuadrille(quadrille);
}
function pulse() {
push();
const center = Quadrille.cellLength / 2;
const radius = map(sin(frameCount * 0.1), -1, 1, 5, center);
noStroke();
fill('cyan');
circle(center, center, radius);
pop();
}
ℹ️
Observations about P2D mode and function cells
- Canvas Mode and Function Cells: Using
P2D
mode—either by omitting the third argument tocreateCanvas()
or explicitly setting it—supports 2D function-based cells likepulse
. - 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, usedrawQuadrille(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 (likecircle(center, center, radius)
), definecenter = Quadrille.cellLength / 2
. Alternatively, passoptions: { origin: CENTER }
todrawQuadrille()
to shift the coordinate system to the cell center.
Example 4: 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);
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 = createQuadrille([
['hi', 100, sb, ringTorus, null, 0],
[null, yellow, ringTorus, ':)'],
[null, blue, ringTorus, 255, ':p'],
[null, red, 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();
}
ℹ️
Observations about WEBGL mode and function cells
- 3D Function Cells: Using
WEBGL
mode as the third argument tocreateCanvas()
enables 3D function-based cells likeringTorus
, which can render geometry using primitives such asbox
,sphere
, andtorus
. - 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, usedrawQuadrille(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, passoptions: { origin: CORNER }
todrawQuadrille()
.
Example 5: 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'); // 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);
}
ℹ️
Observations about p5.Graphics cells
- Alternative to function cells:
p5.Graphics
can be used instead of function cells and works in bothP2D
andWEBGL
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 usingcreateGraphics
, usually with dimensions matching the cell size. - Origin in P2D mode: In this example, the
origin
is the top-left corner, sopg.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 fromdraw
, 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 |