バックグラウンド全体をマウスポインタの逆に移動する方法p5.js

Question

マウスカーソルがどこにあるのかを背景にしたいと思っています。左上の位置にマウスカーソルとして

、背景画像は、下方右に行くべきです。右上の位置にマウスカーソルとして

、背景画像は、下方左側に行く必要があります。左の位置にマウスカーソルとして

、背景画像は、右に行く必要があります。

背景の写真は無限で、キャンバス全体にxとyのサイズを塗りつぶすことができます。どうすればp5.jsでこれを行うことができますか？

Answer 1

Break your problem down into smaller steps.

ステップ1：まずだけでマウスの位置に移動する四角形を取得します。それを次のステップに移る前に完全に動かす。

手順2：次に、の逆のをマウスの位置に移動させる矩形を取得します。グラフ用紙にいくつかの例を描いて、これをどうやって行うのか考えてみましょう。マウスの位置は？四角形の位置はどのようにすべきですか？パターンに気付くまでこれを繰り返します。

ステップ3：これで、マウスの位置とは逆の動きをする1つの矩形ができました。同じことをする長方形のグリッドを取得しました。 forループはここにあなたの友人です。あなたが無限にしたいなら、一方の側から他方の側へ矩形を動かすことで賢明なやり方をしなければならないかもしれません。

ステップ4：ここで、長方形の代わりにイメージを使用してください。

特定のステップで立ち往生した場合は、と表示されているMCVEとと表示されているので、ここから移動します。がんばろう。