☁️
GLSLで立涌文様
日本の伝統模様の一つに立涌(たてわく、たちわく)という水蒸気がゆらゆらと登っていく様子を表現した文様があります。この記事ではGLSLで立涌文様を実装します。
コードは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 *= 16.0;
p.x = abs(mod(p.x, 2.0) - 1.0);
p.x -= 0.5;
float w = 0.1;
float a = 0.35;
float h = 0.25;
float f = sin(p.y * PI * 2.0 * h) * a;
float g = PI * 2.0 * h * cos(p.y * PI * 2.0 * h) * a;
float v = smoothstep(w * 0.8, w, abs(f - p.x) / sqrt(1.0 + g * g));
// simple but ununiform thickness
// float v = smoothstep(w * 0.8, w, abs(f - p.x));
gl_FragColor = vec4(vec3(v), 1.0);
}
描画結果は以下のようになります。
2つの線が左右で対称になっているのを利用して実装しています。コードのコメントアウトした箇所のような単純な実装だと線の太さが安定しないので、以下の記事を参考にして線を描画しています。
Discussion