更改嵌套循环中不同部分的笔触颜色

问题描述

我设法创建了3个“ for”循环，并为每个集合分配了不同的颜色。然后，我决定将3个“ for”循环组合到一个嵌套循环中以保持简洁，但是我无法让每个部分的颜色（线条的笔触）都发生变化（就像循环分开时的情况一样）。我想知道是否有人可以帮助我将颜色添加到1个嵌套循环中。

我有3个独立的for循环，因此您可以看到它的外观。然后我注释掉了要在最终代码中包含的代码（没有颜色的嵌套循环）。

let wallx = 200;
let wally = 200;

function setup() {
    createCanvas(1000,700);
}
function draw() {
    background(220);
    noLoop();

//This code combines the 3 'for' loops into a nested loop
// for(let i = 0; i <= 3; i++){
//     for (let j = 0; j < (wally+1); j += (wally) / 20) {
//         strokeWeight(3);
//         (line(0*(i+wallx),j,(wallx*i),j));
//     }
// }

    for (let i = 0; i < (wally+1); i += (wally) / 20) {
        stroke(0,255);
        strokeWeight(3);
        (line(0,i,(wallx),i));
} 
    for (let j = 0; j < (wally+1); j += (wally) / 20) {
        stroke(255,0);
        strokeWeight(3);
        (line(wally,(wallx*2),j));
}
    for (let k = 0; k < (wally+1); k += (wally) / 20) {
        stroke(0,255,0);
        strokeWeight(3);
        (line(wally*2,k,(wallx*3),k));
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

解决方法

添加颜色数组

let colors = [color(255,0),color(255,255,color(0,255)];

根据stroke设置i颜色：

stroke(colors[i]);

修正画线：

line(0*(i+wallx),j,(wallx*i),j);

line(wally*i,(wallx*(i+1)),j);

let wallx = 200;
let wally = 200;

function setup() {
    createCanvas(1000,700);
}
function draw() {
    background(220);
    noLoop();

    let colors = [color(255,255)];
    for(let i = 0; i <= 3; i++){
        for (let j = 0; j < (wally+1); j += (wally) / 20) {
            stroke(colors[i]);
            strokeWeight(3);
            line(wally*i,j);
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>