籠目文様を描く【p5.jsで和柄】

籠目文様をp5.jsを使って描きます。

籠目文様

籠目文様は編んだ竹の籠の網目から生じた文様です。 正三角形を上下に重ねた星型の形を連ねた文様です。

作例

ソースコード

const w=720;
const N=6;
const d=w/N;
const setcol=[]
setcol[0]=["#415a77", "#f4f1de"];
setcol[1]=["#e9d8a6", "#0a9396"];

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

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

function draw() {
   background(col[0]);
   stroke(col[1]);
   for(let i=0;i<N;i++){
      const y = d*(i+0.5);
      for(let j=0;j<N*sqrt(3)+1;j++){
         const x = d*(j/sqrt(3));
         push();
         translate(x, y);
         pattern();
         pop();
      }
   }
}

function pattern(){
   let point=[];

   for(let i=0;i<3;i++){
     point.push(d/2*cos(TWO_PI/3*i + PI/6));
     point.push(d/2*sin(TWO_PI/3*i + PI/6));
   }

   triangle(...point);
   rotate(PI);
   triangle(...point);
}

正三角形を上下に重ねる星を生成するパターンを元に、左右の小さい三角形が重なるように並べて表現しています。