Split/duplicate animation to a new path once coordinates are reached

[SammyC123]

When the ball reaches an intersection of another line, I would like that ball to split/duplicate itself and begin traversing that second path while the first ball continues on its own course.

 

I am trying to determine a method programmatically to make this happen, so that the solution is extensible to any number of additional lines. So far, I have come up short.

 

Is it possible to use TweenMax to detect when a set of coordinates is reached on a path? (e.g. where the second path begins at M90.7, 86.7) Or is this going to rely solely on timing, in which case easing is pretty much thrown out the window because everything must be linear?

 

Thanks in advance for any assistance rendered.

See the Pen LGOyJm by anon (@anon) on CodePen

[GreenSock]

It absolutely depends on timing of course, but a few ideas come to mind that would work fine with an ease:

 

1) Manual hack: use a scrubber and visually line it up

Attach a scrubber (like a jQuery UI one) to the animation of the first curve so that you can just drag through the animation and then when it's visually lined up with where you want, you just check to see the corresponding time() on the tween that you're scrubbing through. That'll tell you exactly when that 2nd one should spawn. 

 

2) Iterate 

Just set up a JS loop that does a similar thing to what I described above so that instead of manually dragging the scrubber and watching to see when it lines up, you can just have the loop keep checking the position and see at what time() it's closest to the point you're looking for. You'd obviously need to decide on a precision level (0.01 seconds? 0.001 seconds?) so that your loop isn't like 1,000,000,000 iterations. You could record an array of distances and associated times and then just sort it accordingly and get the closest one. 

 

I hope that helps nudge in you in the right direction.

[OSUblake]

Here's a demo I made that finds the closest point on a path. It could be adapted to what you are trying to do.

See the Pen jbVPqw by osublake (@osublake) on CodePen

 

And here's a different version where I was testing out quadtrees with hit detection, although I din't fully implement it. A quadtree splits up an area to search in, so it's a lot faster.

See the Pen 655e4756348410e6e5608d42657749ec?editors=001 by osublake (@osublake) on CodePen

[Diaco]

if i understand correclty , i think L-system algorithm can help you : https://en.wikipedia.org/wiki/L-system