【p5.jsで和柄】まとめ

ねじ梅を描く【p5.jsで和柄】

ねじ梅をp5.jsを使って描きます。

ねじ梅

ねじり梅・ひねり梅とも呼ばれ、梅の花弁を文様化したもの。 梅の花びらを捻じったような文様です。

作例

ソースコード

ソースコードを表示する

const w=720;
const N=8;
const d=w/N;
const l=d/32;
const setcol=[]
setcol[0]=["#161a1d", "#a4161a"];
setcol[1]=["#1982c4", "#cddafd"];

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

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

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

function pattern(){
   for(let i=0;i<5;i++){
     const x = (d/4*cos(TWO_PI/5*i - PI/10));
     const y = (d/4*sin(TWO_PI/5*i - PI/10));
     push();
     strokeWeight(0);
     fill(col[1]);
     circle(x, y, d/2.4);
     pop();
   }

   for(let i=0;i<5;i++){
      const x = (d/4*cos(TWO_PI/5*i - PI/10));
      const y = (d/4*sin(TWO_PI/5*i - PI/10));
      push();
      stroke(col[0]);
      noFill();
      translate(x, y);
      rotate(TWO_PI/5*i + PI - PI/10);
      arc(0, 0, d/2.4+l, d/2.4+l, 0, PI);
      pop();
    }
}

５つの円並べて梅の花を描いています。 arc関数を用いて線を引くことで、花びらの捻り部分を表現しています。

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

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

籠目文様

籠目文様は編んだ竹の籠の網目から生じた文様です。 正三角形を上下に重ねた星型の形を連ねた文様です。

作例

ソースコード

ソースコードを表示する

const w=720;
const N=6;
const d=w/N;
const setcol=[]
setcol[0]=["#415a77", "#f4f1de"];
setcol[1]=["#e9d8a6", "#0a9396"];

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

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

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

function pattern(){
   let point=[];

   for(let i=0;i<3;i++){
     point.push(d/2*cos(TWO_PI/3*i + PI/6));
     point.push(d/2*sin(TWO_PI/3*i + PI/6));
   }

   triangle(...point);
   rotate(PI);
   triangle(...point);
}

正三角形を上下に重ねる星を生成するパターンを元に、左右の小さい三角形が重なるように並べて表現しています。