easing function needs conversion

Dubbsta

Active Member
Joined
Jul 13, 2017
if anyone is interested in helping me convert this to cx. i tried not working 100% though
here is source if you want to take a look at original

https://ridiculoid.itch.io/ezpz click "dont say i never did nothin for ya"


Code:
Function ease:Float(_type:String,_curr_time:Float,_start_pos:Float,_end_pos:Float ,_end_time:Float)





Local type:String        = _type


Local curr_time:Float        = _curr_time


Local start_pos    :Float    = _start_pos


Local end_pos:Float        = _end_pos


Local end_time:Float        = _end_time


Local output:Float         = 0


Local reversed:Bool        = False


Local range_shIft:Float    = 0


Local end_og:Float


Local start_og:Float


        ' If start position is higher than end position,


        ' reverse them and remember that we did so.


        '


        ' for example:


        '        start_pos = 30


        '        end_pos = 5


        ' becomes:


        '        start_pos = 5


        '        end_pos = 30


        '        reversed = True


        '


        If end_pos < start_pos


            end_og            = end_pos


            start_og            = start_pos


            start_pos            = end_og


            end_pos            = start_og


            reversed            = True


        End


        


        ' If range doesn't begin at zero, slide it over to do so.


        ' save this shIft in range_shIft.


        '


        ' for example:


        '        start_pos = 10


        '        end_pos = 25


        ' becomes:


        '        start_pos = 0


        '        end_pos = 15


        '        range_shIft = -10


        '


        If Not start_pos        = 0


            range_shIft    = start_pos


            end_pos        -= start_pos


            start_pos        = 0


        End


        


        ' If, for some reason, you've coded things in such a way


        ' that the current time has exceed the end time, fear not.


        '


        If curr_time > end_time


            curr_time = end_time


        End


        


        Select type


            


            Case "linear"


                output = end_pos * curr_time / end_time + start_pos


                'break


                


            Case "in-quad"


                curr_time /= end_time


                output = end_pos * curr_time * curr_time + start_pos


                'break


                


            Case "out-quad"


                curr_time /= end_time


                output = -end_pos * curr_time * (curr_time - 2) + start_pos


                'break


                


            Case "in-out-quad"


                curr_time /= end_time * 0.5


                If (curr_time < 1)


                    output = end_pos * 0.5 * curr_time * curr_time + start_pos


                


                Else


                    output = end_pos * -0.5 * (--curr_time * (curr_time - 2) - 1) + start_pos


                End


                'break


                


            Case "in-cubic"


                output = end_pos * Pow(curr_time/end_time, 3) + start_pos


                'break


                


            Case "out-cubic"


                output = end_pos * (Pow(curr_time/end_time - 1, 3) + 1) + start_pos


                'break


                


            Case "in-out-cubic"


                curr_time /= end_time * 0.5


                If (curr_time < 1)


                    output = end_pos * 0.5 * Pow(curr_time, 3) + start_pos


                


                Else


                    output = end_pos * 0.5 * (Pow(curr_time - 2, 3) + 2) + start_pos


                End


                'break


                


            Case "in-quart"


                output = end_pos * Pow(curr_time / end_time, 4) + start_pos


                'break


                


            Case "out-quart"


                output = -end_pos * (Pow(curr_time / end_time - 1, 4) - 1) + start_pos


                'break


                


            Case "in-out-quart"


                curr_time /= end_time * 0.5


                If (curr_time < 1)


                    output = end_pos * 0.5 * Pow(curr_time, 4) + start_pos


                


                Else


                    output = end_pos * -0.5 * (Pow(curr_time - 2, 4) - 2) + start_pos


                End


                ''break


                


            Case "in-quint"


                output = end_pos * Pow(curr_time / end_time, 5) + start_pos


                ''break


                


            Case "out-quint"


                output = end_pos * (Pow(curr_time / end_time - 1, 5) + 1) + start_pos


                ''break


                


            Case "in-out-quint"


                curr_time /= end_time * 0.5


                If (curr_time < 1)


                    output = end_pos * 0.5 * Pow(curr_time, 5) + start_pos


                


                Else


                    output = end_pos * 0.5 * (Pow(curr_time - 2, 5) + 2) + start_pos


                End


                'break


                


            Case "in-Sine"


                output = end_pos * (1 - Cos(curr_time / end_time * (PI / 2))) + start_pos


                'break


                


            Case "out-Sine"


                output = end_pos * Sin(curr_time / end_time * (PI / 2)) + start_pos


                'break


                


            Case "in-out-Sine"


                output = end_pos * 0.5 * (1 - Cos(PI * curr_time / end_time)) + start_pos


                'break


            


            Case "in-circ"


                curr_time /= end_time;


                output = end_pos * (1 - Sqrt(1 - curr_time * curr_time)) + start_pos


                'break


            


            Case "out-circ"


                curr_time = curr_time / end_time - 1


                output = end_pos * Sqrt(1 - curr_time * curr_time) + start_pos


                'break


            


            Case "in-out-circ"


                curr_time /= end_time * 0.5


                If (curr_time < 1)


                    output = end_pos * 0.5 * (1 - Sqrt(1 - curr_time * curr_time)) + start_pos


                


                Else     


                    curr_time -= 2


                    output = end_pos * 0.5 * (Sqrt(1 - curr_time * curr_time) + 1) + start_pos


                End


                'break


            


            Case "in-expo"


                output = end_pos * Pow(2, 10 * (curr_time / end_time - 1)) + start_pos


                'break


            


            Case "out-expo"


                output = end_pos * (-Pow(2, -10 * curr_time / end_time) + 1) + start_pos


                'break


            


            Case "in-out-expo"


                curr_time /= end_time * 0.5


                If (curr_time < 1)


                    curr_time -= 1


                    output = end_pos * 0.5 * Pow(2, 10 * curr_time) + start_pos


                


                Else


                     curr_time -= 1


                    output = end_pos * 0.5 * (-Pow(2, -10 * curr_time ) + 2) + start_pos


                End


                'break


            


            Case "in-elastic"


                Local _s:Float     = 1.70158


                Local _p:Float    = 0


                Local _a:Float    = end_pos


                If (curr_time    = 0 Or _a = 0)


                    output     = start_pos


                End


                curr_time /= end_time


                If (curr_time = 1)


                    output = start_pos+end_pos


                End


                If (_p = 0)


                    _p = end_time*0.3


                End    


                If (_a < Abs(end_pos))


                    _a = end_pos


                    _s = _p*0.25


                


                Else


                    _s = _p / (2 * PI) * ASin (end_pos / _a)


                End


                curr_time -= 1


                output = -(_a * Pow(2,10 * (curr_time )) * Sin((curr_time * end_time - _s) * (2 * PI) / _p)) + start_pos


                'break


                


            Case "out-elastic"


                Local _s:Float         = 1.70158


                Local _p:Float         = 0


                Local _a:Float         = end_pos


                If (curr_time = 0 Or _a = 0)


                    output         = start_pos


                End


                curr_time /= end_time


                If (curr_time = 1)


                    output = start_pos + end_pos


                End


                If (_p = 0)


                    _p = end_time * 0.3


                End


                If (_a < Abs(end_pos))


                    _a = end_pos


                    _s = _p * 0.25


                


                Else


                    _s = _p / (2 * PI) * ASin (end_pos / _a)


                End


                output = _a * Pow(2, -10 * curr_time) * Sin((curr_time * end_time - _s) * (2 * PI) / _p ) + end_pos + start_pos


                'break


            


            Case "in-out-elastic"


                Local _s:Float = 1.70158


                Local _p:Float = 0


                Local _a:Float = end_pos


                If (curr_time = 0 Or _a = 0)


                    output = start_pos


                End


                curr_time /= end_time*0.5


                If (curr_time = 2)


                    output = start_pos+end_pos


                End


                


                If (_p = 0)


                    _p = end_time * (0.3 * 1.5)


                End


                


                If (_a < Abs(end_pos))


                    _a = end_pos


                    _s = _p * 0.25


                


                Else


                    _s = _p / (2 * PI) * ASin (end_pos / _a)


                End


                


                If (curr_time < 1)


                    curr_time -=1


                    output = -0.5 * (_a * Pow(2, 10 * (curr_time)) * Sin((curr_time * end_time - _s) * (2 * PI) / _p)) + start_pos


                End


                curr_time -=1


                output = _a * Pow(2, -10 * (curr_time)) * Sin((curr_time * end_time - _s) * (2 * PI) / _p) * 0.5 + end_pos + start_pos


                'break


                


            Case "in-back"


                Local _s:Float = 1.70158


                curr_time /= end_time


                output = end_pos * curr_time * curr_time * ((_s + 1) * curr_time - _s) + start_pos


                'break


                


            Case "out-back"


                Local _s:Float = 1.70158


                curr_time = curr_time/end_time - 1


                output = end_pos * (curr_time * curr_time * ((_s + 1) * curr_time + _s) + 1) + start_pos


                'break


            


            Case "in-out-back"


                Local _s:Float = 1.70158;


                curr_time = curr_time/end_time*2


                If (curr_time < 1)


                    _s *= 1.525


                    output = end_pos * 0.5 * (curr_time * curr_time * ((_s + 1) * curr_time - _s)) + start_pos


                


                Else


                    curr_time -= 2


                    _s *= 1.525


                    output = end_pos * 0.5 * (curr_time * curr_time * ((_s + 1) * curr_time + _s) + 2) + start_pos


                End


                'break


            


            Case "in-bounce"


                output = end_pos - ease("out-bounce", end_time - curr_time, 0, end_pos, end_time) + start_pos


                'break


                


            Case "out-bounce"


                curr_time /= end_time


                If (curr_time < 1/2.75)


                    output = end_pos * 7.5625 * curr_time * curr_time + start_pos


                


                Else If (curr_time < 2/2.75)    


                    curr_time -= 1.5/2.75


                    output = end_pos * (7.5625 * curr_time * curr_time + 0.75) + start_pos


                


                Else If (curr_time < 2.5/2.75)


                    curr_time -= 2.25/2.75


                    output = end_pos * (7.5625 * curr_time * curr_time + 0.9375) + start_pos


                


                Else


                    curr_time -= 2.625/2.75


                    output = end_pos * (7.5625 * curr_time * curr_time + 0.984375) + start_pos


                End


                'break


            


            Case "in-out-bounce"


                If (curr_time < end_time*0.5)


                    output = (ease("in-bounce", curr_time*2, 0, end_pos, end_time)*0.5 + start_pos)


                


                Else


                    output = (ease("out-bounce", curr_time*2 - end_time, 0, end_pos, end_time)*0.5 + end_pos*0.5 + start_pos)


                End


                'break


        End


        


        ' un-reverse


        If reversed


            Local  range_output_to_end := end_pos - output


            output = end_og + range_output_to_end - range_shIft


        End


        


        ' un-shIft


        output += range_shIft


        


        ' ezpz


        Return output





