javascript - 如何将整个背景逆向移动到鼠标指针的光标 p5.js

Question

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

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

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

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

背景照片应该是无限的，并且可以以 x 和 y 尺寸填充整个 Canvas 。我如何使用 p5.js 做到这一点？

Answer 1

Break your problem down into smaller steps.

第 1 步:首先获取一个随鼠标位置移动的矩形。在进行下一步之前让其完美运行。

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

第 3 步:现在您已经有了一个与鼠标位置反向移动的矩形，获取一个矩形网格来执行相同的操作。 For 循环是你的 friend ，如果你希望它是无限的，你可能需要做一些聪明的事情，将矩形从一侧移动到另一侧。

第 4 步:现在只需使用图像而不是矩形。

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