P5.js和嵌套循环

Question

我对JavaScript和P5.js库非常陌生，目前我正试图在嵌套循环中找到我的头绪。我试图同时迭代x位置和填充透明性，并且我已经使用了while循环，但是当我试图创建一个嵌套的for循环时，我会取消它。

下面是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>

​

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

​

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>

​