ツイッターで書いた以下の #つぶやきGLSL の作成ログ。
移動ゲートっぽい感じを書いてみたかった。
#つぶやきGLSL
void main(){
vec2 p=(gl_FragCoord.xy*2.-r)/r;
float h=atan(p.y,p.x),l=length(p);h=floor((h+acos(-1.))*6.)/6.;
gl_FragColor.g=abs(l-(.9-sin(h*9.+t)*.1));
gl_FragColor.b=.03/abs(l-(.7-cos(h*9.+t*2.)*.3));
if(l<.7-(sin(h*9.-t)+cos(h*5.+t))*.1)gl_FragColor.r=.6;
} pic.twitter.com/7IdC6lbcRB— Narumium (@Nr_Narumium) November 13, 2020
まずは通常の円を歪ませてみる。
各点を中央から見た角度 h を使って正弦波でゆがめます。
|
1 2 3 4 5 6 7 8 |
precision highp float; uniform vec2 resolution; uniform float time; void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; float h=atan(p.y,p.x); if(length(p)<.9-sin(h*9.)*.1)gl_FragColor.g=.5; } |
角度によって中央からの長さが 0.9 ± 0.1 になっています。
3色使って動く速さや波形を変えてみます。
|
1 2 3 4 5 6 7 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; float h=atan(p.y,p.x); if(length(p)<.9-sin(h*9.+time)*.1)gl_FragColor.g=.5; if(length(p)<.9-cos(h*9.+time*2.)*.1)gl_FragColor.b=.5; if(length(p)<.9-sin(h*9.+time*3.)*.1)gl_FragColor.r=.5; } |
|
1 2 3 4 5 6 7 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; float h=atan(p.y,p.x); if(length(p)<.9-sin(h*9.+time)*.1)gl_FragColor.g=.5; if(length(p)<.8-cos(h*9.+time*2.)*.2)gl_FragColor.b=.5; if(length(p)<.7-sin(h*9.+time*3.)*.3)gl_FragColor.r=.5; } |
重なった部分だけ描画なんかは簡単にできるので、色ごとに面白い形になったりしないか見つつ色々と変形させていきます。
２つの条件の合わさった赤色と、2つの波の合成で書いた緑。
旅の扉というよりはアメーバ寄りになってきてます。
|
1 2 3 4 5 6 7 8 9 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; float h=atan(p.y,p.x); if(abs(length(p)-(.9-sin(h*9.+time)*.1))<.02) if(length(p)<.8-cos(h*9.+time*2.)*.2)gl_FragColor.r=.8; if(length(p)<.7-(sin(h*9.-time)+cos(h*5.+time))*.1)gl_FragColor.g=.5; } |
困ったときの floor() による階段化。
|
1 2 3 4 5 6 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; float h=atan(p.y,p.x); float i=floor((h+3.14)*6.)/6.; if((length(p)-(.9-sin(i*9.+time)*.1))<.02)gl_FragColor.g=.5; } |
|
1 |
if(abs(length(p)-(.9-sin(i*9.+time)*.1))<.02)gl_FragColor.g=.5; |
これらを距離関数化したりしつつ組み合わせて出来上がりです。
この辺はパターンを気に入るまで組み合わせる作業。
|
1 2 3 4 5 6 7 |
void main(){ vec2 p=(gl_FragCoord.xy*2.-r)/r; float h=atan(p.y,p.x),l=length(p);h=floor((h+acos(-1.))*6.)/6.; gl_FragColor.g=abs(l-(.9-sin(h*9.+t)*.1)); gl_FragColor.b=.03/abs(l-(.7-cos(h*9.+t*2.)*.3)); if(l<.7-(sin(h*9.-t)+cos(h*5.+t))*.1)gl_FragColor.r=.6; } |
