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

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

網目文様

網目文様は蛇行曲線が向いあって相接した文様です。 漁業用の網の目に見える文様です。

作例

ソースコード

const w=720;
const N=12;
const d=w/N;
const setcol=[]
setcol[0]=["#3c6e71", "#d9d9d9"];
setcol[1]=["#ffe1a8", "#6247aa"];

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

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

function draw() {
   background(col[0])
   for(let j=0;j<N*3/2;j++){
      const y = d*(j+1/2)*2/3;
      const dx = (j%2 == 1) ? PI : 0 ;
      for(let i=0;i<N;i++){
         const x = d*i;
         push();
         translate(x, y);
         stroke(col[1]);
         const pn = 400;
         for(let k=0;k<pn;k++){
            point(d/pn*k, d/2*2/3*cos(2*PI/pn*k + dx));
         }
         pop();
      }
   }
}

三角関数のcosを用いて曲線を表現しています。