0

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.

Movement

greg.ms
  • 109
  • 2
  • 11
  • Do you have any code that you have tried? If you really have no clue where to start, I would recommend looking at the resources here: http://stackoverflow.com/questions/11246/best-resources-to-learn-javascript – George Aug 21 '13 at 19:05
  • I develop with PHP, JS, python etc. but it's just a mathematical problem, which I can't handle – greg.ms Aug 21 '13 at 19:09
  • The actual coordinates don't need to be calculated, they come directly from the javascript events. To determine how far the mouse is from the center of the circle, http://cs.selu.edu/~rbyrd/math/distance/ – George Aug 21 '13 at 19:11
  • I had a hard time understanding what your question was about; can you tell me which part of this example you would like explained? http://jsfiddle.net/JkZH9/ – George Aug 21 '13 at 19:34
  • Thank you very much for your help and the example, but @OnoSendai posted the right answer – greg.ms Aug 21 '13 at 20:32

1 Answers1

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.

OnoSendai
  • 3,960
  • 2
  • 22
  • 46