Points not getting drawn when reproducing curve on HTML5 canvas

Question

We are trying to reproduce a curve drawn on an HTML5 canvas, X points every 100 MS, but some points get lost in the reproduced copy. We have all the points used for the original curve.

Original curve: http://jsfiddle.net/NWBV4/12/

Reproduced curve: http://jsfiddle.net/NWBV4/15/

In the reproduced curve, if we change SEGMENT_PER_POINTS to greater than the number of points (eg, 1000), it obviously draws perfectly.

But as you can tell, with smaller numbers, there are missing points in the second curve.

Anyone understand why?

Answer 1

The problem is that you're using splice. This removes the points from the array, so after you get 10 (or whatever) points, the last point in those 10 is no longer in your array of points.

This means the next ten points are starting with no connection from the first of their points to the last of the previous points!