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

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

七宝文様

七宝文様は円の上に同じ大きさの円を四分の一ずつ重ね、それを並べた文様です。 光を表す菱のような形と花びらのような形の組み合わせが見えるという仕掛けになっています。

作例

ソースコード

const w=720;
const N=10;
const d=w/N;
const setcol=[]
setcol[0]=["#223768", "#54aee1"];
setcol[1]=["#B9416C", "#D3B5A7"];

function setup() {
   createCanvas(w, w);
   ellipseMode(CORNER);
   noFill();
   strokeWeight(d/20);

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

function draw() {
   background(col[0])
   for(let i=0;i<N;i++){
      const x = d*i;
      for(let j=0;j<N;j++){
         const y = d*j;
         push();
         stroke(col[1]);
         translate(x, y);
         circle(0, 0, d);
         pop();
      }
   }

   for(let i=0;i<N+1;i++){
      const x = d*(i-0.5);
      for(let j=0;j<N+1;j++){
         const y = d*(j-0.5);
         push();
         stroke(col[1]);
         translate(x, y);
         circle(0, 0, d);
         pop();
      }
   }
}

円を重ねる表現は、円を並べるforループを2つ記述して生成しています。