Object controll with mouse position relative to circle

Question

Need some inspiration. I've got a picture (blue) and want it to move proportional to the mouse position inside an invisible area (orange). So, if the mouse moves in top-left direction, the image should follow the movement.

I don't want to simply copy the mouse position, rather create an Joystick like behaviour, so if the mouse moves, the image should move stepwise in the desired direction.

But how? I've no idea how to set the right x+y coordinates for the image or how to establish a formula to calculate them.

Answer 1

Incremental (vectored) positions. Consider:

• Let's call the dead center of your invisible circle the vector reference point (0,0) or VRP.

• You move your mouse away form the VRP. Let's use your image as a reference and say that your mouse is at (-3x -2y) relative to the VRP. You keep it there; It creates a -3 X vector and a -2 Y vector.

• For as long as you keep your mouse there, those vectors will be applied to the square's current coordinate at each cycle, like this:

  • Assume Picture starter position is absolute 100,100.
  • Cycle 1: [x]:100 -3 = 97;[Y]:100 -2 = 97. New picture position = 97x98y.
  • Cycle 2: [x]:97 -3 = 94;[Y]:98 -2 = 96. New picture position = 94x96y.

And so forth. If you want to stop the movement, just bring the cursor back to the VRP.

You may sophisticate the mechanism creating acceleration intermediate vectors, or a dead zone around the vector reference point.