sort({options})

Sort source cells according to their coloring.

Example

code
Quadrille.background = 'black';
let ascending;
let source, target;
let array;

async function setup() {
  createCanvas(400, 900);
  array = [];
  for (let i = 1; i <= 13; i++) {
    array.push(await loadImage(`p${i}.jpg`));
  }
  array.push(210);
  array.push('🐒');
  array.push(80);
  source = createQuadrille(4, array);
  target = source.clone();
  target.sort();
  ascending = createCheckbox('ascending', true);
  ascending.position(10, height / 2);
  ascending.style('color', 'yellow');
  ascending.input(() => target.sort( { ascending: ascending.checked() }));
}

function draw() {
  background(Quadrille.background);
  drawQuadrille(source);
  drawQuadrille(target, { row: 5 });
}

Syntax

sort([{[mode], [target], [ascending], [textColor], [textZoom], [background], [cellLength], [tileDisplay], [imageDisplay], [colorDisplay], [stringDisplay], [numberDisplay], [booleanDisplay], [bigintDisplay], [symbolDisplay], [arrayDisplay], [objectDisplay]}])

Parameters

ParamDescription
modeString: Either LUMA, AVG, or DISTANCE; default is LUMA
targetp5.Color: target color for DISTANCE mode; default is Quadrille.outline
ascendingBoolean: sort order; default is true
textColorp5.Color: text sampling color; default is Quadrille.textColor
textZoomNumber: text zoom level; default is source.textZoom
backgroundp5.Color: background sampling; default is Quadrille.background, which is set to white
cellLengthNumber: cell sampling length; default is source width
tileDisplayFunction: empty cell drawing procedure; default is Quadrille.tileDisplay
imageDisplayFunction: drawing procedure for image-filled cells; default is Quadrille.imageDisplay
colorDisplayFunction: drawing procedure for color-filled cells; default is Quadrille.colorDisplay
stringDisplayFunction: drawing procedure for string-filled cells; default is Quadrille.stringDisplay
numberDisplayFunction: drawing procedure for number-filled cells; default is Quadrille.numberDisplay
booleanDisplayFunction: drawing procedure for boolean-filled cells; default is Quadrille.booleanDisplay
bigintDisplayFunction: drawing procedure for BigInt-filled cells; default is Quadrille.bigintDisplay
symbolDisplayFunction: drawing procedure for Symbol-filled cells (no default provided)
arrayDisplayFunction: drawing procedure for array-filled cells (no default provided)
objectDisplayFunction: drawing procedure for object-filled cells (no default provided)