p5.js用嵌套for循环绘制重复方形/角螺旋并生成网格的问题

双轴网格生成修复方案 #

你原来的代码只实现了x轴方向的平铺，要同时做xy双轴网格，只需要在现有x轴循环的外层再加一层y轴遍历逻辑即可，不需要修改螺旋本身的绘制逻辑：

• 新增y轴循环控制行数，每次进入x轴循环前把x轴平移起始值重置为初始的tileSize
• 每绘制完一行的所有螺旋，将y轴平移值累加tileSize*2向下偏移一行

代码优化建议 #

• 抽离独立的单螺旋绘制函数，传入原点坐标即可调用，避免逻辑嵌套过深
• 移除冗余的8个坐标累加变量，可直接通过循环次数乘以步长计算四个顶点的位置，减少不必要的变量声明
• 所有可调参数统一放到代码开头定义，后续调整网格大小、螺旋参数不用翻内部逻辑

优化后完整代码 #

// 统一配置参数，可按需调整
const SPIRAL_COUNT = 8;
const STEP_X = 8;
const STEP_Y = 8;
const TILE_SIZE = 100;
const GRID_ROW = 5; // 网格行数
const GRID_COL = 5; // 网格列数

// 抽离单螺旋绘制逻辑，传入原点坐标即可调用
function drawSingleSpiral(originX, originY) {
  push();
  translate(originX, originY);
  for (let i = 1; i <= SPIRAL_COUNT; i++) {
    const offsetX = i * STEP_X;
    const offsetY = i * STEP_Y;
    // 四个方向顶点直接通过偏移量计算，无需单独声明变量累加
    line(offsetX, offsetY, -offsetX - STEP_X, offsetY);
    line(-offsetX - STEP_X, offsetY, -offsetX - STEP_X, -offsetY - STEP_Y);
    line(-offsetX - STEP_X, -offsetY - STEP_Y, offsetX + STEP_X, -offsetY - STEP_Y);
    line(offsetX + STEP_X, -offsetY - STEP_Y, offsetX + STEP_X, offsetY + STEP_Y);
  }
  pop();
}

function drawSpiral() {
  // 双轴循环遍历网格所有位置
  for (let row = 0; row < GRID_ROW; row++) {
    const currentY = TILE_SIZE + row * TILE_SIZE * 2;
    for (let col = 0; col < GRID_COL; col++) {
      const currentX = TILE_SIZE + col * TILE_SIZE * 2;
      drawSingleSpiral(currentX, currentY);
    }
  }
}

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