🕸️
GLSLで麻の葉文様
日本の伝統文様の一つに麻の葉という六角形をベースにして大麻の葉に似ていることから名づけられた文様があります。この記事ではGLSLを用いて麻の葉文様を実装します。
コードはGLSL Sandbox互換になっています。
precision highp float;
uniform vec2 resolution;
#define PI 3.14159265359
mat2 rotate(float r) {
float c = cos(r);
float s = sin(r);
return mat2(c, s, -s, c);
}
void main(void) {
vec2 p = gl_FragCoord.xy / min(resolution.x, resolution.y);
p *= 5.0;
// hex tiling
vec2 r = normalize(vec2(sqrt(3.0), 1.0));
vec2 hr = 0.5 * r;
vec2 p1 = mod(p, r) - hr;
vec2 p2 = mod(p - hr, r) - hr;
p = length(p1) < length(p2) ? p1 : p2;
// angle repetition
float a = atan(p.x, p.y);
float s = PI / 6.0;
a = floor((a + 0.5 * s) / s) * s;
p *= rotate(-a);
float v = step(0.01, abs(p.x));
gl_FragColor = vec4(vec3(v), 1.0);
}
描画結果は以下のようになります。
麻の葉文様は太い赤枠で囲った部分を一単位として正六角形タイリングの繰り返し模様になっています。さらに六角形の内部を見ると細い赤線で区切ったように30度ずつ同じ模様になっていることがわかります。今回はこの繰り返しパターンを利用して実装しています。
正六角形タイリングは以下の記事を参考にしています。
Discussion