backgroun kéo

Tôi muốn đạt được một cái gì đó giống như một lực cản vô hạn như cái trong Konva js Ai có thể giúp tôi với điều này. Tôi thử những thứ khác nhau nhưng không phải trong số đó là ok. Tôi mới trong p5js và javascript. Xin vui lòng cho bất kỳ gợi ý. Chỉ có yếu tố này ngăn tôi hoàn thành toàn bộ dự án.

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

Có thể có một giải pháp tao nhã hơn, nhưng ở đây tôi vẽ một ô phụ ở mỗi bên của lưới để xử lý vòng tròn, do đó, lưới 12x12 với 10 x 10 có thể nhìn thấy. Xem nó chạy ở đây: 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);
    }
  }
}