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>

我已经花了 2 个小时尝试所有我能想到的方法来让它工作，是时候寻求帮助了。

假设我以错误的方式处理这个问题是否正确，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>

P5.js 和嵌套循环

P5.js and nested loops

javascript

processing

nested-loops

p5.js