GLSLで青海波文様

日本の伝統文様の一つに青海波(せいがいは)という同心円の一部が扇状に重なり合ったような文様があります。この記事ではGLSLで青海波文様を実装します。

https://ja.wikipedia.org/wiki/青海波

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

precision highp float;

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

#define PI 3.14159265359

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

    vec2 s = vec2(2.0, 1.0);
    p = mod(p, s) - vec2(0.5 * s.x, 0.0);
    p.x = abs(p.x);

    float d0 = length(p - vec2(0.0, s.y));
    float d1 = length(p - 0.5 * s);
    float d2 = length(p);
    float d3 = length(p - 0.5 * vec2(s.x, -s.y));
    float a = PI * 2.0 * 4.0;
    float e1 = 0.2;
    float e2 = 0.01;
    float v = smoothstep(-e1, e1, sin(d0 * a));
    v = mix(v, smoothstep(-e1, e1, sin(d1 * a)), 1.0 - smoothstep(s.y - e2, s.y, d1));
    v = mix(v, smoothstep(-e1, e1, sin(d2 * a)), 1.0 - smoothstep(s.y - e2, s.y, d2));
    v = mix(v, smoothstep(-e1, e1, sin(d3 * a)), 1.0 - smoothstep(s.y - e2, s.y, d3));

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

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

---

青海波文様は赤枠で囲った部分を一単位とした繰り返し模様になっており、赤枠の中は緑の線を軸に左右に対称になっています。今回の実装はこれらの特徴を利用しています。