javascript - 円に対するマウス位置によるオブジェクト制御

Question

インスピレーションが必要です。写真 (青) があり、非表示領域 (オレンジ) 内のマウスの位置に比例して移動させたいと考えています。したがって、マウスが左上方向に移動すると、画像はその動きに追従するはずです。

マウスの位置を単純にコピーするのではなく、ジョイスティックのような動作を作成したいので、マウスが動くと、イメージは目的の方向に段階的に動くはずです。

しかし、どのように？画像の正しい x+y 座標を設定する方法や、それらを計算するための式を確立する方法がわかりません。