角繋ぎ文様を描く【p5.jsで和柄】

角繋ぎ文様をp5.jsを使って描きます。

角繋ぎ文様

角繋ぎ文様は組紐にルーツを持つ文様です。 正方形を交互に連続してつなげた文様です。

作例

ソースコード

const w=720;
const N=12;
const d=w/N;
const setcol=[]
setcol[0]=["#333533", "#f2c6de"];
setcol[1]=["#9ef01a", "#001845"];

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

   col = random(setcol);
   pat = pattern(d);
   noLoop();
}

function draw() {
   background(col[0]);
   for(let i=0;i<N+1;i++){
      const y = d*(i+0.5);
      const dr = (i%2==1) ? PI/2 : 0 ;
      for(let j=0;j<N+1;j++){
         const x = d*(j+0.5);
         const dy = (j%2==1) ? -d : 0 ;
         push();
         translate(x, y+dy);
         rotate(dr);
         image(pat, 0, 0, d, d);
         pop();
      }
   }
}

function pattern(size){
   gp = createGraphics(size, size);
   gp.fill(col[1]);
   gp.strokeWeight(0);

   const r1 = size/5;
   const r2 = size*2/5;
   const r3 = size*3/5;
   const r4 = size*4/5;
   gp.rect(r1, 0, r1, r4);
   gp.rect(0, r1, r4, r1);
   gp.rect(r3, r1, r1, r4);
   gp.rect(r1, r3, r4, r1);

   const l = d/32
   const l0 = r1 - l/2;
   const l1 = r2 + l/2;
   const l2 = r3 - l/2;
   const l3 = r4 + l/2;
   gp.strokeWeight(l);
   gp.stroke(col[0]);
   gp.line(r1, l0, r2, l0);
   gp.line(r1, l1, r2, l1);
   gp.line(r3, l2, r4, l2);
   gp.line(r3, l3, r4, l3);

   return gp;
}

元になるパターンを生成して、それを並べています。 並べる際は回転させたりすることで、角繋ぎを表現しています。

立涌文様を描く【p5.jsで和柄】

立涌文様をp5.jsを使って描きます。

立涌文様

立涌（たてわく）文様は一定の間隔の曲線のふくらみとへこみが交互に連続する文様です。 雲などがむくむくと「たちわく」さまに見立てて名づけられた文様です。

作例

ソースコード

const w=720;
const N=12;
const d=w/N;
const setcol=[];
setcol[0] = ["#ffd500", "#00296b"];
setcol[1] = ["#6496dc", "#c0ddfb"];

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

   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), 3*d*j];
         const dr = (i%2==1) ? PI : 0 ;
         push();
         translate(...pos);
         for(let k=0;k<300;k++){
            point(d/4*sin(TWO_PI/300*k+dr), 3*d/300*k);
         }
         pop();
      }
   }
}

曲線には三角関数を用いました。 point()を使って、曲線を描画しています。

紗綾形文様を描く【p5.jsで和柄】

紗綾形文様をp5.jsを使って描きます。

紗綾形文様

紗綾形文様は「卍」を斜めに崩して四方に連続文様にしたもので「卍崩し」「卍繋ぎ」とも呼ばれています。

作例

ソースコード

const w=720;
const N=20;
const setcol=[];
setcol[0] = ["#f0ead2", "#6c584c"];
setcol[1] = ["#4c5c68", "#c5dedd"];

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

   col = random(setcol);
   noLoop();

   pat = pattern();
}

function draw() {
   const iw = w * sqrt(2);
   const d=iw/N;
   let img = createGraphics(iw, iw);
   img.imageMode(CENTER);

   for(let i=0;i<N+1;i++){
      for(let j=0;j<N+1;j++){
         const pos = [d*(i), d*(j)];
         img.push();
         img.translate(...pos);

         const scx = (i%2==0) ? 1 : -1;
         const scy = (j%2==0) ? 1 : -1;

         img.scale(scx, scy);
         img.image(pat, 0, 0, d, d);
         img.pop();
      }
   }

   translate(w/2, w/2);
   rotate(PI/4);
   image(img, 0, 0, iw, iw);
}

function pattern(){
   let p = createGraphics(w, w);
   p.noStroke();
   const d = w;
   p.fill(col[0]);
   p.rect(0, 0, d);
   p.fill(col[1]);
   p.rect(d/10+d/5*1, d/10, d/5*3, d/5);
   p.rect(d/10+d/5*2, d/10+d/5*1, d/5);
   p.rect(d/10+d/5*1, d/10+d/5*2, d/5);
   p.rect(d/10+d/5*0, d/10+d/5*3, d/5*3, d/5);
   p.rect(0, 0, d/10, d-d/10);
   p.rect(d-d/10, d/10, d/10, d-d/10);

   return p;
}

紗綾形のパターンを一つ生成して、それを上下左右に反転させながら並べています。 パターンを斜めに並べると、数値計算の誤差によって隙間ができてしまったので、全体に並べたあとに斜めに回転させています。

釘抜文様を描く【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度傾け並べています。 正方形は枠になる大きさのものと、 中を抜く背景色の小さいものを描画して表現しました。

檜垣文様を描く【p5.jsで和柄】

檜垣文様をp5.jsを使って描きます。

檜垣文様

檜垣（ひがき）文様は檜の薄板を網代のように斜めに交互に編んだ文様です。 長方形を斜めに交互に並べた文様です。

作例

ソースコード

const w=720;
const N=20;
const d=w/N;
const setcol=[];
setcol[0] = ["#101010", "#ffcf56"];
setcol[1] = ["#00a66b", "#04461d"];

function setup() {
   createCanvas(w, w);
   noFill();
   strokeWeight(d/12);
   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 dy = (i%2==0) ? 0 : d/sqrt(2) ;
         const pos = [d*i*sqrt(2), d*j*sqrt(2)+dy];
         const r = (i%2==0) ? -PI/4 : PI/4;
         push();
         translate(...pos);
         rotate(r);
         rect(0, 0, d, d*2);
         pop();
      }
   }
}

長方形を45度傾け、交互に並べています。