Как использовать вложенные циклы для пирамиды p5. js? - PullRequest
Новая
       17

Как использовать вложенные циклы для пирамиды p5. js?

2 голосов
/ 06 февраля 2020

Я очень плохо знаком с 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>

1 Ответ

1 голос
/ 06 февраля 2020

Вам нужно всего 2 вложенных l oop. Наружный - для строк, от 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>
...