P5Js如何通过for循环实现如图的渐变？

Question

要求是使用nested for loops实现如图效果，但我只会用一堆line和stroke分别堆出来..
我的：

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  for (let i = 0; i < height; i++) {
    let redAmount = map(i, 0, height, 0,255);
    stroke(redAmount*0.9, 100, 200); //experiment with different colors
    line(0,i,width*0.2,i);
    stroke(redAmount,100,200)
    line(width*0.2,i,width*0.4,i)
    stroke(redAmount*1.1,100,200)
    line(width*0.4,i,width*0.6,i)
    stroke(redAmount*1.2,100,200)
    line(width*0.6,i,width*0.8,i)
    stroke(redAmount*1.3,100,200)
    line(width*0.8,i,width,i)
  }
}

Answer 1

引自免费微信小程序：皆我百晓生

为了在P5.js中通过for循环实现你上传图片所示的渐变效果，你可以将横线的绘制过程优化为一个循环，并且每次循环时更新颜色值。这里假设图片展示的是从左到右，随着y坐标（i）增加，线条颜色从深到浅的渐变。

根据你的现有代码，我发现每两根线之间的颜色差异是逐渐增大的。为了简化并模拟这种效果，我们可以用一个单一的循环来处理所有的线条，并且每次循环时都增加一个增量来改变颜色值。以下是修改后的代码：

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  let stepSize = width / 8; // 根据原代码确定的线条间隔数
  for (let i = 0; i < height; i++) {
    let redAmount = map(i, 0, height, 255, 0); // 从255渐变到0，与图示方向相反则改为0-255
    let increment = 0.1; // 控制每一步红色成分增加的比例

    // 循环绘制8条线，每条线的红色成分递增
    for (let j = 0; j < 8; j++) {
      stroke(redAmount + increment * j, 100, 200);
      line(stepSize * j, i, stepSize * (j + 1), i);
    }
  }
}

这段代码首先定义了一个步长stepSize，然后在内层循环中按顺序绘制了8条线，每条线的颜色基于当前的y坐标（i）计算得到的redAmount值，并逐步加上一个增量increment，从而实现渐变效果。请确保这符合你所需的效果，并调整map()函数中的参数以适应实际的色彩渐变方向和范围。