ツイッターで書いた以下の #つぶやきGLSL の作成ログ。
タイトルに迷ったので通し番号でナンバリング。
FMラジオ感(?)が足りない #つぶやきGLSL#define C(c,n,s)y=2.-abs(sin(t+s))*3.;if(y<c)if(length(f-.1)<.1*(-y+c))gl_FragColor.rgb+=m[n];
void main(){
mat3 m=mat3(.9);
vec2 p=(gl_FragCoord.xy*2.-r)/r,l=floor(p*5.)/5.,f=p-l;
float y;
C(l.x+l.y,2,0.)
C(l.y-l.x,0,.4)
C(-l.y,1,.8)
} pic.twitter.com/sGY0lD6sGm— Narumium (@Nr_Narumium) November 11, 2020
前回の斜め方向の動きと、パターンの時のブロック化を使っています。
前回の斜め方向への塗りつぶしを floor() で階段化します。
|
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; p=floor(p*5.)/5.; if(2.-time<p.x+p.y)gl_FragColor=vec4(0,.5,0,1); } |
ブロック内の座標を使って円状に広がるようにする。
今回だと -1～1 のサイズ 2 を10分割しているので、相対座標 f から 0.1 ずらした中心からの距離 length(f-.1) とそれぞれの領域での経過時間 time*2.-2.+l.x+l.y を比較する。
|
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)/r; vec2 l=floor(p*5.)/5.,f=p-l; if(2.-time*2.<l.x+l.y) if(length(f-.1)<.1*(time*2.-2.+l.x+l.y)) gl_FragColor=vec4(0,.5,0,1); } |
RGBを左上、下、右上を始点にして処理する。
色の管理は前回同様 mat3。
時間に三角関数を使ってリピートしやすくする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
precision highp float; uniform vec2 resolution; uniform float time; void main(){ mat3 m=mat3(.8); vec2 r=resolution,p=(gl_FragCoord.xy*2.-r)/r; vec2 l=floor(p*5.)/5.,f=p-l; float y=2.-abs(sin(time))*2.5; if(y<l.x+l.y) if(length(f-.1)<.1*(-y+l.x+l.y)) gl_FragColor.rgb=m[2]; if(y<l.y-l.x) if(length(f-.1)<.1*(-y-l.x+l.y)) gl_FragColor.rgb+=m[0]; if(y<-l.y) if(length(f-.1)<.1*(-y-l.y)) gl_FragColor.rgb+=m[1]; } |
RGBの計算は条件とmatの引数が違うだけなのでまとめる。
ついでに時間をずらしたり、描画範囲を広げたり。
|
1 2 3 4 5 6 7 8 9 |
#define C(c,n,s)y=2.-abs(sin(t+s))*3.;if(y<c)if(length(f-.1)<.1*(-y+c))gl_FragColor.rgb+=m[n]; void main(){ mat3 m=mat3(.9); vec2 p=(gl_FragCoord.xy*2.-r)/r,l=floor(p*5.)/5.,f=p-l; float y; C(l.x+l.y,2,0.) C(l.y-l.x,0,.4) C(-l.y,1,.8) } |
おまけ
以前使い始めたNotionがGLSLのメモとして本当に使いやすい。
ただ色々なことに使いすぎてて整理が追い付かなくなってきた。
