10 replies to this topic

[Pandaboy]

I'm a bit rusty at math as I haven't practiced my brain muscles with it in a very long time ...

I have a value (let's call it x) that linearly increases from 0 to 1 over a certain amount of frames. it is never smaller than 0, and never larger than 1.
Is there a way I can use x to create curves as shown in this image? :



as stated, x is currently Linear.
How can I create new values from x to "ease in", "ease out" and "ease in & out"?

Edited by Pandaboy, 04 August 2012 - 12:49 PM.

[Davve]

Linear: y=x
Ease out: y=power(x,2)
Ease in: y=1-power(1-x,2)
Ease in and out: 1-power(sin(x*pi/2-pi/2),2)

Edited by Davve, 27 April 2012 - 10:26 PM.

[GameGeisha]

How can I create new values from x to "ease in", "ease out" and "ease in & out"?

Each of these can be accomplished by taking slices of the sinusoid and scaling it into a [0,1]x[0,1] frame.
- Ease in: sin(lerp(0, pi/2, x))
- Ease out: 1-cos(lerp(0, pi/2, x))
- Ease in and out: (cos(lerp(-pi, 0, x))+1)/2

In fact, if you look at lines 8765-8767 of jQuery 1.7.2's full source, this kind of technique is exactly what it uses for the default swing effect.

GameGeisha

PS: You can see additional easing techniques in Robert Penner's guide to easing (pp. 11-28). A popular JavaScript implementation of Penner's equations is available here, which you can easily adapt into GML.

Edit: Corrected formula for ease-out. See #6.

Edited by GameGeisha, 28 April 2012 - 02:37 AM.

[icuurd12b42]

http://www.gmlscript...etric_functions

[Pandaboy]

Thank you everyone for the help :>! I have never really understood cos/sin (my loss for not taking an advanced math class xD).

@GameGeisha @Davve
that's exactly what I was looking for, the amount of smoothing on the curves are perfect ^^!
I couldn't get Geisha's "Ease out" to work though.. the value seems to be out of the 0-1 range, and I couldn't seem to fix it myself :c



Edit: Dave's ease out worked ^^.

are there any difference in how Davve's and Geisha's methods work? drawing them on a graph makes them seem identical. would any of them have better game performance than the other ? (to me Davve's look faster as it calls less math functions )


Edit2:
here's a .gm81 that shows them in action if anyone's interested

Edit3:
managed to get geisha's ease out working:
y = 1-sin(lerp(pi/2, 0, x))

Edited by Pandaboy, 28 April 2012 - 12:42 AM.

[GameGeisha]

I couldn't get Geisha's "Ease out" to work though.. the value seems to be out of the 0-1 range, and I couldn't seem to fix it myself

My original equation for ease-out had the wrong sign for cosine, and its range is [1,2] rather than [0,1] as it should. The correct equation should have been 1-cos(lerp(0, pi/2, x)) (which is mathematically identical to your corrected equation). I'll edit it right now.

GameGeisha

[Yourself]

Ease in and out can also be accomplished with a polynomial:

y = x * x * (3 - 2 * x);

This is actually extremely close to the trigonometric versions you've been given:

http://www.wolframal.../2} from 0 to 1

It may also be computationally cheaper.

[Pandaboy]

Thank you again everyone for helping me with this :>!
what you have provided to me saves me a lot of time as I would have had to study quite a bit to fully understand these calculations ^^.

@Yourself
I saw only a very, very small difference when drawing your ease calculation as a curve ^^!
I think I'll use this for ease in & out, as lots of objects will use these calculations every frame (I'm creating a 3D animation system), so cheaper calculations are the better solutions :>!

Edited by Pandaboy, 28 April 2012 - 03:02 PM.

[deluksic]

Here, try using my program that i made a day ago in GM8 Just write down the function and it will plot it for you!

Function Tester (download topic)

Edited by deluksic, 30 July 2012 - 07:19 AM.

[Zesterer]

Ease in and out? Isnt that just a cosine wave? Like:

/*
--Arguments--
argument0=value 1
argument1=value 2
argument2=the value (from 0 to 1) to interpolate the numbers with
*/
return min(argument0,argument1)+cos((1-argument2)*pi)*(max(argument0,argument1)-min(argument0,argument1))

This would return a smooth wave curve I think...

Let me know if it works!

EDIT: I discovered this function when using perlin noise - it is great for smoothly interpolating 2 values witha wave - much better than bilinear interpolation!

Zesterer

Edited by Zesterer, 02 August 2012 - 09:22 AM.

[Pandaboy]

this was solved in april, deluksic just necro'd it to get downloads for his function tester XD