如何用for循环绘制带四种变化属性的100个同心圆（p5.js）

核心思路 #

无需嵌套循环，单个for循环即可完成所有参数的递进变化。只需在循环中维护每个圆的直径、色相、透明度、亮度变量，每次迭代按规则更新参数即可。

实现代码 #

function setup() {
  createCanvas(1000, 1000);
  colorMode(HSB, 360, 100, 100, 1); // 把透明度范围设为0-1，匹配需求中的0.01增量
  noLoop(); // 仅绘制一次，避免draw()重复执行
}

function draw() {
  background(0, 0, 100); // 白色背景
  noStroke();

  // 初始化所有参数
  let diameter = width * 0.8; // 初始圆尺寸为画布宽度的0.8倍
  let hue = 1; // 初始色相
  let opacity = 0.01; // 初始透明度
  let brightness = 100; // 初始亮度

  // 循环绘制100个同心圆
  for (let i = 0; i < 100; i++) {
    fill(hue, 100, brightness, opacity);
    circle(width/2, height/2, diameter);

    // 按规则更新参数，为下一个圆做准备
    diameter *= 0.98; // 尺寸为前一个圆的0.98倍
    hue += 1; // 色相每次增加1
    opacity += 0.01; // 透明度每次增加0.01
    brightness -= 1; // 亮度每次减少1
  }
}

代码说明 #

• colorMode(HSB, 360, 100, 100, 1)：将透明度范围设置为0-1，和需求里的0.01增量逻辑匹配，更直观易控。
• noLoop()：因为只需要绘制一次同心圆，无需draw()函数重复执行，添加该方法可优化性能。
• 循环逻辑：从0到99迭代100次，先绘制当前参数的圆，再按规则更新所有参数，确保每个后续圆的参数完全符合要求。
• 摒弃了原代码中通过i反向计算参数的复杂逻辑，直接维护每个参数的当前值，逻辑清晰，新手更容易理解。

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