IOS - Dragging objects along curved tracks

Question

I rip apart my hair, trying to figure out what seems like a very simple problem. I know that many of these things spoke tangentially, so I apologize if this knocks on well-covered ground, but I can’t find anything concrete for my solution (believe me, I looked).

Basically, I want to drag an object / sprite along a predefined, curved path (and not just move it, but DRAG IT). Think of the “Slide to unlock” iPhone, but instead of just dragging the slider left and right, make the path an arc or a wavy line.

My main thinking:

• determine the bezier path, set the object at the starting point.
• If the object is touched, check for hit detection on the bezier path in touchsMoved (or some similar function). if the touches remain on the path, move the sprite along the path to the end of the path (in this case the task is completed), or the path is deleted with the user's finger (in this case, the object should return to the beginning).

None of this is trivial (at least as it seems). For instance:

• Performing a hit detection on a Bezier path is a royal pain, because you really need to do it on the stroked part, not the fill part. And even then I cannot find a way to do this on a path of any width - only on a 1-point Bezier path.
• Moving the object partially along the path is not even possible: all animation methods move the sprite along the ENTIRE path. In addition, this requires that you find a point on the path closest to the user touch, which, if you have ever considered this, is associated with incredibly complex math.
• I thought about using rigid bodies to take up all the space. EXCLUDES the path, so the object can only move along the path. However, this requires the definition of curved solids, some of which must be concave. Dead end.

Am I doing this too hard? It does not seem complicated. I don’t need a whole solution, just a new way to think about it and direct it in the right direction. Any help would be really appreciated.

Answer 1

How about this?

• Consider the X axis of your bezier path.
• Each time the user clicks or interacts with the screen, just look at the touch part x
• Note that X is the coordinate with your path and moving the object to the desired position.

Answer 2

Yes, you do it too hard.

Take the above simplification (either in a circle, line, etc.) if it works, or if you really want to do it against a bezier curve, consider the following:

• Look at the Bezier curve definition
• What you are looking for is determining the new position P 'of the object from the current position P and changing the position of the touch D.
• If you rephrase the original P (x, y) in terms of t (bézier curves are parametric), then the problem will be to determine how much t is offset to add based on D.
• Something related to the bezier differential fn at P can be a good way to do this. That is, how much t would be added if the curve were a straight line starting from point P along the curve.

EDIT: Transition between segments: If each segment has t in [0,1), you can find t> = 1 and go to the next segment, set P to the end of the previous segment and evaluate the movement again with respect to this point. You may need a few heuristics if you have many small dots, etc.