javascript autoupdate array

I'd like to do the following;

1. create a 2 -column array of arbitrary finite length (say, 10 rows)
2. populate it sequentially from a constant-rate datastr开发者_C百科eam
3. once its populated, update it from the same datastream ( ie replace element 0, move 1-9 down, discard old 9)
4. (optimally) output an average for each column

I can probably do 4 myself, but have no idea how to do 1-3.

If it helps, I'm trying to translate this;

http://kindohm.com/2011/03/01/KinectCursorControl.html (see under the dreaded shaking cursor).

This should work ok (nice question, by the way - fun little challenge, since there are tons of ways to do it)

var pointSmoother = (function(){
  var pointCount     = 10, // number of points to keep
      componentCount = 2,  // number of components per point (i.e. 2 for x and y)
      points = [];

  function clear() {
    var i, l;
    for( i = 0, l = componentCount ; i < l ; i++ ) {
      if( typeof points[i] === 'undefined' ) {
        points.push([]);
      } else {
        points[i].splice(0, pointCount);
      }
    }
  }

  clear();

  function pushPoint( /* point components */ ) {
    var i, l;
    for( i = 0 ; i < componentCount ; i++ ) {
      points[i].unshift(arguments[i]);
      points[i] = points[i].slice(0, pointCount);
    }
  }

  function average() {
    var i, j, l, sum, averages = [];
    l = points[0].length;
    for( i = 0 ; i < componentCount ; i++ ) {
      sum = 0;
      for( j = 0 ; j < l ; j++ ) {
        sum += points[i][j];
      }
      averages.push(sum/l);
    }
    return averages;
  }

  function getPoints() {
    return points;
  }

  return {
      getPoints: getPoints,
      pushPoint: pushPoint,
      clear:     clear,
      average:   average
  };
}());

What it basically does is it creates an object and assigns it to pointSmoother. The object has 4 methods: pushPoint(), clear(), getPoints() and average(). At the top of the thing you can set how many coordinates a point has, and how many points (maximum) to keep. I used your example of 2 coordinates per point, and 10 points at a time.

Now, I've made the assumption that you get your values in sets of 2 at a time. Let's call those 2 values x and y. When you receive them, add them to the thing by using pointSmoother.pushPoint(x, y);. You can then get the "average point", by calling pointSmoother.average() which will return an array with (in this case) 2 values: average x and average y.

If you want to look at the array yourself, you can call pointSmoother.getPoints() which will return the points array. And lastly, pointSmoother.clear() will empty the array of previous values.

Here's a demo, of sorts: http://jsfiddle.net/tapqs/1/

var nums = [[1,2],[1,3],[2,1]];
alert(nums[0][0]); //1 
alert(nums[0][1]); //2

That's a two dimensional array. Loading data works just like with any other array.

To update it sequentially you are looking at queue behavior in javascript. Use unshift() and pop().

Javascript Arrays: http://www.w3schools.com/jsref/jsref_obj_array.asp

Finally for averaging the columns assuming there are 10 positions:

var num1 = 0;
var num2 = 0;
for(int i = 0;i<10;i++)
{
    num1 +=array[i][0];
    num2 +=array[i][1];
}
num1 = num1/10;
num2 = num2/10;

//num1 is now the average of the first column
//num2 is now the average of the second column