ツイッターで書いた以下の #つぶやきGLSL の作成ログ。
四角の動きを表現したい。
#つぶやきGLSL#define B(y).08/length(p-vec2(clamp(cos(y),-.5,.5),clamp(sin(y),-.5,.5))),#define C(y).07/length(p-vec2(cos(2.*y),sin(2.*y))*.25)
vec2 p=(FC.xy*2.-r)/r;
float pi=acos(-1.),a=B(t)b=B(t+pi)c=B(t+pi/2.)d=B(t-pi/2.)e=C(-t),f=C(-t+pi);
o=vec4(a+d+f,b+d+e,c+e+f,1); pic.twitter.com/fibWLBhBqH— Narumium (@Nr_Narumium) November 17, 2020
四角に動くということは x 座標だと 0.5→-0.5→-0.5→0.5→… となる。
動いて、止まって、逆に動くような関数が必要になります。
mod, floor, fractを使って出来なくもないですが面倒なので三角関数で。
三角関数を半ステップ関数にして動いて止まって戻るようにします。
|
1 2 3 4 5 6 7 8 9 10 |
precision highp float; uniform vec2 resolution; uniform float time; void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); float m=cos(time); vec2 b=vec2(min(max(m,-.5),.5),0.); float f=.01/length(p-b); gl_FragColor.r=f; } |
max(min())、min(max()) は clamp() がビルドインであるので使います。
|
1 2 3 4 5 6 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); vec2 b=vec2(clamp(cos(time),-.5,.5),clamp(sin(time),-.5,.5)); float f=.02/length(p-b); gl_FragColor.r=f; } |
思い通りの動き。
変な感じの動きなら正方形の条件式と極座標を組み合わせたり。
|
1 2 3 4 5 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); float pi=acos(-1.),th=atan(p.x,p.y),m=mod(time,pi*2.)-pi; if(abs(th-m)<.2&&abs(max(abs(p.x),abs(p.y))-.6)<.05)gl_FragColor.r=1.; } |
次に4色で動かしてみます。
同様の処理が走るので #define でまとめる。
|
1 2 3 4 5 6 |
#define B(y).02/length(p-vec2(clamp(cos(y),-.5,.5),clamp(sin(y),-.5,.5))) void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); float pi=acos(-1.),a=B(time),b=B(time+pi/2.),c=B(time+pi),d=B(time-pi/2.); gl_FragColor=vec4(a+d,b+d,c,1); } |
Yの特性を活かして逆走させてみる。R、Gと重なるときに大きくなる。
|
1 2 3 4 5 6 |
#define B(y).1/length(p-vec2(clamp(cos(y),-.5,.5),clamp(sin(y),-.5,.5))) void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y); float pi=acos(-1.),a=B(time),b=B(time+pi),c=B(time+pi/2.),d=B(-time-pi/2.); gl_FragColor=vec4(a+d,b+d,c,1); } |
円運動も混ぜてみる。
|
1 2 3 4 5 6 7 |
#define B(y).08/length(p-vec2(clamp(cos(y),-.5,.5),clamp(sin(y),-.5,.5))) #define C(y).07/length(p-vec2(cos(2.*y),sin(2.*y))*.25) void main(){ vec2 p=(gl_FragCoord.xy*2.-r)/r; float pi=acos(-1.),a=B(t),b=B(t+pi),c=B(t+pi/2.),d=B(t-pi/2.),e=C(-t),f=C(-t+pi); gl_FragColor=vec4(a+d+f,b+d+e,c+e+f,1); } |
共通色同士が近づくと膨張して、疎な色同士だとスッと横切るのが好き。
また文字数が足りなくなったので geekest(es300) のお力を借りました。
だんだん文字数短縮より見た目に時間使いたくなってきた。