如何將整個背景反向移動到鼠標指針的光標處p5.js

Question

我想讓我的背景移動到鼠標光標所在的位置，就像這樣。

由於位於左上角的鼠標光標，背景圖片應該去向下的權利。

由於位於右上角的鼠標光標，背景圖片應該去向下向左。

爲位於鼠標光標離開，背景圖片應該去的權利。

背景照片應該是無限的，可以用x和y大小填充整個畫布。我如何用p5.js做到這一點？

Answer 1

Break your problem down into smaller steps.

步驟1：首先只得到一個矩形用鼠標位置移動。在進入下一步之前，請完美地工作。

第2步：然後獲取矩形移動逆到鼠標位置。想一想如何通過在一張方格紙上繪製一些例子來做到這一點。什麼是鼠標位置？矩形的位置應該是什麼？重複此操作，直到您發現一個模式。

第3步：現在您有一個與鼠標位置反向移動的單個矩形，可以獲得一個矩形網格來完成相同的操作。 For循環在這裏是你的朋友，如果你希望它是無限的，你可能必須做一些聰明的事情，從一邊到另一邊移動矩形。

第4步：現在只需使用圖像而不是矩形。

如果您遇到特定步驟，請發佈MCVE，顯示就是那一步，我們將從那裏開始。祝你好運。