End
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
the things even I am still finding out... i must look through the examples more ;-)

@MikeHart IMO, this class shouldnt be in examples, it should be more public in the main docs (Id be happy to document this)
 

Phil7

Administrator
CX Code Contributor
3rd Party Tool Dev
Joined
Jun 26, 2017
There is also the cubic bezier tweening module by @Holzchopf. Maybe it is a good idea to put them together somehow to have tweening as a basic module.
Finding things that are already there in CX is one reason that I started rewriting the docs.
 

MikeHart

Administrator
Joined
Jun 19, 2017
Location
Germany
An official documented module would be nice. See Holzchopf's response down later.
 
Last edited:

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
If everyone is happy, I'd be fine combining the 2 classes into a single tweening class, giving the appropriate credit, testing for mojo1 and mojo2, and creating some documentation.
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
been playing while writing docs...
tween.jpg
 

MikeHart

Administrator
Joined
Jun 19, 2017
Location
Germany
Looking at it again, it could use some extra stuff. The overshooting, which you can see with over tweening solutions is not possible, or?
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Well found @Holzchopf ;-)
Again something I wasn't aware of.

I can take a look at the interpolate module and add more of the examples found in skn3 tween demo. Ie, bounce, back, circ etc and also add the bezier tween. Ive also added a custom tween and fade tween.

