p5.jsで模様の行列を描く

上のような模様の複製パターンの基本的なコードの書き方を考える

function setup() {
  createCanvas(400, 400);
  background(220);
  noStroke();
  noLoop();
}

function draw() {
  let posx=0,posy=0;
  const dia=100;
  const num=5;
  
  //Y列用のループ
  for(let i=0;i<num;i++){
    //posxのリセット。Y列が奇数なら横にずらす
    if(i%2==0){
      posx=0;
    }else{
      posx=-dia/2;
    }
    
    //X行用のループ
    for(let j=0;j<num;j++){
      circle(posx,posy,dia);
      posx+=dia;
    }
    //X行のループが終わったらY列を移動
    posy+=dia;
  }
}

上手く行かなかった例として

for(let posx=0;posx<width;posx+=dia){
}

のようにX位置をfor文内のカウンタで宣言すると、位置をずらすときの処理が上手くいかなくなるのでカウンタと位置用の変数は別にした。

この構文の基本が分かれば次の画像のようなパターンは簡単になる。