P5.js和嵌套循环

Question

我对JavaScript和P5.js库非常陌生，目前我正试图了解嵌套循环。我正在尝试迭代x位置和填充透明度，我已经使用while循环使其工作，但是当我尝试为创建嵌套的循环时，我失败了。

这是while循环：

function setup() {
createCanvas(500, 200);
}
function draw() {
//background colour
background(0,0,0);

let x = 20;
let alpha = 50;

while (x <= width){
fill(255,255,255,alpha);
rect(x,70,60,60);
alpha = alpha + 50;
x = x + 100;
}
}

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

下面是我对嵌套循环的的尝试：

function setup() {
createCanvas(500, 200);
}
function draw() {
//background colour
background(0,0,0);  

for (x = 20; x <= width; x = x + 100){
for (alpha = 50; alpha < 255; alpha = alpha + 50){
fill(255,255,255,alpha);
rect(x,70,60,60);
}  
}
}

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

我花了两个小时尝试我能想到的一切来让它发挥作用，是时候寻求一些帮助了。

如果我认为这是错误的，alpha是一个P5函数，并且显然导致了上面的控制台输出，这是正确的吗？while循环是有效的，但我正在努力了解循环是如何工作的，这将对我有很大帮助。谢谢你的帮助。

Answer 1

嵌套循环是执行此任务的错误方法。当您想要遍历二维数组(例如网格(时，必须使用嵌套循环，但对于一维情况(如线或行(，它是完全无用和多余的。在这种情况下，您可以在一个循环中迭代控制变量：

function setup() {
createCanvas(500, 200);
}
function draw() {
//background colour
background(0,0,0);  

for (let x = 20, alpha = 50; x <= width; x += 100, alpha += 50){
fill(255, 255, 255, alpha);
rect(x, 70, 60, 60);
}
}

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

您可以使用嵌套循环来迭代排列到网格中的矩形的x和y坐标：

function setup() {
createCanvas(500, 200);
}
function draw() {
//background colour
background(0,0,0);  

let alpha = 50;
for (let y = 20; y <= height; y += 100) {
for (let x = 20; x <= width; x += 100) {
fill(255, 255, 255, alpha);
rect(x, y, 60, 60);
alpha += 10;
}  
}
}

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