Quadrille.cellLength = 30;

let p, q;
let span;

function setup() {
  createCanvas(15 * Quadrille.cellLength, 10 * Quadrille.cellLength);
  q = createQuadrille(15, 10, 8, '😼');
  update();
}

function draw() {
  background('BlueViolet');
  drawQuadrille(q);
  span && drawQuadrille(p, { col: span.col, row: span.row, outline: 'yellow' });
}

function mouseClicked() {
  const row = q.mouseRow;
  const col = q.mouseCol;
  if (q.isValid(row, col)) {
    q.isFilled(row, col) ? q.clear(row, col) : q.fill(row, col, '🐦');
    update();
  }
}

function keyPressed() {
  q.randomize();
  update();
}

function update() {
  span = q.span;
  p = span && createQuadrille(span.width, span.height);
}