fruvos Posted January 31, 2017 Share Posted January 31, 2017 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? Link to comment Share on other sites More sharing options...
Recommended Posts