-
Constant speed Slow down
Hello friends,
I’m tying to add two interpolation functions with a smooth transition.
The first part have a constant speed and goes from t=0 to t=1.
The second part should be a slow down and stop function, from t=1 to t=2.
I found out to create a custom exponential formula for part 2, but I don’t know to model the curve that speed of the start point match the speed of constant function.
Do you have any ideas for that?
Thanks.
startVal = [100,100];
endVal = [200,200];
function easeX(startDur, endDur, startVal, endVal) {
var x = linear(time, startDur, endDur, 0, 1);
var c = 1-Math.pow(1-x,2)
return linear(c, 0, 1, startVal, endVal);
};
a = linear(time, 0, 1, startVal, endVal);
b = easeX(1, 2, [0,0], [20,20]);
a+b;
-
4 Replies
-
Hey Tudor, you are summing a+b at the end, in order to increase the endVal by additional 20?
Also, there might be a clash at time value of 1, where neither of a/b will meet the condition.
-
I think maybe you just need to change the last part from this:
a = linear(time, 0, 1, startVal, endVal);
b = easeX(1, 2, [0,0], [20,20]);
a+b;to something like this:
if (time < 1)
linear(time, 0, 1, startVal, endVal)
else
endVal + easeX(1, 2, [0,0], [20,20]); -
a = linear(time, 0, 1, startVal, endVal);
b = easeX(1, 2, [0,0], [20,20]);
a+b;The a+b works fine. The problem is the start speed of b. The tangent of b at t=1 should be the same of a. Then b slows smooth down.
I Think ;)??🤨
-
Hi Tudor,
it’s important to understand this key-point:
you cannot control everything at once to get a constant speed slow down.
I mean, you cannot define AND an arbitrary overshoot Distance (the extra [20,20]), AND a set time (1 extra second) AND a given starting speed (the amount travelled in the linear function) and make that result in a linear deceleration.
At least 1 thing has to be set/precomputed to make the other 2 values work.
For example, if you want the overshoot to be +[20,20], the time that needs to take for a linear deceleration from the given linear function is 0.4 seconds:
b = easeX(1, 1.4, [0,0], [20,20]);
should work perfectly.
If on the other hand, you want the overshoot to last the full extra second, the overshoot distance needs to be [50,50];
b = easeX(1, 2, [0,0], [50,50]);
If you want to overshoot [20,20] and make that last 1 second, then the de-acceleration can’t be linear , and would need to be:
var c = 1-Math.pow(1-x,5);
etc.
How to calculate these values:
take this starting Point:
startVal = [100,100]; endVal = [200,200];
linearStartTime = 0; linearEndTime = 1;
dampingCoefficient = 2; // 2 = linear deceleration
overshootTime = 1;
overshootAmount = 0.5;
function easeX(startDur, endDur, startVal, endVal) {
var x = linear(time, startDur, endDur, 0, 1);
var c = 1-Math.pow(1-x, dampingCoefficient);
return linear(c, 0, 1, startVal, endVal);
};
a = linear(time, linearStartTime, linearEndTime, startVal, endVal);
overshootVal = mul(sub(endVal, startVal), overshootAmount);
b = easeX(linearEndTime, linearEndTime+overshootTime, [0,0], overshootVal);
a+b;This will work for any startVal/endVal combination.
But not when you change the length of the linearStartTime – linearEndTime.If you want the overshoot to still be 50% of what was travelled in the linear section, overshootTime would have to be calculated as:
overshootTime = linearEndTime-linearStartTime;
But 50% is rather a lot of overshoot, so how to calculate the values for 20% (as in your original example):
dampingCoefficient = 2; // 2 = linear deceleration
overshootAmount = .2; // 20%
overshootTime = (overshootAmount*dampingCoefficient)*(linearEndTime-linearStartTime);What if you want the overshootTime to be fixed to 1 second, and calculate the needed overshootAmount (thought this would be less realistic):
dampingCoefficient = 2; // 2 = linear deceleration
overshootTime = 1;
overshootAmount = overshootTime/(dampingCoefficient*(linearEndTime-linearStartTime));
Reply to this Discussion! Login or Sign Up