Question

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 datastream
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).

Answer 1

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/