GLSLで桧垣文様

日本の伝統文様の一つに桧垣(ひがき)という2:1の比の長方形を斜め45度に組み合わせたような文様があります。この記事ではGLSLを用いて桧垣文様を実装します。

https://naisouzairyou-annai.jp/pattern/tradition/index.html

コードはGLSL Sandbox互換になっています。

precision highp float;

uniform vec2 resolution;

#define PI 3.14159265359

mat2 rotate(float r) {
    return mat2(cos(r), -sin(r), sin(r), cos(r));
}

void main( void ) {

    vec2 p = gl_FragCoord.xy / min(resolution.x, resolution.y);
    p *= 10.0;

    p *= rotate(-PI / 4.0);
    p.x -= floor(p.y / 1.0);
    p = vec2(mod(p.x, 4.0), mod(p.y, 1.0));
    if (p.x >= 2.0 && p.x < 3.0) {
        p += vec2(-2.0, 1.0);
        p = p.yx;
    } else if (p.x >= 3.0) {
        p.x -= 3.0;
        p = p.yx;
    }

    float v = step(0.05, p.x) * step(p.x, 1.95) * step(0.05, p.y) * step(p.y, 0.95);

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

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

---

以下は桧垣模様を45度回転させた図ですが、水平方向に見ると、赤枠で囲った部分を一単位として繰り返し模様になっていおり、また垂直方向に見ると一段ごとに長方形半個分だけずれて繰り返し模様になっています。この繰り返しパターンを利用して実装しています。