GLSLで七宝文様

日本の伝統文様の一つに七宝(しっぽう)という正円を規則的に重なるように並べたような文様があります。GLSLを用いて七宝文様を実装します。

https://ja.wikipedia.org/wiki/七宝紋

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

precision highp float;

uniform vec2 resolution;

void main( void ) {
    vec2 p = gl_FragCoord.xy / min(resolution.x, resolution.y);
    p *= 10.0;
    p = mod(p, 2.0)  - 1.0;
    p = abs(p);
    float d1 = length(p);
    float d2 = length(p - 1.0);
    // float v = step(d1, 1.0) * step(d2, 1.0); // hard edge
    float v = (1.0 - smoothstep(0.98, 1.02, d1)) * (1.0 - smoothstep(0.98, 1.02, d2)); // smooth edge
    gl_FragColor = vec4(vec3(v), 1.0);
}