obtaining an overall time / constant speed thru a series of bezier tweens with variable path lengths?

[da2020 5 Likes (Newbie)]

Hi,

 

I'm developing a motion path editor that makes use of the bezier plugin and the "bezier through" option such that users can simply click to create points that they want the curve to pass through -- this makes things "simple" because it avoids the need for visible control point handles in the UI.   Great.  The one drawback of course is that you can't make sharp changes in direction/curvature at a point since the "curviness" setting applies across the whole tween --- ie, this is what you lose by avoiding the use of control point handles...  Well, my thought is to get some of this kind of control back, while sticking with just the "bezier through" approach, by allowing the user to declare a point in the curve as a "break" point,  meaning that, behind the scenes, a new "bezier through" tween would start at this point... This allows the curve that departs that point to be a sharp change in direction, or exhibit a different amount of curviness,  based on the points and curviness setting of this new tween... So, in the end, the overall path can end up being one big bezier-through tween (if no "break" points were set) or a seamless series of separate bezier-through tweens, where the point that ends one tween is the starting point of the next tween..  In the eyes of the user, these separate tweens would simply be  "segments" of the total path, where each segment could have its curve properties set independently.

 

I know this can be done using timeline to run these as a series of appended tweens, but what I'm not sure about is how to best set this up if I want the overall path to perform like a single unified motion path, where I can set a time duration for the overall path (timeline) and achieve a constant object "speed" through the entire path (even though the object is actually being animated by a series of separate back-to-back bezier-through tweens, as described above).  The time duration values for the individual tweens can't be used to achieve this, I don't think, because the total length of the curves for each individual tween is going to vary greatly. 

 

So, my question is: Is there a way to override the individual tween durations and have a master timeline duration be in effect that would force a constant speed from one end of the overall path to the other? I assume that clocking the overall timeline progress property to progress at even intervals via enter frame / onUpdate for the timeline (using time-based update value) won't help in this situation, because "progress" would always be in terms of the sum total of the durations of the child tweens (?) -- I guess I need to manipulate "distance-based" progress, not time-based progress, which would not seem possible without knowing the "length" of the path that the bezier curves represent. Too bad there's no "speed" setting for the bezier tweens that could be used instead of "duration".  If "speed" could be set, they could just all be set to the same value and I'd be good.

 

EDIT:  In thinking about this further, I guess there are methods that could be done in as3 to compute the approx distance of the individual quadratic bezier curves, and then sum up those  computed distances for each tween and dynamically calculate the duration property for each tween to achieve a certain speed across all the tweens, but I'm still hoping there's an easier way via some combination of timeline/tweenmax/bezier-plugin features that I haven't yet thought of.  

 

Also open to any ideas on a different approach that would achieve this constant speed goal and the editing goals mentioned above,  ie, is there a better way to set this up other than using a timeline with a series of  back-to-back bezier tweens?

 

Thanks,

 

Doug

[Carl 11,108 Likes (Superhero)]

 I guess there are methods that could be done in as3 to compute the approx distance of the individual quadratic bezier curves, and then sum up those  computed distances for each tween and dynamically calculate the duration property for each tween to achieve a certain speed across all the tweens,

 

 

Setting up multiple Bezier tweens to run at a constant speed would be a very complicated task. And yes, the method you mentioned sounds like a good starting point.

 

The BezierPlugin does not have any methods for assessing the length of curve segments so I'm not sure what to recommend to you as an easier approach.

[da2020 5 Likes (Newbie)]

Got it working as I outlined in my initial post, using a bezier length approximation algorithm on the beziers from each bezier-through tween (feeding the algorithm with the bezier array data from bezierThrough), then calculating the needed duration for each tween so that every tween would run at the same constant speed (per the "Edit" paragraph in my initial post). 

 

It actually works great, and wasn't that difficult once I had the pieces.. Combines the power/intuititve nature of the bezier-through approach (no control handles), with the ability to make sharp changes in direction and curvature (which would normally require control handles).... exactly what I was aiming for.  Plus, have all the power and options of the timeline to manage the "macro" animation behavior across the overall path as well.

 

- Doug

[eigenface 0 Likes (Newbie)]

I'm in a similar situation to da2020, in that I need to be able to specify the speed of an object on a bezier tween.  In order to get the duration, I need the distance along the bezier curve.

 

I could use a similar solution, that is, convert "thru" points to quadratic control points using BezierPlugin.bezierThrough, use a custom algorithm to calculate the bezier curve length from the control points, and then use a type:"quadratic" bezier tween with those same control points.

 

However, I notice BezierPlugin has a _length property which appears to be the total bezier curve length, or at least the approximate length that BezierPlugin uses.

 

Is it better to use the value of this _length property when calculating duration from speed (because this is the length of the path an object on the tween will actually follow)?

 

Would it be possible to expose this _length to the public API in some way?  It would be handy, and it seems a shame not to expose it, if it's already being calculated anyway.

[GreenSock 18,251 Likes (Superhero)]

Yep, we do estimate the length internally. I wanted to be careful not to turn BezierPlugin into something that it wasn't really designed for - a standalone Bezier plotting and drawing tool. We plan to make some "MotionPath" classes for that. If you want to tap into what we're doing internally, feel free, but I'm hesitant to expand the official API to expose more stuff like that. 

[eigenface 0 Likes (Newbie)]

Thanks.

 

For anyone who is reading this thread after searching for the same topic, like I did, I found a good quadratic bezier length algorithm here:

 

https://code.google.com/p/bezier/source/browse/trunk/bezier/src/flash/geom/Bezier.as

 

I found other implementations didn't handle edge cases well - sometimes they returned NaN.