Change Bezier Point Values midrace

[ppdc]

I have a stream of particles that I need to control. I have achieved to hide the amount when dragging a controller, but I would also need to change some of the bezier-points to change the course of the particles.

 

I made a codepen to illustrate (the bar is the controller, you can drag it up and down)

 

Is there a way to achieve this?

 

Thank you!

See the Pen yyEmvY by ppdc (@ppdc) on CodePen

[Rodrigo]

Hi,

 

Thanks for the codepen, nice effect!!

 

Unfortunately, for optimization reasons, as far as I know there's no method that can update the values of an instance that are fed to a plugin, the Bezier Plugin in this case.

 

One option would be to pause and kill the current instance the instance, record it's progress, clearProps the target and then create the tween again and advance it to the progress it had when it was paused, something like this:

 

See the Pen rarBrK by rhernando (@rhernando) on CodePen

 

Although for a bunch of particles this might not be the best scenario, you could get some ugly flashes of the particles shifting from one position to another.

 

Another option could be to create a tween that changes the top/left positions of the particles. Since the Bezier Plugin is using X and Y there won't be an overwrite conflict. That particular tween had to be paused and you can change it's progress using the onDrag callback, like this:

 

See the Pen Batoc by rhernando (@rhernando) on CodePen

 

Hopefully this can help and perhaps other users can come up with a better solution, but as you already know is not an easy issue.

 

Rodrigo.

 

PS: I forgot to post this link, it might help a bit:

 

See the Pen Kajpu?editors=001 by GreenSock (@GreenSock) on CodePen

[ppdc]

Hi Rodrigo,

 

well, thank you and thank you for your suggestions.

 

Option two sounds less complicated but wouldn't I be moving the complete Tween?

 

Cheers

[Rodrigo]

Hi,

 

You're welcome.

 

As I mentioned this is not an easy scenario, not the most complicated but the workaround has it's shortcomings. In fact from the moment you modify the top/left of the element, the starting point of the bezier path changes as well, is still the same path, but since X/Y are different from top/left the bezier path will look completely different. If you want to keep the start and end points and change what's between, the only way I see is the first suggestion. As I mentioned it might not look very good:

 

See the Pen ZYjYjO?editors=001 by rhernando (@rhernando) on CodePen

 

But if you're able to combine that codepen with this one:

 

See the Pen Aydqu by rhernando (@rhernando) on CodePen

 

I believe the results could be more acceptable. Think about it this way: pause every particle onDragStart, onDragEnd do what's on the first codepen (change bezier path) except (this is the difference maker) the set() instance that's used to clear the inline styles of the elements, that should be done later. Instead of that record the element's current X/Y in an object in the element's namespace (just like the animation). Then change the instance to the new bezier path and tween each element from the recorded X/Y to the new bezier position using a from() instance and on complete start the animation again.

 

Unfortunately I don't have time to create that sample right now, but hopefully this would help you getting started.

 

Rodrigo.

[Carl]

Yes, Rodrigo is exactly right. 

The API doesn't support tweening Bezier values directly while a tween is running.

It is possible to do, but it is quite tricky.

One problem is that two Bezier paths with the same number of points can be drastically different lengths and look totally different. Not always going to be possible to smoothly transition between them both.

 

I took a stab at this earlier in the day and it seems Rodrigo and I think very much alike (good for me)

I also used the technique of recording the previous progress() of a Bezier tween and then applied it to a new one.

I found that also incrementing the progress slightly helped a little.

 

I added a little code that helps visualize the path by placing dots along it

 

http://codepen.io/GreenSock/pen/dfab7b547442573a51b013fa20aab63b

 

For the record I was inspired by Rodrigos excellent example here: http://codepen.io/rhernando/pen/AydquIt was the first thing I looked at today when researching this;)

 

Rodrigo, I'VE MISSED YOU! Welcome back!

[ppdc]

Rodrigo and Carl,

 

thank you both very much, this forum never fails to amaze me.

 

I only had a glance at your examples (it's 23:30 here), but that looks very much like the way to go!

I will dive into it tomorrow and hopefully come up with a solution.

 

Thank you very much!

 

Peter