ziehbarer Hintergrund

Ich möchte so etwas wie einen unendlichen Widerstand wie den in Konva erreichen. Kann mir jemand dabei helfen? Ich probiere verschiedene Dinge aus, aber keine davon war in Ordnung. Ich bin neu in p5js und Javascript. Bitte für Hinweise. Nur dieses Element hindert mich daran, das gesamte Projekt abzuschließen.

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

Es mag eine elegantere Lösung geben, aber hier zeichne ich auf jeder Seite des Gitters eine zusätzliche Zelle, um den Umlauf zu handhaben, sodass ein 12x12-Gitter mit 10x10 sichtbar ist. Sehen Sie es hier: 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);
    }
  }
}