矢絣文様を描く【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パターンに分けて描画し、それを交互に並べています。 コードが綺麗に書けなかったのが少し残念。その内書き直したい。