亀甲文様を描く【p5.jsで和柄】

亀甲文様をp5.jsを使って描きます。

亀甲文様

亀甲文様は亀の甲羅を模した文様です。 正六角形を基本として、それを繋ぎ合わせた文様です。

作例

ソースコード

const w=720;
const N=10;
const d=w/N;
const setcol=[]
setcol[0]=["#ff5c8a", "#ffcad4"];
setcol[1]=["#e2cfc4", "#354f52"];

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

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

function draw() {
   background(col[0])
   for(let i=0;i<N*6/5+1;i++){
      const y = d*5/6*i;
      const dx = (i%2==1) ? d/2 : 0 ;
      for(let j=0;j<N+1;j++){
         const x = d*j;
         push();
         translate(x+dx, y);
         pattern(0, 0, d);
         pop();
      }
   }
}

function pattern(x, y, size){
   const point = [];
   for(let i=0;i<6;i++){
      point[i] = [size/2 * cos(TWO_PI/6*i + PI/2),
                  size/2 * sin(TWO_PI/6*i + PI/2)];
   }

   push();
   translate(x, y);
   stroke(col[1]);

   for(let i=0;i<5;i++){
     line(...point[i], ...point[i+1]);
   }
     line(...point[5], ...point[0]);
   pop();
}

六角形は頂点を計算して、lineで描き表しています。

矢絣文様を描く【p5.jsで和柄】

矢絣文様をp5.jsを使って描きます。

矢絣文様

矢絣（やがすり）文様は弓矢の矢羽根を模した文様です。 矢羽根を絣織りで表したのが名前の由来だそうです。

作例

ソースコード

const w=720;
const N=8;
const d=w/N;
const setcol=[]
setcol[0]=["#FDB947", "#A46eB1"];
setcol[1]=["#C9F1FC", "#933317"];

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

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

function draw() {
   c0 = sqrt(3)/2 ;
   c1 = (1-c0);
   
   for(let i=0;i<N;i++){
      const x = d*i;
      for(let j=0;j<N+1;j++){
         const y = d*j;
         push();
         stroke(0,0,0,0);

         translate(0, int(-d*c1/2));
         translate(x, y);
         pattern0(0, 0, d/2);

         translate(d/2, -d+int(d*c1/2));
         pattern1(0, 0, d/2);
         pop();
      }
   }
}

function pattern0(x, y, size){
   const point = [];
   point[0] = [0, size*c1];
   point[1] = [0, size];
   point[2] = [size/2, size];
   point[3] = [size, size*c1];
   point[4] = [size, size];

   push();
   translate(x, y);
     fill(col[0]);
     rect(0, 0, size);
     fill(col[1]);
     pat_tri(point);

     stroke(col[1]);
     line(size/2,0, size/2,size);
     stroke(0,0,0,0);

     translate(0, size);
     fill(col[1]);
     rect(0, 0, size);
     fill(col[0]);
     pat_tri(point);

     stroke(col[0]);
     line(size/2,0, size/2,size);
   pop();

}

function pattern1(x, y, size){
   const point = [];
   point[0] = [0, size*c0];
   point[1] = [0, 0];
   point[2] = [size/2, 0];
   point[3] = [size, size*c0];
   point[4] = [size, 0];

   push();
   translate(x, y);
     fill(col[1]);
     rect(0, 0, size);
     fill(col[0]);
     pat_tri(point);

     stroke(col[0]);
     line(size/2,0, size/2,size);
     stroke(0,0,0,0);
     
     translate(0, size);
     fill(col[0]);
     rect(0, 0, size);
     fill(col[1]);
     pat_tri(point);

     stroke(col[1]);
     line(size/2,0, size/2,size);
   pop();
}

function pat_tri(point){
   triangle(...point[0], ...point[1], ...point[2]);
   triangle(...point[3], ...point[4], ...point[2]);
}

柄を2パターンに分けて描画し、それを交互に並べています。 コードが綺麗に書けなかったのが少し残念。その内書き直したい。

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

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

菱文様

菱文様は二方向の平行線が交差して出来た菱形を基本とする文様です。 菱の実にその形が似ている事から菱文と呼ばれるようになったそうです。

作例

ソースコード

const w=720;
const N=10;
const d=w/N;
const setcol=[];
setcol[0]=["#e36414", "#b8f2e6"];
setcol[1]=["#abc4ff", "#edf2fb"];

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

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

function draw() {
   background(col[0]);
   stroke(col[1]);
   for(let j=0;j<N*3;j++){
      const y = d*j*1/3;
      const dx = (j%2==1) ? d/2 : 0 ;
      for(let i=0;i<N+1;i++){
         const x = d*i;
         push();
         translate(x+dx, y);
         scale(1, 2/3);
         rotate(PI/4);
         rect(0, 0, d/sqrt(2));
         pop();
      }
   }
}

菱形を描くのにrectに対して、rotateとscaleを用いています。

一の字繋ぎを描く【p5.jsで和柄】

一の字繋ぎをp5.jsを使って描きます。

一の字繋ぎ

一の字繋ぎは横長の同じ大きさの長方体を交互に積み上げた、レンガ積みのような模様。

作例

ソースコード

const w=720;
const N=16;
const d=w/N;
const setcol=[]
setcol[0]=["#ff7096", "#fae0e4"];
setcol[1]=["#4ecdc4", "#1a535c"];

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

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

function draw() {
   background(col[0])
   for(let j=0;j<N;j++){
      const y = d*j;
      const dx = (j%2 == 1) ? -d : 0 ;
      for(let i=0;i<N;i++){
         const x = 2*d*i;
         push();
         translate(x+dx, y);
         stroke(col[1]);
         rect(0, 0, 2*d, d);
         pop();
      }
   }
}

縦横の比率が1:2の長方形を用いて一の字繋ぎとしました。

網目文様を描く【p5.jsで和柄】

網目文様をp5.jsを使って描きます。

網目文様

網目文様は蛇行曲線が向いあって相接した文様です。 漁業用の網の目に見える文様です。

作例

ソースコード

const w=720;
const N=12;
const d=w/N;
const setcol=[]
setcol[0]=["#3c6e71", "#d9d9d9"];
setcol[1]=["#ffe1a8", "#6247aa"];

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

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

function draw() {
   background(col[0])
   for(let j=0;j<N*3/2;j++){
      const y = d*(j+1/2)*2/3;
      const dx = (j%2 == 1) ? PI : 0 ;
      for(let i=0;i<N;i++){
         const x = d*i;
         push();
         translate(x, y);
         stroke(col[1]);
         const pn = 400;
         for(let k=0;k<pn;k++){
            point(d/pn*k, d/2*2/3*cos(2*PI/pn*k + dx));
         }
         pop();
      }
   }
}

三角関数のcosを用いて曲線を表現しています。