釘抜文様を描く【p5.jsで和柄】

釘抜文様をp5.jsを使って描きます。

釘抜文様

釘抜文様は釘を抜く時の座金を図案化した文様です。 正方形の中に小さい正方形を配して、斜めにして等間隔に並べた文様です。

作例

ソースコード

const w=720;
const N=10;
const d=w/N;
const setcol=[];
setcol[0] = ["#720026", "#ff7f51"];
setcol[1] = ["#f4f1de", "#3d406b"];

function setup() {
   createCanvas(w, w);
   noStroke();
   rectMode(CENTER);

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

function draw() {
   background(col[0]);
   stroke( col[1] );
   for(let i=0;i<N;i++){
      for(let j=0;j<N;j++){
         const pos = [d*(i+0.5), d*(j+0.5)];
         push();
         translate(...pos);
         rotate(PI/4);
         fill(col[1]);
         rect(0, 0, d/sqrt(2));
         
         fill(col[0]);
         rect(0, 0, d/sqrt(2)/2);
         pop();
      }
   }
}

正方形を45度傾け並べています。 正方形は枠になる大きさのものと、 中を抜く背景色の小さいものを描画して表現しました。