Easing function object goes too fast

Question

I recently came across this website which contains some easing functions: http://gizma.com/easing/

And have tried to implement a quadratic easing in/out from it, into my script but my sprite seems to whiz off the screen super quickly. I'm not sure where my logic went wrong and need some help understanding my mistake.

My easing function looks like this:

    //t = time, b = startvalue, c = change in value
     function ease(t, b, c, duration) {
         t /= duration/2; //duration is in milliseconds
         if (t < 1) return c/2*t*t + b;
         t--;
         return -c/2 * (t*(t-2) - 1) + b;
     };

And my code to animate the motion is fired from a mousedown listener:

function animate(e){
    clearTimeout(timer);

    var duration  = 2000; //2 seconds

    var startX    = camera.x;
    var startY    = camera.y;

    var targetX   = e.offsetX - element.width/2  + camera.x; //world space
    var targetY   = e.offsetY - element.height/2 + camera.y; //world space

    var vectorX   = targetX - startX / duration;
    var vectorY   = targetY - startY / duration;

    var startTime = Date.now();

    function update(){
        var t   = Date.now() - startTime; //time elapsed so far
        var cX  = vectorX * t; //change in X
        var cY  = vectorY * t; //change in Y

        var amountX = ease(t,startX,cX,duration); // see function above
        var amountY = ease(t,startY,cY,duration);

        var difX    = startX - amountX; //get the difference
        var difY    = startY - amountY;

            camera.x += difX;
            camera.y += difY;

        if (t >= duration){
            clearTimeout(timer);
        } else {
            timer = setTimeout(update,0);               
        }
    }
    update();   
}

What's causing the animation to go so quickly and so far?

Edit: added, a fiddle encase it helps: http://jsfiddle.net/a86m33nj/

Answer 1

https://jsfiddle.net/pcconsolidated/xesnom2t/

Your problem was just simply over complicating it. The quadratic easement function simply wanted to know the start coordinate, how far to move it,the current time relative to the start time, and the overall duration. Also the output from the quadratic is the new coordinate not how far the object is being moved so simply replace the coordinate with the value from the function rounded to the nearest number.

var element 		= document.getElementById('background');
var output 		    = document.getElementById('output');
var camera=document.getElementById("camera");
var timer;
var targetX=0;
var targetY=0;
document.addEventListener('click', animate,true);
var duration  = 2000; //2 seconds
var startX    = 0;
var startY    = 0;
var startTime =0;


function animate(e){
	targetX   = e.clientX ;
    targetY   = e.clientY ;
	clearTimeout(timer);
     startX    = parseInt(camera.style.left.split("p")[0]);
	 startY    = parseInt(camera.style.top.split("p")[0]);
	 
	startTime = Date.now();
    	
    
	
		 
	
		updateLoc();	
	}
	


	function updateLoc(){
			var t	= (Date.now() - startTime);
			var cX 	= targetX-startX; //change in X
			var cY  = targetY-startY; //change in Y
            
			var amountX = ease(t,startX,cX,duration);
			var amountY = ease(t,startY,cY,duration);
               
				newX=Math.floor(amountX);
				newY=Math.floor(amountY);
				camera.style.left = Math.floor(newX)+"px";
            	camera.style.top = Math.floor(newY)+"px";
				output.innerHTML+=newX+","+newY+"___";
			if (Date.now() - startTime >= duration){
				clearTimeout(timer);
			} else {
				timer = setTimeout(updateLoc,0);				
			}
		}


	
	//t = time, b = startvalue, c = change in value
		 function ease(t, b, c,duration) {
			 t /= duration/2;
			 if (t < 1) return c/2*t*t + b;
			 t--;
			 return -c/2 * (t*(t-2) - 1) + b;
		 };


</script>

<canvas id="background" width="500" height="500">
    
    
    
</canvas><br/>
<div id="output"></div><div id="camera" style="background-color:green;top:250px;left:150px;position:absolute;height:30px;width:30px;"></div>

<script type="text/javascript">

It's quite ruff and my offset is wrong somwhere but ill continue to tinker after dinner and see if i can get that. Here is my code hope it works for you.