ギンの備忘録

デジタルアートやプログラミングやテクノロジー関連のこと。

矢絣文様を描く【p5.jsで和柄】

矢絣文様をp5.jsを使って描きます。

矢絣文様

矢絣(やがすり)文様は弓矢の矢羽根を模した文様です。 矢羽根を絣織りで表したのが名前の由来だそうです。

作例

f:id:gin_graphic:20210501073114p:plain:w300

f:id:gin_graphic:20210501073119p:plain:w300

ソースコード

const w=720;
const N=8;
const d=w/N;
const setcol=[]
setcol[0]=["#FDB947", "#A46eB1"];
setcol[1]=["#C9F1FC", "#933317"];

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

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

function draw() {
   c0 = sqrt(3)/2 ;
   c1 = (1-c0);
   
   for(let i=0;i<N;i++){
      const x = d*i;
      for(let j=0;j<N+1;j++){
         const y = d*j;
         push();
         stroke(0,0,0,0);

         translate(0, int(-d*c1/2));
         translate(x, y);
         pattern0(0, 0, d/2);

         translate(d/2, -d+int(d*c1/2));
         pattern1(0, 0, d/2);
         pop();
      }
   }
}

function pattern0(x, y, size){
   const point = [];
   point[0] = [0, size*c1];
   point[1] = [0, size];
   point[2] = [size/2, size];
   point[3] = [size, size*c1];
   point[4] = [size, size];

   push();
   translate(x, y);
     fill(col[0]);
     rect(0, 0, size);
     fill(col[1]);
     pat_tri(point);

     stroke(col[1]);
     line(size/2,0, size/2,size);
     stroke(0,0,0,0);

     translate(0, size);
     fill(col[1]);
     rect(0, 0, size);
     fill(col[0]);
     pat_tri(point);

     stroke(col[0]);
     line(size/2,0, size/2,size);
   pop();

}

function pattern1(x, y, size){
   const point = [];
   point[0] = [0, size*c0];
   point[1] = [0, 0];
   point[2] = [size/2, 0];
   point[3] = [size, size*c0];
   point[4] = [size, 0];

   push();
   translate(x, y);
     fill(col[1]);
     rect(0, 0, size);
     fill(col[0]);
     pat_tri(point);

     stroke(col[0]);
     line(size/2,0, size/2,size);
     stroke(0,0,0,0);
     
     translate(0, size);
     fill(col[0]);
     rect(0, 0, size);
     fill(col[1]);
     pat_tri(point);

     stroke(col[1]);
     line(size/2,0, size/2,size);
   pop();
}

function pat_tri(point){
   triangle(...point[0], ...point[1], ...point[2]);
   triangle(...point[3], ...point[4], ...point[2]);
}

柄を2パターンに分けて描画し、それを交互に並べています。 コードが綺麗に書けなかったのが少し残念。その内書き直したい。