# Move to point on CatmullRom curve

## Recommended Posts

I'm generating a motion path using CatmullRomInterpolation from an original set of co-ordinates such as

``````var currentPos = 0;
var animate = false;

var destX, destY;

var anchorPoints = [

{x: 50, y: 400},
{x: 100, y: 300},
{x: 150, y: 200},
{x: 100, y: 100},
{x: 50, y: 50}

];

sprite.x = destX = anchorPoints[0].x;
sprite.y = destY = anchorPoints[0].y;``````

I then create an interpolated path as follows;

``````var motionPathData = [];

var x = 1 / game.width;

for (var i = 0; i <= 1; i += x){

var px = this.math.catmullRomInterpolation(anchorPoints.x, i);
var py = this.math.catmullRomInterpolation(anchorPoints.y, i);

motionPathData.push({x: px, y: py});

}
``````

What I then want to do is to move from one point on the path to another like so;

``````/* Set the destination position (in this case 100,300 as per the anchorPoints data) */

var destX = anchorPoints[1].x;
var destY = anchorPoints[1].y;

/* Set the animate flag so that the sprite moves */

animate = true;``````

And and update loop as follows;

``````update: function(){

if (animate === true){
currentPos++;
sprite.x = motionPathData[currrentPos].x;
sprite.y = motionPathData[currrentPos].y;
if (sprite.x == destX && sprite.y == destY){
animate = false;
}
}

}``````

The problem I have is that motionPathData doesn't contain the original co-ordinates from the anchorPoints array, instead only holding the interpolated curve, so the check for sprite.x == destX and sprite.y == destY is never met. The sprite animates along the motion path as intended - it just never stops as the stop condition is never reached.

How do I ensure that the motionPathData array also includes the original co-ordinates from which the curve was generated, such that I can move only the curve to each key anchor point on demand?