Constraining movement of a draggable object

[Kojay]

Hello,

I 've put together a small puzzle game:



The yellow balls can be dragged around. However, I would like to constrain their movement onto the red lines. I imagine this is a common thing to do and I don't want to be reinventing the wheel.

The code is not big.

There are two issues as I see it:
-when clicking on a ball to move it, it needs to decide which edge to follow along
-when moving it needs to stick to the edge.

I 'm not necessarily looking for code as much as a general guideline on how to implement such a thing. If my current design would need to be scrapped, that's fine. Thanks.

[Nexus]

Find out where to move the circle

1. For a circle, compute the unit vectors along the red edges towards all its neighbor circles: u₁, u₂, ...

2. When the user drags the circle, compute the direction vector d from the point where the mouse has been first clicked, preferably over multiple frames to weaken errors of small mouse movements.

3. Compute the dot products of d with all vectors u_i. These represent the projection of d onto the red edges.

4. Choose the edge with the largest dot product. This is the one that has the most similar direction to the user's mouse vector d.


Keep circle on edge

You have already computed the edge unit vectors u_i. You can now simply move the balls along those vectors until they reach a neighbor position.

One issue to take into account is floating point precision; don't compare for position equality and don't move the ball by adding to its last position. You should rather divide the edge into a set of small intervals, and move the ball relatively to its original position.

When p is the original position and u the chosen edge vector, the positions of the ball will be p + t*u, where t is scaled according to the intervals. Depending on how you handle frame rates, you might also want to incorporate the delta time (but I would keep it constant for simplicity).

[Kojay]

Brilliant!   

Although I don't want to send my ball on an automatic journey along the edge, the user should keep dragging. In which case I imagine a given point on the edge has two opposite vectors to choose from - and the dot product can be used again to decide.
Anyhow I 'm gonna play with it - somehow I feel the solution has a certain library in mind...

[Lethn]

Is it all right if I look at this code for some point, click and drag reference? Been trying to find some good examples on this for awhile now.

[Kojay]

The original code is still there. The balls are draggable and there's collision detection between them.

Here is a basic implementation of Nexus' suggestion, with a bit of help from his library Thor. I discounted his advice on moving on discrete points though and instead project the direction vector onto the edge. 
There's no guard against moving off the ends of edges.

Whether these constitute good tutorials, I really doubt.