P5.js编程学习遇阻：如何用for循环实现旋转缩小矩形？

核心思路 #

先提炼你重复绘制代码里的变量规律：每个矩形的尺寸逐步递减，旋转角度逐步增加。用for循环遍历矩形数量，通过循环变量i计算每个矩形的尺寸和旋转角度，替代重复的代码块。

具体实现步骤 #

1. 定义控制参数：把矩形数量、初始尺寸、每次缩小幅度、每次旋转角度设为变量，方便后续快速调整效果。
2. 用push()/pop()隔离坐标系：每次绘制单个矩形前保存当前坐标系状态，绘制后恢复，避免旋转叠加影响下一个矩形。
3. 循环计算矩形属性：通过循环变量i计算当前矩形的尺寸（初始尺寸 - i×缩小幅度）和旋转角度（i×旋转步长）。

优化后的代码示例 #

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES); // 用角度而非弧度，更直观
}

function draw() {
  background(220);
  translate(width/2, height/2); // 将绘制原点移到画布中心

  // 可调整的控制参数
  const totalRects = 10;    // 矩形总数
  const startSize = 300;    // 第一个矩形的尺寸
  const sizeDecrement = 25; // 每个矩形比前一个小多少
  const rotateStep = 6;     // 每个矩形比前一个多转多少度

  for (let i = 0; i < totalRects; i++) {
    push(); // 保存当前坐标系状态
    // 计算当前矩形的尺寸和旋转角度
    const currentSize = startSize - i * sizeDecrement;
    const currentRotation = i * rotateStep;
    rotate(currentRotation);
    // 绘制矩形（以中心为原点，x/y取负的半尺寸）
    rect(-currentSize/2, -currentSize/2, currentSize, currentSize);
    pop(); // 恢复坐标系，不影响下一次循环
  }
}

关键细节解释 #

• push()/pop()：这对函数是P5.js管理坐标系的核心，用它们包裹旋转和绘制代码，确保每个矩形的旋转都是基于画布中心的独立操作，不会叠加之前的旋转效果。
• 循环变量i：从0到totalRects-1，代表当前是第几个矩形，用它计算尺寸递减和角度递增的数值，完美替代你之前手动编写的重复代码。

后续需求：隔一个矩形反向旋转 #

只需修改rotate()的参数，判断循环次数的奇偶性来切换旋转方向：

// 替换原rotate行
const currentRotation = i * rotateStep;
rotate(i % 2 === 0 ? currentRotation : -currentRotation);

这样第0、2、4…个矩形正向旋转，第1、3、5…个反向旋转，无需修改大量代码，直接通过参数调整即可实现。

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