Question

我对javascript非常陌生，我对嵌套循环感到困惑，我设法使期望的结果出来了，但是我知道必须有一个更简化的版本。或更可能是更好的版本。

function setup() {
  createCanvas(800, 600);
}
function draw() {
  background(200);

  fill(255, 0, 0);
  for (let i = 0; i <= 3; i++) {
    square(i * 50, i * 50, 50);
    for (let i = 0; i <= 3; i++) {
      square(i * 50 - 50, i * 50, 50);
      for (let i = 0; i <= 3; i++) {
        square(i * 50 - 100, i * 50, 50);
        for (let i = 0; i <= 3; i++) {
          square(i * 50 - 150, i * 50, 50);
        }
      }
    }
  }
}

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

Answer 1

您只需要2个嵌套循环。外部的行用于从0到行数的行。内部的一个是列广告的范围是从0到当前行的数字（索引）。

Int以下示例no_of_rows指定行数，可以将其设置为任何值：

let no_of_rows = 3;

function setup() {
    createCanvas(800, 600);
}

function draw() {
    background(200);
    fill(255, 0, 0);
  
    // for each row
    for (let row = 0; row <= no_of_rows; row++) {
      
        // for each column in the row
        for (let column = 0; column <= row ; column ++) {
           square(column * 50, row * 50, 50);
        }
    }
}

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

如何为p5.js金字塔使用嵌套循环？

1 个答案: