modifying the lengthY of some cubes is slow

Question

I want to write a 3d version of a fft. (Like this:https://wiki.mozilla.org/File:Fft.png) So I created a few bars and in an outside function, my first aproach was to set the lengthY to a value. Then I call bar.modified() to force it to be repainted.

If I now use more than 50 bars, it is horrible slow (on my 4 core CPU). I guess there's a better way to do it, right?

Source:

var elements = new Array();

create3d = function(len) {
    var r = new X.renderer3D();

    r.init();

  if(a.length == 0){
     for ( var y = 0; y < len; y++) {
      var c = new X.cube();
      a.push(c);
     }
  }

     for ( var i = 0; i < len; i++) {
      a[i].center = [i*2 , 0, 0];
      a[i].lengthX = 1; 
      a[i].lengthY = 20;
      a[i].lengthZ = 1;

      a[i].color = [i%2,0,0];

      r.add(a[i]);
    }
  r.render();
};

function setVal(index,val){
    var element = a[index];
    element.lengthY = val;
    element.modified();
}

Answer 1

I created a JSFiddle on how to do that and it is pretty fast for 1000 cubes

http://jsfiddle.net/haehn/6fVRC/