Help with InterpSetting class (Part 2: Bezier Easing Curves)

[dstofka]

I have a rather complex question regarding the InterpSetting class (follow up to Part 1 about the component parameter). This is a code excerpt that sets a custom Bezier easing curve on a keyframe:

Code: Select all

local interpNew = MOHO.InterpSetting:new_local()
interpNew.interpMode = MOHO.INTERP_BEZIER
-- component = 0|1|2, corresponding to the x|y|z subchannels of the given channel
interpNew:SetBezierOutAngle(component, outA)
interpNew:SetBezierOutPercentage(component, outP)
interpNew:SetBezierInAngle(component, inA)
interpNew:SetBezierInPercentage(component, inP)
chan:SetKeyInterp(frameNum, interpNew)

In short, I have two keyframes and want to draw a custom easing curve between them. I could plot the two Bezier control points relative to the points if Moho used something like cubic-bezier() in CSS (example: https://easings.net/#easeOutQuart) but Moho seems to use a different approach ... not so much for the percentage values but for the angles.

Through experimentation, I've learned that:

1. The Bezier easing parameters applied to a keyframe affect the tween between that keyframe and the following one, where "Out" refers to the control point on the first keyframe and "In" refers to the control point on the second keyframe (opposite of the "in"/"out" terminology used in Moho's UI)
2. The SetBezierOutPercentage() and SetBezierInPercentage() methods govern where each keyframe's Bezier handle lies as a percentage (from 0 to 1) of the distance from that keyframe to the other
3. The SetBezierOutAngle() and SetBezierInAngle() methods use radians, ranging from 0 indicating a handle that extends horizontally from the keyframe, to ±1.57 (±π/2), with positive being up from the first (out) keyframe or down from the second (in) keyframe.
4. The SetBezierOutAngle() and SetBezierInAngle() angles relate to both the change in time (number of frames between keyframe 2 and keyframe 1) and change in distance (difference in subchannel value between keyframes 2 and 1).

What I can't figure out is on what basis the angle values outA and inA relate to the Bezier curve that ends up getting drawn on the Motion Graph. Contrary to how CSS's cubic-bezier() works, the Bezier angle values in Moho are dependent on both Δtime and Δvalue. If on the Motion Graph you change the relative spacing in a tween -- horizontally (Δtime) or vertically (Δvalue) -- between the keyframes of a tween but want to preserve the same type of easing, the out/in Bezier angles have to be changed.

Hope this question makes sense to someone!
Thanks,
Dave

[synthsin75]

The SetBezierOutAngle() and SetBezierInAngle() methods use radians, ranging from 0 indicating a handle that extends horizontally from the keyframe, to ±1.57 (±π/2), with positive being up from the first (out) keyframe or down from the second (in) keyframe.

I probably won't be much help on this, but this info explains a lot about problems I've had in the past. I appreciate you spelling it out.

[hayasidist]

First, a bit about Bezier (and apologies if you know this). A cubic bezier needs four control points. P0 and P3 are the "actual" ends of the curve. P1 and P2 are the ends of the control handles. The drawn curve starts out along the line P0-P1 then ends up along the line P2-P3.


In Moho
> Angle is the "slope" out P0-P1 or in P3-P2
> Percentage, in combination with curvature gives the length of the P0-P1 and P3-P2 tangents (IOW you get the polar coordinates {r, theta} of the end of the control handle)

You can take a look at viewtopic.php?f=12&t=33928 and the tool linked there https://www.mediafire.com/file/vhxz93hn ... r.zip/file

That's all about points on a vector layer and control handles - but if you get the principle, you should be able to see how the x/y of the drawing area corresponds to the time/value of the timeline... and how to convert between "end of control handle" {t,v} and its {r, theta}

None of this, however, helps you with actually shaping the "custom easing curve".

I think what I'd do is model the easing curve as a vector drawing and use the P(n)s of that as the reference model ... then convert from the modelled {x,y} space to the {t,v} space (IOW the vector points are P0, P3 -- and these correspond to the keyframes Ka, Kb; and the P1, P2 control handle ends need to be re-based for the actual separation of Ka and Kb in {t,v} and that should give you the angle/percentage numbers you need.) ??? But that's a shoot-from-the-hip thought -- if I think of a better way, I'll post something.

HTH

[lucasfranca]

Well, I don't know anything about scripts, but I know a script like this is very, very useful, so I'll follow along here.

[dstofka]

Thank you, hayasidist ... when I come up for air from the projects I'm working on, I will take what you've explained and explore this further. I'll share whatever I come up with!

[hayasidist]

having re-read this thread, it struck me that the thinking might have focus only on temporal interpolation. So, again apologies if this is nothing new for you, but I feel I should highlight the fact that there is both temporal and spatial interpolation.

e.g. for point motion there are two components (x and y) that need their (sub)channels set consistently / compatibly to achieve the desired spatial interpolation -- e.g. a circular path from start to finish point.
then there is the timing of how the point traverses the path -- e.g. ease in / ease out


The Bezier parameters for the x and y motion graphs need to take both spatial and temporal into account.

for example: a circular motion will require x to vary as cos(theta) and y to vary as sin(theta) where the value of theta is some function of time as per whatever custom easing curve is desired. But it's not theta that goes in the motion graph... it's the x and y motions that appear (separately) in the motion graph - and these need to be set to achieve the desired spatial motion - both with respect to displacement and speed.