p5.js修改compassGrid()实现25x25居中罗盘网格的问题排查

• 变量引用顺序错误：colorGrid()中调用lerpColor()时变量n还未声明，会直接触发引用报错。
• 坐标变换存在副作用：compassGrid()开头的translate(10,10)没有放在push()/pop()状态块内，会全局偏移所有后续绘制坐标，导致罗盘层和下层彩色网格错位。
• 罗盘位置不对齐：循环内直接translate(x,y)是移动到网格瓦片的左上角，没有偏移半个瓦片边长到中心位置。
• 罗盘参数不符合要求：线段长度写的是stepSize-5不满足长度要求，且线段沿y轴正方向绘制是朝下状态，不符合默认朝上的要求。
• 步长逻辑不统一：循环步长用width/25计算，和定义的stepSize变量分离，后续改参数容易出现尺寸不匹配问题。

var stepSize = 20;

function setup() {
  createCanvas(500, 500);
}
///////////////////////////////////////////////////////////////////////
function draw() {
  background(125);
  colorGrid();
  compassGrid();
}
///////////////////////////////////////////////////////////////////////
function colorGrid() {
  // 统一用stepSize作为网格步长
  for (var x = 0; x < width; x += stepSize) {
    for (var y = 0; y < height; y += stepSize) {
      let from = color(255, 0, 0);
      let to = color(0, 255, 0);
      // 先计算噪声值再做颜色插值，修复引用错误
      var n = noise(x / 50, y / 50, frameCount / 100);
      let interA = lerpColor(from, to, n);
      var c = map(n, 0, 1, 0, 255);
      fill(interA);
      stroke(c);
      rect(x, y, stepSize, stepSize);
    }
  }
}
///////////////////////////////////////////////////////////////////////
function compassGrid() {
  // 移除无状态隔离的全局偏移
  for (var x = 0; x < width; x += stepSize) {
    for (var y = 0; y < height; y += stepSize) {
      push();
      // 移动到当前网格瓦片的中心位置
      translate(x + stepSize/2, y + stepSize/2);
      stroke("black");
      // 绘制长度为stepSize、朝上的线段（p5中y轴负方向为屏幕上方）
      line(0, 0, 0, -stepSize);
      pop();
    }
  }
}

配套HTML引入（无需修改）：

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

• 统一网格循环步长为stepSize，保证2525网格刚好填满500500画布，参数修改时不会出现尺寸错位。
• 调整colorGrid()内变量声明顺序，先计算噪声值再执行颜色插值，消除运行错误。
• 删除compassGrid()外层无状态包裹的全局偏移，避免层间错位。
• 每个罗盘绘制前通过translate(x + stepSize/2, y + stepSize/2)移动到对应瓦片中心，符合位置要求。
• 调整线段绘制方向和长度：沿y轴负方向绘制长度为stepSize的线段，默认朝上。
• 所有单元的坐标变换都包裹在push()/pop()块内，单元间绘制状态互不干扰。

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