How do I make a "exponential curve animation" on a value

Hello,

I try to animate some item opacity with events, I currently have this :

every tick : lerp(item.opacity,100,dt)

So it works, and the animation curve is something like :

But I would like to make the opacity animation curve more like this :

And I don't understand how to do it

There is no difference in the curving. (i layed one on the other).

If you mean 'the other way' that would be lerp(item.opacity,0,dt).

You can have a differend curve using math like: lerp(item.opacity,100,(dt^n)/m)

99Instances2Go

Thanks for your reply

Well there is a difference. The first curve shows that the value will quickly go toward its goal to finally reach it very slowly. The second one shows that the value will very slowly start toward its goal to end up reaching it really fast.

I think the math solution you mention is the right way to do it, but I don't quite understand your suggestion : lerp(item.opacity,100,(dt^n)/m) ?

In fact, in lerp(x,y,z) the z stands for the time that it will lerp from x to y.

You choosed dt as z-factor, wich is fine, but liniair.

The thing is, if you change z to a function, also the time is effected. It wil be a bit try and error. (for me it will be).

So if you change z to 'dt^n' with n a number your choose, you will have a curve. How bigger you choose n to be, how steeper the curve.

You can google on "graph for x^3" to see the curve drawn. Or x^4 ... any math.

But now you also changed the time. So you have to correct it somewhat to youre liking.

That is why i proposed (dt^n)/m, where m is any number that gives you an acceptable time.

So, you choose n and m and it wil be, with by instance n = 3 and m = 2 ... lerp(x,y,(dt^3)/2)

That totally makes sense, I try that now !

99Instances2Go

Alright that's it, I understand how it's working

So the issue was that the first parameter was relative : item.opacity

So whatever the math, the curve was constantly changing because of this relative value and so inevitably scaling down and down without never reaching its goal

lerp is linearly interpolating a to b by x so a and b need to be "static" values so that they follow x function properly, knowing that x=0 will result the value being a and x=1 will result the value being b

So :

lerp(0,100,(Object.timer.currenttime("blabla")/blablaTime)^x)

You will have a nice exponential acceleration from a to b for the duration of your timer.

Thank you so much for your help

I knew about the 'static', but because i used (x,y,z) that got evident. I should have seen that it is not a good presentation of the problem. I apologize for that.

Its nice how you use a timer to insert the dt. I never thaught of that.

I am not sure it's quite working though,

In another try I have some overshoot issue, I wonder if that's because I'm using a timer and not dt...

Well even after reading this very interesting article scirra.com <img src="{SMILIES_PATH}/icon_arrow.gif" alt=":arrow:" title="Arrow" /> /blog/ashley/17/using-lerp-with-delta-time?action=lastpage&t=1461233976004#lastcomment

I can't manage to have something accurate

I guess the best is to carry on with timers and put maximum/minimum values to prevent any overshoot... technically you can't really have a 100% accurate value animation using lerp I think.

You can still use the tick-cyclus.

Lets say we want to count to 10 in 1 second.

dt is time between 2 ticks. So dt takes 1/dt dt-steps in a second.

But we want to do it in 10 steps, meaning each step will be 1/(dt*10)

Or for any time (s): s/(dt*10)

Need a global variable 'step'

Then, first you need a condition that is true when a fade is needed.

Then first subevent (every tick): and the actions

opacity = step^2

add s/(dt*10) to step

Second subevent

If step > 100 >>> set root condition as not true

I did't test this, i can have made a math error. But you see the picture?

I get the picture yes, this is good to simulate a framerate animation btw

I like the idea of creating a step global variable to control the use of dt

The subevent

If step > 100 >>>>>>>>> set value to max

Can be used to define the maximum value to prevent overshooting as well

Thanks

https://

drive.google.com/open?id=0B1SSuCVV8v74di1BMjdSYnNickE

Thank you so much for your example, it's being very instructive.

So as I can see you have the same problem that I had, the value is slightly overshooting because dt cannot be 100% accurate, however in your example it's more accurate.

I think the only way to counter this is by creating limits such as : if X>10 then set X to 10

you could also do :

on timer, set X to max value

if you need 100% accurate values

Also your example will be very useful to try all sort of curves based on expressions. Thanks a lot again!