千鳥卍を描く【p5.jsで和柄】

千鳥卍をp5.jsを使って描きます。

千鳥卍

千鳥卍は千鳥を図案化して、卍の字に似せた文様です。 波形の曲線を交差させた文様。

作例

ソースコード

const w=720;
const N=8;
let d=w/N;
const setcol=[];
setcol[0] = ["#00509d", "#00bbf9"];
setcol[1] = ["#641220", "#f5f3f4"];

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

   strokeWeight(d/20)

   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<N+1;j++){
         const y = d*j;
         const dn = 200;
         push();
         translate(x, y);
         for(let k=0;k<dn;k++){
            const px = d/dn * k;
            const py = d/8 * sin(TWO_PI/dn*k);
            point(px, py);
         }
         for(let k=0;k<dn;k++){
            const py = d/dn * k;
            const px = d/8 * sin(TWO_PI/dn*k + PI);
            point(px, py);
         }
         pop();
      }
   }
}

縦横方向に三角関数で波線を描いて交差させています。三角関数の振幅は小さめにするのがポイントです。