如何将整个背景与鼠标指针p5.js的光标相反移动

Question

我想让我的背景移动到我的鼠标光标所在的位置，就像这样。

当鼠标光标位于左上角时，背景图片应该向右下方。

当鼠标光标位于右上角时，背景图片应该向左下方。

当鼠标光标位于左侧时，背景图片应该向右移动。

背景照片应该是无限的，可以用x和y尺寸填充整个画布。我怎么能用p5.js做到这一点？

Answer 1

Break your problem down into smaller steps.

第1步：首先只需使用鼠标位置移动一个矩形。在进入下一步之前完成工作。

第2步：然后将矩形移动反向到鼠标位置。想想你是如何通过在一张方格纸上画一些例子来做到这一点的。什么是鼠标位置？矩形的位置应该是什么？重复此操作直到您注意到一个模式。

第3步：现在你有一个矩形与鼠标位置成反比移动，得到一个矩形网格来做同样的事情。 For循环是你的朋友，如果你希望它是无限的，你可能需要做一些聪明的事情，将矩形从一边移动到另一边。

第4步：现在只使用图片而不是矩形。

如果您遇到某个特定步骤，请发布显示该步骤的MCVE ，我们将从那里开始。祝你好运。