分銅繋ぎを描く【p5.jsで和柄】

分銅繋ぎをp5.jsを使って描きます。

分銅繋ぎ

分銅繋ぎは波形の曲線を斜めに交差させた文様。 線に囲まれた桝目を、秤で使う重りの分銅に見立てている。

作例

ソースコード

const w=720;
const N=12;
let d=w/N;
const setcol=[];
setcol[0] = ["#0a9396", "#e9d8a6"];
setcol[1] = ["#feeafa", "#e07a5f"];

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

   d *= sqrt(2);
   strokeWeight(d/16)

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

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

   rotate(PI/4);
   translate(0, -w/2*sqrt(2));
   for(let i=0;i<N+1;i++){
      const x = d*i;
      const drx = (i%2 == 0) ? PI : 0;
      for(let j=0;j<N+1;j++){
         const y = d*j;
         const dry = (j%2 == 0) ? PI : 0;
         const dn = 200;         
         push();
         translate(x, y);
         for(let k=0;k<dn;k++){
            const px = d/dn * k;
            const py = d/4 * sin(PI/dn*k + dry + drx);
            point(px, py);
         }
         for(let k=0;k<dn;k++){
            const py = d/dn * k;
            const px = d/4 * sin(PI/dn*k + dry + drx + PI);
            point(px, py);
         }
         pop();
      }
   }
}

全体を斜めに回転させてから、縦横方向に三角関数で波線を描いています。