对象的居中网格

Question

如标题所示，我正在尝试在 P5 Spot(x, y, size) 中创建对象网格，它们之间有 4 个像素 space，并将其置于 canvas 的中心，而不使用 translate，这是我得到的：

  gridSize = 7;
  spotSize = 60;
  spots = [];

  for (var y = height / 2 - ((gridSize * spotSize + gridSize * 4) / 2); y < (height / 2 - ((gridSize * spotSize + gridSize * 4) / 2)) + (gridSize * spotSize + gridSize * 4); y += spotSize + 4) {

    for (var x = width / 2 - ((gridSize * spotSize + gridSize * 4) / 2); x < (width / 2 - ((gridSize * spotSize + gridSize * 4) / 2)) + (gridSize * spotSize + gridSize * 4); x += spotSize + 4) {

      spots.push(new Spot(x, y, spotSize));

    }
  }

问题是我的网格看起来不对，为什么不居中？可能是一个非常简单和愚蠢的错误，但我找不到它。任何帮助表示赞赏。

我的 Spot 对象只是在给定的 x 和 y 处绘制一个椭圆。 http://codepen.io/felipe_mare/pen/GWyMOL

处的完整代码

Answer 1

-已解决-

spots.push(new Spot(x + spotSize/2, y + spotSize/2, spotSize));

没有考虑到椭圆是从中心画出来的，所以我不得不加上圆的半径spotSize/2

对象的居中网格

Centering grid of objects

javascript

processing

canvas

p5.js