motif déplaçable

Je veux réaliser quelque chose comme une traînée infinie comme celle de Konva js Quelqu'un peut-il m'aider avec cela. J'essaie des choses variées mais aucune d'elles n'était correcte. Im nouveau dans p5js et javascript. S'il vous plaît pour tout indice. Seul cet élément m'empêche de terminer l'ensemble du projet.

var grid;
var current_img;
var BgCat1 = [];
var layerOne;
let show_grid = false;

Il peut y avoir une solution plus élégante, mais ici, je dessine une cellule supplémentaire de chaque côté de la grille pour gérer l'enveloppe, donc une grille 12x12 avec 10x10 visible. Voir la course ici: https://editor.p5js.org/rednoyz/full/uJCADfZXv

let dim = 10, sz;
let xoff = 0, yoff = 0;

function setup() {
  createCanvas(400, 400);
  sz = width/ dim;
}

function mouseDragged() {
  xoff += mouseX - pmouseX;
  yoff += mouseY - pmouseY;
}

function draw() {
  background(255);

  for (let i = 0; i < dim+2; i++) {
    for (let j = 0; j < dim+2; j++) {

      let x = ((xoff + j * sz) % (width+sz)) - sz;
      if (x < -sz) x += width+sz;

      let y = ((yoff + i * sz) % (height+sz)) - sz;
      if (y < -sz) y += height+sz;

      rect(x, y, sz, sz);
      text(i * 10 + j, x + sz/2, y + sz/2);
    }
  }
}