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

Get help using Construct 2

Post » Tue Apr 19, 2016 11:57 am

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 :

Image

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

Image

And I don't understand how to do it :cry:
B
9
S
1
Posts: 60
Reputation: 611

Post » Tue Apr 19, 2016 12:01 pm

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)
B
33
S
18
G
28
Posts: 2,493
Reputation: 20,950

Post » Tue Apr 19, 2016 2:00 pm

@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) ?
B
9
S
1
Posts: 60
Reputation: 611

Post » Tue Apr 19, 2016 4:01 pm

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)
B
33
S
18
G
28
Posts: 2,493
Reputation: 20,950

Post » Wed Apr 20, 2016 9:09 am

That totally makes sense, I try that now !
B
9
S
1
Posts: 60
Reputation: 611

Post » Wed Apr 20, 2016 4:36 pm

@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
B
9
S
1
Posts: 60
Reputation: 611

Post » Wed Apr 20, 2016 5:13 pm

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.
B
33
S
18
G
28
Posts: 2,493
Reputation: 20,950

Post » Thu Apr 21, 2016 9:52 am

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...
B
9
S
1
Posts: 60
Reputation: 611

Post » Thu Apr 21, 2016 10:22 am

Message: jokerdeus can only post plain text URLS until they have 500 rep. 1 URLS modified. Why?
Well even after reading this very interesting article https://www.scirra.com :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.
B
9
S
1
Posts: 60
Reputation: 611

Post » Thu Apr 21, 2016 1:06 pm

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?
B
33
S
18
G
28
Posts: 2,493
Reputation: 20,950

Next

Return to How do I....?

Who is online

Users browsing this forum: matriax and 19 guests