The advantage of the Tween class is that it had timings, loops and yoyoing built in.

Maybe the "new" tween class could control timings but use the interpolate module commands

Just tell me what you need and I'll add to it...
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
@Holzchopf I see you've already added the bezier code
 

Holzchopf

Moderator
3rd Party Module Dev
Joined
Jul 31, 2017
Location
Bern, Switzerland
Looking at it again, it could use some extra stuff. The overshooting, which you can see with over tweening solutions is not possible, or?
I just checked again in the live demo. It is possible.

The advantage of the Tween class is that it had timings, loops and yoyoing built in.

Maybe the "new" tween class could control timings but use the interpolate module commands
That sounds like a plan.
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
I'll add some more interpolate functions to cerberus.interpolate and also add them to the applet_demo
I'll then look at at a new tweening class. These functions will make the class a lot easier
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Ive added more Interpolation functions to the module, docs and demo...
@Holzchopf Ive not created the images for the new documentation. Do you have a tool to create them as yours are very clean? Itd be nice to stick to the same style
 
Last edited:

Phil7

Administrator
CX Code Contributor
3rd Party Tool Dev
Joined
Jun 26, 2017
The overshooting, which you can see with over tweening solutions is not possible, or?
You are talking about the bouncing stuff, right? I guess this is not possible with a simple cubic bezier curve.

