つぶやきGLSLの合間に、こうすればこう動くなーという確認。
単純な式をボーダーにして色を塗っていきます。
とりあえず適当に境界を引く。
単純な式で time を三角関数で -1 ～ 1 にして動かしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
precision highp float; uniform vec2 resolution; uniform float time; void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; float s=sin(time),c=cos(time);vec3 o; if(s>p.x-p.y)o.r+=1.; if(c*s>p.x+p.y)o.g+=1.; if(s>p.y)o.b+=.6; if(c<p.y)o.b+=.6; gl_FragColor.rgb=o; } |
sin と cos のズレをうまいこと表現に使えると嬉しい。
y/x や x*y を境界に使ってみます。
思ったよりポップな印象の動きになりました。
|
1 2 3 4 5 6 7 8 9 10 11 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; float s=sin(time),c=cos(time);vec3 o; if(s>.5/p.x*p.y)o.r+=.6; if(c>.5/p.x*p.y)o.r+=.6; if(s>-p.y*p.x)o.g+=.6; if(c<-p.y*p.x)o.g+=.6; if(s>p.y*p.x)o.b+=.6; if(c<p.y*p.x)o.b+=.6; gl_FragColor.rgb=o; } |
この動きは覚えておくと何かに使えそうな気がします。
x * y の逆数を使うと不思議な動きになりました。計算してみると納得。
|
1 2 3 4 5 6 7 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; float s=sin(time),q=p.x*p.y; vec3 o; if(s>.1/q)o.r+=.6; gl_FragColor.rgb=o; } |
敷き詰めるとまた変わった印象になります。
|
1 2 3 4 5 6 7 |
void main(){ vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r,f=fract(p*5.)-.5; float s=sin(time*2.),q=f.x*f.y; vec3 o; if(s>.1/q)o.r+=.6; gl_FragColor.rgb=o; } |
これと前の動きを色を調整しながら合わせる。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
void main(){ vec2 p=(gl_FragCoord.xy*2.-r)/r; float s=sin(t),c=cos(t),q=p.x*p.y; vec3 o; if(s>.1/q)o.r+=.3; if(c>.1/q)o.r+=.3; if(s>-q)o.g+=.6; if(c<-q)o.g+=.6; if(s>q)o.b+=.4; if(c<q)o.b+=.4; gl_FragColor.rgb=o; } |
単純ですが動きに統一性があって、複数の色の重なりも表現できました。