檜垣文様を描く【p5.jsで和柄】

檜垣文様をp5.jsを使って描きます。

檜垣文様

檜垣（ひがき）文様は檜の薄板を網代のように斜めに交互に編んだ文様です。 長方形を斜めに交互に並べた文様です。

作例

ソースコード

const w=720;
const N=20;
const d=w/N;
const setcol=[];
setcol[0] = ["#101010", "#ffcf56"];
setcol[1] = ["#00a66b", "#04461d"];

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

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

function draw() {
   background(col[0]);
   stroke(col[1]);
   for(let i=0;i<N;i++){
      for(let j=0;j<N;j++){
         const dy = (i%2==0) ? 0 : d/sqrt(2) ;
         const pos = [d*i*sqrt(2), d*j*sqrt(2)+dy];
         const r = (i%2==0) ? -PI/4 : PI/4;
         push();
         translate(...pos);
         rotate(r);
         rect(0, 0, d, d*2);
         pop();
      }
   }
}

長方形を45度傾け、交互に並べています。