如何在以下网格中找到每个单元格的中心坐标？

Question

I need an algorithm to find the center coordinates of each of the cells in the following grid.

The very middle of the grid is 0,0 coordinates. The width is 250 and height is 250.

Note: the y axis is inverted and needs to be like that.

Here is what I tried with some informations found online, but it is not quite it.

        const size = 250
        const divisions = 5

        let step = size / divisions;
        let halfSize = size / 2;

        let vertices = [];
        let arr = [];
    
        for (let i = 0, z = -halfSize + step; i < divisions - 1; i++, z += step ) {
            //x axis
            vertices.push(-halfSize + (step/2), 0, z - (step/2), halfSize - (step/2), 0, z - (step/2));
            //z axis
            vertices.push(z - (step/2), 0, -halfSize + (step/2), z - (step/2), 0, halfSize - (step/2));
        }

        for (let i = 0; i < vertices.length; i += 3) {
            const position = {}
            position.x = vertices[i];
            position.y = vertices[i + 1];
            position.z = vertices[i + 2];
            arr.push(position)
        }

expected coordinates (in no particular order). In this instance I am simply swapping the y and z values for my needs.

[
    {
        "x": -100,
        "y": 0,
        "z": -100
    },
    {
        "x": -50,
        "y": 0,
        "z": -100
    },
    {
        "x": 0,
        "y": 0,
        "z": -100
    },
    {
        "x": 50,
        "y": 0,
        "z": -100
    },
    {
        "x": 100,
        "y": 0,
        "z": -100
    },
    {
        "x": -100,
        "y": 0,
        "z": -50
    },
    {
        "x": -50,
        "y": 0,
        "z": -50
    },
    {
        "x": 0,
        "y": 0,
        "z": -50
    },
    {
        "x": 50,
        "y": 0,
        "z": -50
    },
    {
        "x": 100,
        "y": 0,
        "z": -50
    },
    {
        "x": -100,
        "y": 0,
        "z": 0
    },
    {
        "x": -50,
        "y": 0,
        "z": 0
    },
    {
        "x": 0,
        "y": 0,
        "z": 0
    },
    {
        "x": 50,
        "y": 0,
        "z": 0
    },
    {
        "x": 100,
        "y": 0,
        "z": 0
    },
    {
        "x": -100,
        "y": 0,
        "z": 50
    },
    {
        "x": -50,
        "y": 0,
        "z": 50
    },
    {
        "x": 0,
        "y": 0,
        "z": 50
    },
    {
        "x": 50,
        "y": 0,
        "z": 50
    },
    {
        "x": 100,
        "y": 0,
        "z": 50
    },
    {
        "x": -100,
        "y": 0,
        "z": 100
    },
    {
        "x": -50,
        "y": 0,
        "z": 100
    },
    {
        "x": 0,
        "y": 0,
        "z": 100
    },
    {
        "x": 50,
        "y": 0,
        "z": 100
    },
    {
        "x": 100,
        "y": 0,
        "z": 100
    }
]

Answer 1

It's a little unclear what you mean since if you already know your starting position, the cell sizes, and the map sizes, you can figure out all the cells' positions by incrementing/decrementing by cell size in both axes.

Since no code has been shared and no further details given, I'll assume that's all you want so here's how you can set it up to get all the cells' center coordinates.

const cellSize = 50;
const mapWidth = 250;
const mapHeight = 250;

let rows = mapWidth / cellSize;
let cols = mapHeight / cellSize;

/* Let's define 'extents' - as in, how many squares left/right 
 or top/bottom of a 0,y or x,0 square. This will be useful in a bit*/

let yExtent = Math.floor(rows / 2); // in the example grid, this would just be 2
let xExtent = Math.floor(cols / 2);

We have your cellSize and some other data programmatically based on your defined constraints (so you can adjust as needed).

I'm assuming you're drawing this grid in HTML5 canvas, hence why your default positioning of the grid starts at the top left, and so every cell's x/y starts at the top left of the cell.

So we're defining a cell's center coordinate with a function as:

getCellCenter(cellX, cellY) {
return [cellX + cellSize/2, cellY + cellSize/2] // [center X, center Y]
}

where cellX,cellY is the top-left point (or the starting draw position) of the grid cell.

Now all you'd do is loop through your whole grid with the assumption that 0,0 is at the center. I do this in a lot of my HTML5 canvas grid-based games over the last 6-7 years and when I have to render things per-tile in such a grid, I follow this loop:

(Note: You can do this much more efficiently or linearly, but since some context is missing, this will likely be the simplest to understand)

// Loop through rows from -2 row to +2 row
for (let y = -yExtent; y <= yExtent; y++) {
  for (let x = -xExtent; x <= xExtent; x++) {
    cellCenter = getCellCenter(x * cellSize, y * cellSize)
  }
}

Does this make sense?

So for the cell that's at -2,-2 (top left cell in grid coordinates), its actual pixel coordinates would be

Now, if your whole map grid is positioned specifically somewhere in your canvas, then what you want to do is apply an offset X and offset Y to all your calculations

eg.

cellCenter = getCellCenter(x * cellSize - offsetX, y * cellSize - offsetY)

(Or you can add the offsets, depending on how you want to position it).

This should be generic enough that if the true pixel coordinates of the middle of the grid is 0,0, and not just grid coordinates (which is the starting assumption of the above algorithm, so as to not give you a full answer but a way to tune it to get what you want), you can adjust as needed.

Answer 2

I don't get the swapping of the z and y but here's a way to get the array you want. Keep in mind I didn't know how you grid was being created so I used a ES6 class and captured each cells center point. Then I just pushed them to an array while swapping the y and z.

 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); canvas.width = 250; canvas.height = 250; let cellSize = 50; let grid = []; let centerPoints = []; class Cell { constructor(x, y) { this.x = x; this.y = y; this.z = 0; this.width = cellSize; this.height = cellSize; this.c = "black"; this.center = { x: this.x + this.width / 2 - canvas.width/2, y: this.y + this.height / 2 - canvas.height/2}; } draw() { ctx.strokeStyle = this.c; ctx.strokeRect(this.x, this.y, this.width, this.height); } createArray() { centerPoints.push({'x': this.center.x, 'y': this.z, 'z': this.center.y}) } } function createGrid() { for (let y = 0; y < canvas.height; y += cellSize) { for (let x = 0; x < canvas.width; x += cellSize) { grid.push(new Cell(x, y)); } } } createGrid(); function drawGrid() { for (let i = 0; i < grid.length; i++) { grid[i].draw(); grid[i].createArray(); } } drawGrid(); console.log(centerPoints)

 body { margin: 0; padding: 0; box-sizing: border-box; }

 <canvas id="canvas"></canvas>

WITHOUT CANVAS

 gridWidth = 250; gridHeight = 250; let cellSize = 50; let grid = []; let centerPoints = []; class Cell { constructor(x, y) { this.x = x; this.y = y; this.z = 0; this.width = cellSize; this.height = cellSize; this.c = "black"; this.center = { x: this.x + this.width / 2 - gridWidth/2, y: this.y + this.height / 2 - gridHeight/2}; } createArray() { centerPoints.push({'x': this.center.x, 'y': this.z, 'z': this.center.y}) } } function createGrid() { for (let y = 0; y < gridHeight; y += cellSize) { for (let x = 0; x < gridWidth; x += cellSize) { grid.push(new Cell(x, y)); } } } createGrid(); function drawGrid() { for (let i = 0; i < grid.length; i++) { grid[i].createArray(); } } drawGrid(); console.log(centerPoints)