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

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

鱗文様

鱗文様は正三角形あるいは二等辺三角形を上下左右に連続して配置した文様です。 三角の連なりが魚や龍、蛇の鱗に似ていることから鱗文と呼ばれるようになったそうです。

作例

ソースコード

const w=720;
const N=10;
const d=w/N;
const setcol=[]
setcol[0]=["#623768", "#c4aee1"];
setcol[1]=["#69B1EC", "#D39577"];

function setup() {
   createCanvas(w, w);
   ellipseMode(CORNER);
   noStroke();

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

function draw() {
   for(let i=0;i<N;i++){
      const x = d*i;
      for(let j=0;j<N;j++){
         const y = d*j;
         const mode = (j%2==0);
         push();
         translate(x, y);
         pattern(0, 0, d, mode);
         pop();
      }
   }
}

function pattern(x, y, size, mode){
   const point = [];
   point[0] = [0, 0];
   point[1] = [size/2, 0];
   point[2] = [size, 0];
   point[3] = [0, size];
   point[4] = [size/2, size];
   point[5] = [size, size];

   push();
   translate(x, y);
   if(mode==true){
     fill(col[0]);
     triangle(...point[0], ...point[3], ...point[1]);
     triangle(...point[2], ...point[5], ...point[1]);
     fill(col[1]);
     triangle(...point[4], ...point[3], ...point[1]);
     triangle(...point[4], ...point[5], ...point[1]);
   } else{
      fill(col[0]);
      triangle(...point[1], ...point[0], ...point[4]);
      triangle(...point[1], ...point[2], ...point[4]);
      fill(col[1]);
      triangle(...point[3], ...point[0], ...point[4]);
      triangle(...point[5], ...point[2], ...point[4]);
   }
   pop();
}

三角形のパターンを上下の二種類生成して、それを並べることで表現しています。