How to generate my grid coordinates based on a dynamic grid size in Javascript?

Question

I'm trying to build up an array object given a fixed grid size, cell size, and center location.

Let's use 5x5 grid size, a cell size of 0.06, and 0,0 as the center. I'd like to build an array of cell objects that contain the boundaries of that given box.

Example 5x5 with 0.06 spacing

//So in this case.... Cell 0 would be 
x1:-0.18 , y1: 0.18 , x2: -0.12, y2: 0.18, x3: 0.18, y3: 0.12 ..... y4
// where x1 is top left X, y1 is top left Y, x2 is top right X, y2 is top right Y

I'd like to do something like this.. given grid size, cell spacing, and center

var grid_cells = 25;
var columns = 5;
var rows = 5;
var cell_spacing = 0.06;
var center = {x: 0, y: 0};
var gridcells = [];

for(var r= 0; r <= rows; r++){
  for (var c= 0; c <= rows; c++){

     var cell = {
        x1: top left corner X
        y1: top left corner Y
        ...
        ...
        y4: bottom right corner Y
     };
     gridcells.push(cell); 
  }
}

What's the formula to figure out the points in a box given the information? I know there's some equation i can plug it into. My end result should be 25 objects with the boundaries of each cell

Help me StackOverflow you're my only hope!

Matt Burland · Accepted Answer · 2014-09-10 18:20:19Z

2

So given:

var columns = 5;
var rows = 5;
var cell_spacing = 0.06;
var center = {x: 0, y: 0};

The total width of your grid will be:

var totalWidth = columns * cell_spacing;  // 5 * 0.06 = 0.3
var totalHeight = rows * cell_spacing;

To calculate the left most edge it's going to be:

var leftEdge = center.x - (totalWidth / 2); // 0 - (0.3 / 2) = -0.15;

So -0.15 is the x location of your first box and to calculate each box you just add cell_spacing. Same with height.

Note however, your diagram is wrong. If you start as -0.18 and add -0.6 then you right-most edge would be 0.12, not 0.18. And your center can't be at 0,0 because 0 is the left-edge of box 3.

Note your coordinates around the center box: -0.06,-0.06 to 0.06, 0.06. That's a difference of 0.12 in both directions.

So your loop might look something like this:

var topEdge = center.y - (totalHeight / 2);
for(var r= 0; r <= rows; r++){
  var leftEdge = center.x - (totalWidth / 2);
  for (var c= 0; c <= columns; c++){

     var cell = {
        x1: leftEdge,
        y1: topEdge,
        x2: leftEdge + cell_spacing,
        ...
        ...
        y4: topEdge + cell_spacing
     };
     leftEdge += cell_spacing;
     gridcells.push(cell); 
  }
  topEdge += cell_spacing;
}

edited Sep 10, 2014 at 18:20

answered Sep 10, 2014 at 0:33

Matt Burland

45.3k18 gold badges110 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user176855 Over a year ago

This is partially there, however how do i use that topEdge formula to take in account where we are in the row/column loops?

Matt Burland Over a year ago

@user176855: Not sure what you are asking there. I updated my answer because I left out that you obviously need to reset the leftEdge each time you move to a new row. The topEdge only gets updated at the end of each row.

user176855 Over a year ago

I got it to work! Thanks very much, note that in your version gridcell[0][0] is the bottom left. Thanks!!!!! @Matt-Burland

Collectives™ on Stack Overflow

How to generate my grid coordinates based on a dynamic grid size in Javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related