Quadrille.cellLength = 30;
let times = 5;
let value, values;
let quadrille;
let p;

function setup() {
  createCanvas(12 * Quadrille.cellLength, 12 * Quadrille.cellLength);
  values = ['👻', '✈️', color('cyan'), 125, '🐒', '🐍'];
  value = '🐒';
  quadrille = createQuadrille(12, 12, 14, value);
  p = createP();
  p.html(`mouse click fills ${times} time(s) with ${value}`);
  p.style('font-size', '16px');
  p.position(10, height);
}

function draw() {
  background('black');
  drawQuadrille(quadrille);
}

function mouseClicked() {
  quadrille.rand(times, value);
  quadrille.order === quadrille.width * quadrille.height &&
                      (quadrille = createQuadrille(12, 12, 14, value));
}

function keyPressed() {
  +key ? times = +key : value = random(values);
  p.html(`mouse click fills ${times} time(s) with ${value}`);
}