一の字繋ぎを描く【p5.jsで和柄】

一の字繋ぎをp5.jsを使って描きます。

一の字繋ぎ

一の字繋ぎは横長の同じ大きさの長方体を交互に積み上げた、レンガ積みのような模様。

作例

ソースコード

const w=720;
const N=16;
const d=w/N;
const setcol=[]
setcol[0]=["#ff7096", "#fae0e4"];
setcol[1]=["#4ecdc4", "#1a535c"];

function setup() {
   createCanvas(w, w);
   noFill();
   strokeWeight(d/12);

   col = random(setcol);
   noLoop();
}

function draw() {
   background(col[0])
   for(let j=0;j<N;j++){
      const y = d*j;
      const dx = (j%2 == 1) ? -d : 0 ;
      for(let i=0;i<N;i++){
         const x = 2*d*i;
         push();
         translate(x+dx, y);
         stroke(col[1]);
         rect(0, 0, 2*d, d);
         pop();
      }
   }
}

縦横の比率が1:2の長方形を用いて一の字繋ぎとしました。