let destino; // Video variable
let quadrille;

function preload() {
  // Load video in preload
  destino = createVideo(['/videos/destino.webm']);
  destino.hide(); // Hide video controls
}

function setup() {
  createCanvas(400, 400);
  quadrille = createQuadrille(8, 8, int(random(1, 64)), destino);
}

function draw() {
  background('black');
  drawQuadrille(quadrille, { cellLength: width / quadrille.width });
  fill('yellow');
  text('order: ' + quadrille.order + ', size: ' + quadrille.size, 20, 20);
}

function mouseClicked() {
  // Toggle video playback on mouse click
  destino.looping ? destino.pause() : destino.loop();
  destino.looping = !destino.looping;
}

function keyPressed() {
  const dim = int(random(1, 8));
  const size = dim ** 2; // Equivalent to: size = pow(dim, 2);
  const order = int(random(1, size));
  quadrille = createQuadrille(dim, dim, order, destino);
}