and(q1, q2, row, col)

Returns a new quadrille containing all the filled cells from both q1 and q2 quadrilles, with q1 cells taking precedence.

Example

(to move q2 drag mouse or press a, s, w, z keys)

code

const COLS = 11, ROWS = 16;
// q0 is defined as reference quadrille
let q0, q1, q2;
const col1 = 2, row1 = 3;
let col2 = 6, row2 = 3;
const col3 = 2, row3 = 10;

function setup() {
  Quadrille.cellLength = 30;
  createCanvas(COLS * Quadrille.cellLength, ROWS * Quadrille.cellLength);
  q0 = createQuadrille(COLS, ROWS, COLS * ROWS, color('darkkhaki'));
  q1 = createQuadrille(2, 3, 4, '👻');
  q2 = createQuadrille(3, 2, 4, '✈️');
}

function draw() {
  drawQuadrille(q0, { outlineWeight: 0.5 });
  drawQuadrille(q1, { col: col1, row: row1, outline: 'yellow' });
  drawQuadrille(q2, { col: col2, row: row2, outline: 'magenta' });
  const q3 = Quadrille.and(q1, q2);
  drawQuadrille(q3, { col: col3, row: row3, outline: 'green' });
  text('(row2: ' + row2 + ', col2: ' + col2 + ')', 10, 25);
}

function mouseDragged() {
  row2 = q0.mouseRow;
  col2 = q0.mouseCol;
  return false; // prevent scrolling
}

function keyPressed() {
  row2 = key === 'w' ? row2 - 1 : key === 'z' ? row2 + 1 : row2;
  col2 = key === 'a' ? col2 - 1 : key === 's' ? col2 + 1 : col2;
}

ℹ️

Observe that the dimensions of the resulting q3 quadrille span the minimum area required to cover both q1 and q2. See merge.

Syntax

Quadrille.and(q1, q2, [row], [col])

Parameters

Param	Description
`q1`	Quadrille: first quadrille to merge
`q2`	Quadrille: second quadrille to merge
`row`	Number: The vertical displacement of `q2` relative to `q1`¹. Negative values are allowed
`col`	Number: The horizontal displacement of `q2` relative to `q1`². Negative values are allowed

Default is row2 - row1 if both q1 and q2 are drawn, or 0 otherwise. ↩︎
Default is col2 - col1 if both q1 and q2 are drawn, or 0 otherwise. ↩︎

xor(q1, q2, row, col)diff(q1, q2, row, col)