ねじ梅を描く【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関数を用いて線を引くことで、花びらの捻り部分を表現しています。