P5.js Study 021

Generative Design with p5.js / Sketch P_2_1_3_01 を試しながらアレンジ。
元ネタ：https://editor.p5js.org/generative-design/sketches/P_2_1_3_01

ロジックのポイント

個々のグリッドに、ループで描画されるモジュールを配置していくことで複合的な構造を作り出している。

  for (var gridY = 0; gridY <= tileCountY; gridY++) {
    for (var gridX = 0; gridX <= tileCountX; gridX++) {

      // snip

      // draw module
      for (var i = 0; i < circleCount; i++) {

      // snip

      }

      // snip
    }
  }

1つおきの円に塗りを設定する処理を追加してみたら、いい感じに気持ち悪い見た目になった。

        if (i % 2 === 1) {
          fill(27, 32, 39, 90)

        } else {
          noFill();
        }