Embedded Iteration / 埋め込まれた反復

「for」構造を埋め込む(ネストする)ことで、2次元での反復が可能になります。

nested loop iteration
Control Drawing

View Source Code

/*
 * @name Embedded Iteration
 * @arialabel Rays emerge from the center of the screen to the edges. There is also a square grid of white circles over the window
 * @description Embedding "for" structures allows repetition in two dimensions.
 */
function setup() {
  // createCanvas(720, 360);
  createCanvas(windowWidth, windowHeight);
  background(0);
  noStroke();

  let gridSize = 35;

  for (let x = gridSize; x <= width - gridSize; x += gridSize) {
    for (let y = gridSize; y <= height - gridSize; y += gridSize) {
      noStroke();
      fill(255);
      rect(x - 1, y - 1, 3, 3);
      stroke(255, 50);
      line(x, y, width / 2, height / 2);
    }
  }
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.