[SOLVED] Ordering items on canvas

p5.js Coding Questions
1

Hi,

I’m having trouble ordering drawn items on canvas,

15%20PM
Screen Shot 07-01-19 at 01.15 PM.JPG1366×768 398 KB

I’m looking to draw the path and the info table on top of the fill, however this is causing some issues.

This is the function which draws, the items on canvas,

function cell_functions(){

for (var i = 0; i < grid.length; i++) {
  grid[i].drawpath();
  grid[i].hover();
  grid[i].check_node_info();
  grid[i].info();
  if(switches.toggle===1){
      grid[i].draw(sides);
  }
  if(game.toggle===1){
      grid[i].fill();
  }
}
};

here is the full sketch;

https://editor.p5js.org/paulgoux/sketches/v_BYCNviE

1 Like
2

Were you able to resolve this issue?

3

Thanks for checking in. Only partly, my info box still appear behind the paths and walls no matter where I place my info box code.

4

What is grid[I] in that loop? A hexagon? Does each one have an info box?

5

yup each grid contains a Cell, and each cell has cell info, neighbours, children, parent, cluster etc. The paths currently draw on top, of the map, which is what i wanted but the paths still draw over the info box, though its not to big an issue, as the map is draggable.

6

You can’t do that in one loop. You need to loop through all the non-overlapping things in the lower layer first. Then loop through the cells again and display info. Imagine these were pieces of cardboard or paper, and picture doing what you are doing physically with one loop – you will quickly see why that won’t work. All pieces first, then info.

1 Like
7

Thanks for your help I shall give it a try.