如何生成按顺序填充不重复颜色的矩形循环？

这里提供几种实用的实现方式，适配你当前的循环生成逻辑：

方法1：使用预设颜色数组 #

直接定义一组包含10种不重复颜色的数组，循环时根据索引i取出对应颜色填充：

// 定义10种不重复的颜色（支持十六进制、RGB、颜色名称）
const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A6', '#FFC300', '#8A2BE2', '#00FFFF', '#FF7F50', '#90EE90', '#DC143C'];

for(let i=0;i<10;i++){
    fill(colors[i]); // 设置填充色
    rect(10+40*i,160,30,30);
}

方法2：利用HSL颜色空间生成有序渐变 #

HSL的色相（H）参数范围是0-360，按固定间隔分配色相值，能生成均匀分布的有序色彩：

for(let i=0;i<10;i++){
    // 计算色相：每36度一个间隔（360/10），饱和度和亮度固定
    const hue = i * 36;
    fill(`hsl(${hue}, 70%, 50%)`);
    rect(10+40*i,160,30,30);
}

这种方式的颜色过渡自然且有序，不需要手动定义颜色数组。

方法3：RGB渐变色过渡 #

如果想要从一种颜色平滑过渡到另一种，可通过计算RGB分量的增量实现：

// 起始色（红）和结束色（蓝）
const startR = 255, startG = 0, startB = 0;
const endR = 0, endG = 0, endB = 255;

for(let i=0;i<10;i++){
    // 计算当前矩形的RGB值
    const r = Math.floor(startR + (endR - startR) * (i/9));
    const g = Math.floor(startG + (endG - startG) * (i/9));
    const b = Math.floor(startB + (endB - startB) * (i/9));
    
    fill(`rgb(${r}, ${g}, ${b})`);
    rect(10+40*i,160,30,30);
}

这里通过i/9（因为共10个元素，索引0-9）计算过渡比例，实现从红到蓝的平滑渐变。

内容的提问来源于stack exchange，提问作者Jun Wei Li