Rendering the cubes

[riston]

After adding the cube to the "field" then also the near cubes must be renrendered or its going to overlap other cubes.

// To add new cube press 'a' in canvas
http://codepen.io/riston/pen/ovrtm

[dashed]

That's because it's doing a flood fill render pixel-by-pixel based on the location you tell obelisk to render. There's no concept of object layers in obelisk.

You have to ensure you're queueing API calls in the right order to achieve what you want.

[nosir]

Yes, exactly like dashed said, now it's just rendering the queue. I'm thinking about adding support for depth sorting and event, let's see. BTW, nice idea in demo.

[nosir]

Will close it just for now:)

[ngryman]

@riston For your example, you need to maintain a list of cubes position, and sort them by row when you add a new one.
Then you can redraw all cubes in order.

Here is the code I use to sort at insert (it doesn't handle depth yet):

var cubes = [];

function addCube(cube) {
  for ( ; i < cubles.length && cubles[i].x < cube.x; i++) ;
  for ( ; i < cubles.length && cubles[i].x == cube.x && cubles[i].y < cube.y; i++) ;

  cubes.splice(i, 0, cube);
}

@nosir Some idea to handle depth with the given code?

[ngryman]

I think I can answer my own question lol:

var cubes = [];

function addCube(cube) {
  for ( ; i < cubles.length && cubles[i].x < cube.x; i++) ;
  for ( ; i < cubles.length && cubles[i].x == cube.x && cubles[i].y < cube.y; i++) ;
  for ( ; i < cubles.length && cubles[i].x == cube.x && cubles[i].y == cube.y && cubes[i].z < cube.z; i++) ;

  cubes.splice(i, 0, cube);
}

I really don't know if it's the more elegant solution.

[nosir]

@riston @ngryman no doubt that we need a queue to render all the cubes, but actually we just need a 1 dimension queue array to handle the real depth index, and resort this array each time. The depth index would be like this: var depthIndex = zPos* 10 * 10 + yPos * 10 + xPos; Done~

Please see this sample: http://codepen.io/nosir/pen/Cxgpz