GLSLで紗綾形文様

日本の伝統文様の一つに紗綾形(さやがた)という文様があります。卍を斜めに崩して連続させたような形から「卍崩し」や「卍繋ぎ」とも呼ばれます。この記事ではGLSLで紗綾形文様を実装します。

https://www.kyolite.co.jp/katagami/sayagata.php

コードは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);

    vec2 q = mod(p, 2.0);
    q.x = mod(p.x, 4.0) < 2.0 ? q.x : 2.0 - q.x;
    q.y = mod(p.y, 4.0) < 2.0 ? q.y : 2.0 - q.y;
    p = q;
    p = mod(p, 2.0) - 1.0;

    float a = atan(p.y, p.x);
    float s = PI / 2.0;
    a = floor(a / s) * s;
    p *= rotate(a);

    float v = 1.0;
    float w = 0.04;
    v = mix(v, 0.0, step(p.x, w) * step(p.y, 0.4));
    v = mix(v, 0.0, step(abs(p.x - 0.4), w) * (step(0.4, p.y) * step(p.y, 0.8)));
    v = mix(v, 0.0, step(abs(p.x - 0.8), w));
    v = mix(v, 0.0, step(p.y, w) * step(p.x, 0.4 + w));
    v = mix(v, 0.0, step(abs(p.y - 0.4), w) * step(p.x, 0.4 + w));
    v = mix(v, 0.0, step(abs(p.y - 0.8), w) * step(p.x, 0.4 + w));

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

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

---

紗綾形文様は以下のモチーフを正方形格子状に並べた繰り返し模様になっています。このモチーフは赤い線で上下左右に対称になっています。さらに赤い線で囲まれた内側に着目してみると、緑の線で分割した箇所は90度の回転対称になっています。本実装ではこれらの特性を利用しています。