如何在p5.js中制作对齐网格的莫尔圆阵列？

你的代码里有几个关键问题导致莫尔元素无法和网格单元对齐，直接修改以下几点就能解决：

• 传参错误：调用moire时你传了网格总数tilesX、tilesY，但应该传当前循环的网格索引x、y
• 绘制坐标错误：椭圆固定画在画布中心width/2, height/2，需要计算每个网格单元的中心坐标
• 坐标系未隔离：使用translate时没配合push()/pop()，导致后续绘制的坐标系持续偏移
• 同心圆尺寸控制错误：循环终止条件用了全局的tileW，应该用传入的尺寸参数来限制最大圆的尺寸

修改后的完整代码：

function setup() {
  createCanvas(500, 500);
  ellipseMode(CENTER);
}

function draw() {
  background(255);
  noFill();
  strokeWeight(3);
  stroke(0);

  let tilesX = 3;
  let tilesY = tilesX;

  let tileW = width / tilesX;
  let tileH = height / tilesY;

  for (let x = 0; x < tilesX; x++) {
    for (let y = 0; y < tilesY; y++) {
      // 传入当前网格的索引、网格尺寸
      moire(x, y, tileW, tileH);
    }
  }
}

function moire(gridX, gridY, sizeW, sizeH) {
  // 计算当前网格单元的中心坐标
  const centerX = gridX * sizeW + sizeW / 2;
  const centerY = gridY * sizeH + sizeH / 2;
  
  // 用push/pop隔离坐标系，避免影响其他绘制
  push();
  translate(centerX, centerY);
  
  // 基于网格尺寸控制同心圆的最大直径，避免超出单元
  for (let i = 8; i <= sizeW; i += 8) {
    ellipse(0, 0, i, i);
  }
  
  pop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

简单说明：

1. 计算每个网格单元的中心时，用网格索引*单元宽度 + 单元宽度/2来得到准确的中心坐标
2. push()和pop()确保每个网格的坐标系修改不会影响其他网格
3. 同心圆的起始值设为8，避免第一个圆太小，循环步长保持8，确保圆之间的间距一致
4. 椭圆绘制在(0,0)，因为已经translate到了网格中心，代码更简洁

内容的提问来源于stack exchange，提问作者Johanna