Easing functions for my animation not working

Question

I'm not the best at maths, and im sorta trying to guess how to implement this for my animation. But currently it is not working, and I believe i have misunderstood how to do my easing function for my animation.

I have a object which is meant to represent a plane, on my canvas of which has the follow properties:

Current Velocity    = obj.velocity
Braking Distance    = obj.stopDist
Current Position    = obj.posX & obj.posY
Destination         = obj.destX & obj.destY

So i then incorporate the maths to try to have the plane land on a runway with an easing function so it looks half decent visually even if its not real world physics like this:

function ease(easeDelta,accelerateBool){
    if(accelerateBool){
          // accelerating
          return (easeDelta * easeDelta * easeDelta);
    } else {
         //decelerating
          return ((easeDelta--) * easeDelta * easeDelta + 1);
        }

}
function InRange(delta, minValue, maxValue){
     var range        = (maxValue - minValue);
     var valueInRange = (range * delta); 
     var finalValue   = (valueInRange + minValue);
     return finalValue;
}

function landing(){ //part of animation loop
 var delta        = new Date().getTime() - obj.timer, //ms since previous frame         
     vectorX      = obj.destX - obj.posX,
     vectorY      = obj.destY - obj.posY,
     normal       = Math.sqrt(vectorX*vectorX + vectorY*vectorY), //distance to destination
     targetSpeed  = 20,
     easeDelta    = (normal / obj.stopDist),
     newSpeed     = InRange(ease(easeDelta,false), obj.velocity, targetSpeed),
     distance     = delta * newSpeed;

     obj.posX    += (distance * vectorX);
     obj.posY    += (distance * vectorY);
     obj.timer    = new Date().getTime(); //ready for next frame    
}

The problem is the plane doesn't slow down as it goes a long the runway towards its destination. It just stays really slow.

Have i confused my maths with how easing functions work ?

score 0 · Accepted Answer · answered Jan 08 '15 at 22:59

0

Here are some extremely simple easing in and out equations written in that you might find helpful.

  // accelerating from zero velocity
  function easeIn(t)
  {
    return t*t
  }

  // decelerating to zero velocity
  function easeOut(t) 
  { 
    return t*(2-t) 
  }

so you could use them like so:

function ease(easeDelta,accelerateBool){
    if(accelerateBool){
          // accelerating
          return (easeDelta * easeDelta);
    } else {
         //decelerating
          return ((easeDelta*(easeDelta - 2)));
        }

}

answered Jan 08 '15 at 22:59

alacy

4,972
8
30
47

I already have my ease functions written right at the top of my code. I opted for `easeInCubic` and `easeOutCubic`. The syntax of those functions are not the issue. I'm not sure you understood my question. – Sir Jan 08 '15 at 23:06
Ahh yes I misunderstood when you said "Have i confused my maths with how easing functions work?". How are `obj.vectorX` and `obj.vectorY` defined? – alacy Jan 08 '15 at 23:57
sorry that was a type. The are variables defined a few lines before. – Sir Jan 09 '15 at 00:26
Did changing that typo have any effect? It might explain why the plane was moving slowly because the `obj.posX` and `obj.posY` weren't being updated properly. – alacy Jan 09 '15 at 00:54
@aus_lucy no my sprite vanishes as the number is like some crazy value – Sir Jan 09 '15 at 01:33

Easing functions for my animation not working

1 Answers1