R.Penner's easing formula(s) & mc.lineTo() --> weird results

[thaumaturgy]

The sample SWF:

http://rwocreative.com/lineTest/line01.html

The FLA:

http://rwocreative.com/lineTest/line01.fla

Code for frame 1:

PHP Code:

///////////// QUADRATIC EASING ////////////////////////
//// Robert Penner - Sept. 2001 - robertpenner.com ////

// quadratic easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in value, d: duration
// t and d can be frames or seconds/milliseconds
Math.easeInQuad = function (t, b, c, d) {
    return c*t*t/(d*d) + b;
} 


Code for frame 2:

PHP Code:

stop();

//var coord = [[100,0],[100,100],[0,100],[0,0]]; //This one works with the old method of easing.
var coord = [[100,0],[0,100],[-100,0],[0,-100]]; //This array *sort of* works with RPenner's method.

var i = 0;
var j =0;
var time = 0;
var endtime = 13;
var my_x;
var my_y;
var oldx = 0;
var oldy = 0;

blank_mc.onEnterFrame = function() {
    myColorObj.fadeHex(0xFF0000, 1500);
    this.lineStyle(3, 0x0000FF, 100);
    if(i < coord.length) {
        if(time < endtime) {
            this.lineTo(my_x, my_y);
            //my_x -= (my_x - coord[i][0])/2;
            //my_y -= (my_y - coord[i][1])/2;
            //Math.easeInQuad = function (t, b, c, d) {
            //return c*t*t/(d*d) + b; }
            my_x = Math.easeInQuad(time, oldx, coord[i][0], endtime);
            my_y = Math.easeInQuad(time, oldy, coord[i][1], endtime);
            time++;
        } else {
            time = 0;
            //my_x = coord[i][0];
            //my_y = coord[i][1];
            oldx = coord[i][0];
            oldy = coord[i][1];
            i++;
        }
    } else {
    this.onEnterFrame = null;
    }    
} 


The Problem:

I'm running into a problem where if I implement Robert Penner's Easing formula to a series of drawn lines (using the Drawing API in MX) it produces funky results. If I just use normal easing techniques (i.e., myX -= ((myX - oldX)/5);) and uncomment the appropriate line in the first else() statement, it works like it should. I'd really REALLY like to implement RPenner's method of easing, but if it doesn't translate well to lines drawn on-the-fly, then I'll have to resort to the tried and true.

Thanks in advance...

[pixelwit]

The third argument "c" in the easing function should represent the "Change" from the start value to the end value, not the end value.

my_x = Math.easeInQuad(time, oldx, coord[i][0]-oldx, endtime);

Or you could change the easing function:

Math.easeInQuad = function(t, b, c, d) {
	return (c-b)*t*t/(d*d)+b;
};

You should also declare your easing function outside your enterFrame function since there's no need to define the easing equation 24 times per second.

-PiXELWiT
http://www.pixelwit.com

[thaumaturgy]

Originally posted by pixelwit
The third argument "c" in the easing function should represent the "Change" from the start value to the end value, not the end value.

my_x = Math.easeInQuad(time, oldx, coord[i][0]-oldx, endtime);

Or you could change the easing function:

Math.easeInQuad = function(t, b, c, d) {
	return (c-b)*t*t/(d*d)+b;
};

You should also declare your easing function outside your enterFrame function since there's no need to define the easing equation 24 times per second.

-PiXELWiT
http://www.pixelwit.com

Dope, thank you Mr. WiT. I didn't declare my function inside my onEnterFrame(), I just put that there (commented out) to remind me what variables goes where and whatnot-who-what-who.