蚊絣を描く【p5.jsで和柄】

蚊絣をp5.jsを使って描きます。

蚊絣

蚊絣は細かい十字を並べた文様です。 蚊が鈍でいるように見えるのが名前の由来だそうです。

作例

ソースコード

const w=720;
const N=6;
let d=w/N;
let l=d/32;
const setcol=[];
setcol[0] = ["#f27059", "#741a20"];
setcol[1] = ["#cff3d1", "#68a691"];

function setup() {
   createCanvas(w, w);

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

function draw() {
   background(col[0]);
   stroke(col[1]);

   for(let i=0;i<N+1;i++){
      const x = d*i;
      for(let j=0;j<2*N+1;j++){
         const y = d/2*j;
         const dx = (j%2==1) ? d/2 : 0;
         const dn = 200;
         push();
         translate(x+dx, y);
         for(let k=-dn;k<dn+1;k++){
            const px = 0;
            const py = d/2 /dn/2*k;
            const p = l * (1 - 1/dn*abs(k)) ;
            strokeWeight(p);
            point(px, py);
         }
         for(let k=-dn;k<dn+1;k++){
            const py = 0;
            const px = d/2 /dn/2*k;
            const p = l * (1 - 1/dn*abs(k)) ;
            strokeWeight(p)
            point(px, py);
         }
         pop();
      }
   }
}

十字は外側に行くほど幅を小さくしています。