It could be interesting, if you could emulate those curves with multiple bezierpoints combined like in vector paths
and how the performance is with this, regarding practical usage.
Because if it is possible you could fine tune all curves for your needs or even create a tweening editor.

As the user api I would like something without having to deal with the inner structure as it is now.

something like myTween = New Tween(PresetTweenTypeConst:Int, startValue:Float, endValue:Float, duration:Int )
Where PresetTweenTypeConst:Int is just a Number to get one of the premade curves.

and an overloaded Constructor with myTween = New Tween(BezierPointsArray:Float[], startValue:Float, endValue:Float, duration:Int )
to create custom curves with multiple bezier points.
 
Last edited:

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
@Phil7 now that I've added the extra jnterpolation, that's exactly how I've started the Tween class. It will just reference an interpolation based on a const.
 

Holzchopf

Moderator
3rd Party Module Dev
Joined
Jul 31, 2017
Location
Bern, Switzerland
@Holzchopf Ive not created the images for the new documentation. Do you have a tool to create them as yours are very clean? Itd be nice to stick to the same style
Yes, kinda. I drew them in Inkscape and I think I still have the .svg file, so it should be easy to draw the new curves. However, this requires me to pull your changes from github, do my work, and push it again. No big deal, but currently my workstation is not set up for that. I'll have to do that from my working computer in a free minute, which could be somewhen between next week and in an eternity o_O
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Yes, kinda. I drew them in Inkscape and I think I still have the .svg file, so it should be easy to draw the new curves. However, this requires me to pull your changes from github, do my work, and push it again. No big deal, but currently my workstation is not set up for that. I'll have to do that from my working computer in a free minute, which could be somewhen between next week and in an eternity o_O
No rush, maybe its something you could improve in a later release. In the meantime Ive created some graphs (screenshots from your tweening demo) for the docs. Theyre not as good as yours though ;-)

InterpolateBounceEaseInOut.png
 
Top Bottom