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

function preload() {
  array = [];
  for (let i = 1; i <= 13; i++) {
    array.push(loadImage(`p${i}.jpg`));
  }
  array.push(210);
  array.push('🐒');
  array.push(80);
}

function setup() {
  createCanvas(400, 900);
  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 });
}