GLSLで工字繋ぎ文様

日本の伝統文様の一つに工字(こうじ)繋ぎという「工」の文字を連続して配置したような文様があります。この記事では工字繋ぎ文様をGLSLで実装します。

https://www.modalina.jp/modapedia/w/e5b7a5e5ad97e7b98be3818e/?srsltid=AfmBOop5Bvp4sJ2ruNQ74OqPTRmp_UrV_kiJIUHR8r-Lk8jmPLXDjhdT

コードは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 *= 16.0;
    p *= rotate(-PI / 4.0);

    p = abs(mod(p, 2.0) - 1.0);
    p = p.y >= 0.5 ? vec2(p.x, p.y - 0.5) : vec2(1.0 - p.x, 0.5 - p.y);

    float v = 1.0;
    float w = 0.05;
    float a = 1.0 / 6.0;
    float b = 5.0 / 6.0;
    v = mix(v, 0.0, step(abs(p.x - a), w) * step(p.y, a));
    v = mix(v, 0.0, step(abs(p.x - b), w));
    v = mix(v, 0.0, step(abs(p.y - a), w) * (step(a, p.x + w) * step(p.x, 0.5 + w)));
    v = mix(v, 0.0, step(abs(p.y - 0.5), w) * step(p.x, b));

    gl_FragColor = vec4(vec3(v), 1.0);
}

描画結果は以下のようになります。

---

工字繋ぎ文様は以下のモチーフを正方形格子状に並べた繰り返し模様になっています。このモチーフは赤い線で上下左右に対称になっています。さらに赤い線で区切られた一つの部分に着目してみると、緑の点を中心に180度の回転対称になっています。上述したコードはこれらの特徴を利用して実装しています。