Redrawing cubes

[David Davies]

Hi, I have been playing around with colorcube javascript (http://www.chromeexperiments.com/detail/colorscube/) which I must say is awesome. One question I have though is how to do properly redraw so you don't kill the page. What I mean is....

 

1. I have created a 4*4*4 cube, all smaller cubes are blue.

2. Depending on what is clicked on the screen, the corresponding smaller cube should change from blue to red.

 

I have managed to accomplish this but as more and more of the cubes are colour changed the 3d view slows to a crawl, what am I doing wrong. FYI The below code is the 'bastadised' version of your JS

Thanks
David

var renderer = false;
var cubes = [];

function generateCube( cubeId ) {
  var black = new Pre3d.RGBA(0, 0, 0, 1);
  var white = new Pre3d.RGBA(1, 1, 1, 1);

  var screen_canvas = document.getElementById('canvas');
  if (renderer == false){
      renderer = new Pre3d.Renderer(screen_canvas);
      for (var i = 0; i < 4; ++i) {
        for (var j = 0; j < 4; ++j) {
          for (var k = 0; k < 4; ++k) {
              var cube = Pre3d.ShapeUtils.makeCube(0.1);
              var transform = new Pre3d.Transform();
              transform.translate(i - 1.5, j - 1.5, k - 1.5);
              cubes.push({
                shape: cube,
                color: new Pre3d.RGBA(0, 0, 255, 0.40),
                trans: transform});
          }
        }
      }
      try {
          cubes[parseInt(cubeId)].color.setRGB(255, 0, 0);
      } catch(e) {};
  } else {
      try {
          theCube = cubes[parseInt(cubeId)]
          if (theCube.color.b == 255) {
           theCube.color.setRGB(255, 0, 0);
          } else {
           theCube.color.setRGB(0, 0, 255);
          };
      } catch(e) {};     
  }
 
  var num_cubes = cubes.length;
  var cur_white = true;

  function draw() {
    for (var i = 0; i < num_cubes; ++i) {
      var cube = cubes[i];
      renderer.fill_rgba = cube.color;
      renderer.transform = cube.trans;
      renderer.bufferShape(cube.shape);
    }

    if (cur_white) {
      renderer.ctx.setFillColor(1, 1, 1, 1);
    } else {
      renderer.ctx.setFillColor(0, 0, 0, 1);
    }
    renderer.drawBackground();
    renderer.drawBuffer();
    renderer.emptyBuffer();
  }

  renderer.camera.focal_length = 10;
  // Have the engine handle mouse / camera movement for us.
  DemoUtils.autoCamera(renderer, 0, 0, -30, 0.40, 0.9, 0, draw);
  draw();
};

[Dean]

I won't have a chance to sit down and debug your code, but my guess
would be the cubes.length is growing and you are continually drawing
more and more...

Cheers,
Dean

> --
> You received this message because you are subscribed to the Google Groups
> "pre3d" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/pre3d/-/P5pmfApJpkMJ.
> To post to this group, send email to pr...@googlegroups.com.
> To unsubscribe from this group, send email to
> pre3d+un...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/pre3d?hl=en.

[David Davies]

I wondered that but the length of cubes is always 64 which is what I would expect (4*4*4).

 

Dave

> pre3d+unsubscribe@googlegroups.com.