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

Question

我已经成功创建了 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, 0, 255);
        strokeWeight(3);
        (line(0, i, (wallx), i));
} 
    for (let j = 0; j < (wally+1); j += (wally) / 20) {
        stroke(255, 0, 0);
        strokeWeight(3);
        (line(wally, j, (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>

Answer 1

添加一组颜色

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

根据i设置stroke颜色：

stroke(colors[i]);

修正画线：

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

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

let wallx = 200;
let wally = 200;

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

    let colors = [color(255, 0, 0), color(255, 255, 0), color(0, 0, 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, (wallx*(i+1)), j);
        }
    }
}

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

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

Changing the stroke color for different sections in a nested loop

javascript

processing

nested-loops

p5.js