Jump to content

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){
    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?






Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...