ツイッターで書いた以下の #つぶやきGLSL の作成ログ。
今回タグを入れられなかった。
#define G(n)o.rgb+=m[n]*i/6.;#define C(n)abs(p.x-p.y+i-n)<=.13
mat3 m=mat3(.9);vec2 p=1.5*(FC.xy*2.-r)/r,q;float i,y,a;for(i=0.;i<6.1;i+=.3,y=mod(t,4.)+1.7,a=abs(i-y),q=p){if(C(3.)){if(a<=.6)q=p+.2-a/3.;if(q.x*q.x*q.y*q.y*q.y-pow(dot(q,q)-1.,3.)>0.)G(2)else G(1)}if(C(3.15))G(0)} pic.twitter.com/zO7zSAw7PY— Narumium (@Nr_Narumium) November 14, 2020
今回は過去のつぶやきGLSLの複合です。
数式の関係上、今回は座標を -1.5 ~ 1.5 にしています。
|
1 2 3 4 5 6 7 8 |
precision highp float; uniform vec2 resolution; uniform float time; void main(){ vec2 r=resolution,p=1.5*(gl_FragCoord.xy*2.-r)/r; if(p.x*p.x*p.y*p.y*p.y-pow(dot(p,p)-1.,3.)>0.) gl_FragColor=vec4(1); } |
斜めに分割してみる。
|
1 2 3 4 5 6 |
void main(){ vec2 r=resolution,p=1.5*(gl_FragCoord.xy*2.-r)/r; if(p.x*p.x*p.y*p.y*p.y-pow(dot(p,p)-1.,3.)>0.){ for(float i=-3.;i<3.;i+=.3)if(abs(p.x-p.y+i)<.15)gl_FragColor=vec4(1)*abs(i)/2.; } } |
扱いやすいようにずらします。
|
1 2 3 4 5 6 |
void main(){ vec2 r=resolution,p=1.5*(gl_FragCoord.xy*2.-r)/r; if(p.x*p.x*p.y*p.y*p.y-pow(dot(p,p)-1.,3.)>0.){ for(float i=0.;i<6.;i+=.3)if(abs(p.x-p.y+i-3.)<.151)gl_FragColor=vec4(1)*abs(i)/5.; } } |
条件を for 文の中に入れ i によってずらす処理を追加してみます。
|
1 2 3 4 5 6 7 8 9 |
void main(){ vec2 r=resolution,p=1.5*(gl_FragCoord.xy*2.-r)/r; for(float i=0.;i<6.;i+=.3) if(abs(p.x-p.y+i-3.)<.151){ if(abs(i-3.)<.1)p+=.1; if(p.x*p.x*p.y*p.y*p.y-pow(dot(p,p)-1.,3.)>0.) gl_FragColor=vec4(1)*abs(i)/6.; } } |
少し隙間を空けて time を使って動かしてみます。
|
1 2 3 4 5 6 7 8 9 10 |
void main(){ vec2 r=resolution,p=1.5*(gl_FragCoord.xy*2.-r)/r; for(float i=0.;i<6.;i+=.3) if(abs(p.x-p.y+i-3.)<=.13){ float y=mod(time+1.7,5.6); if(abs(i-y)<=.6)p+=.3-abs(i-y)/2.; if(p.x*p.x*p.y*p.y*p.y-pow(dot(p,p)-1.,3.)>0.) gl_FragColor=vec4(0,0,1,1)*abs(i)/6.; } } |
なんとなくシックな感じに。
反対方向の斜めでも入れてみる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
void main(){ vec2 r=resolution,p=1.5*(gl_FragCoord.xy*2.-r)/r,q; for(float i=0.;i<6.;i+=.3){ if(abs(p.x-p.y+i-3.)<=.13){ float y=mod(time+1.7,5.6);q=p; if(abs(i-y)<=.6)q=p+.3-abs(i-y)/2.; if(q.x*q.x*q.y*q.y*q.y-pow(dot(q,q)-1.,3.)>0.) gl_FragColor+=vec4(0,0,1,1)*abs(i)/6.; } if(abs(p.x+p.y+i-3.)<=.13){ float y=mod(time+1.7,5.6);q=p; if(abs(i-y)<=.6)q=p+vec2(-1,1)*(.3-abs(i-y)/2.); if(q.x*q.x*q.y*q.y*q.y-pow(dot(q,q)-1.,3.)>0.) gl_FragColor+=vec4(0,1,0,1)*abs(i)/6.; } } } |
思ったよりごちゃついてしまった。
模様としては悪くないけど斜めの動きが死んでる。
斜め方向の動きを生かしつつ、隙間を使って複数色のパターンを作る。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
void main(){ vec2 r=resolution,p=1.5*(gl_FragCoord.xy*2.-r)/r,q; for(float i=0.;i<6.1;i+=.3){ float y=mod(time+1.7,5.7);q=p; if(abs(p.x-p.y+i-3.)<=.13){ if(abs(i-y)<=.6)q=p+.3-abs(i-y)/2.; if(q.x*q.x*q.y*q.y*q.y-pow(dot(q,q)-1.,3.)>0.) gl_FragColor+=vec4(0,0,1,1)*abs(i)/6.; else gl_FragColor+=vec4(0,1,0,1)*abs(i)/6.; } if(abs(p.x-p.y+i-3.15)<=.13)gl_FragColor+=vec4(1,0,0,1)*abs(i)/6.; } } |
今回はギリギリだったので初の geekest(300es) を使って文字数を収める。
|
1 2 3 4 5 6 7 8 9 |
#define G(n)o.rgb+=m[n]*i/6.; #define C(n)abs(p.x-p.y+i-n)<=.13 mat3 m=mat3(.9);vec2 p=1.5*(FC.xy*2.-r)/r,q; float i,y,a; for(i=0.;i<6.1;i+=.3,y=mod(t,4.)+1.7,a=abs(i-y),q=p){ if(C(3.)){if(a<=.6)q=p+.2-a/3.; if(q.x*q.x*q.y*q.y*q.y-pow(dot(q,q)-1.,3.)>0.)G(2)else G(1)} if(C(3.15))G(0) } |
これを minify してギリギリだった（タグ入れられず）。