ツイッターで書いた以下の #つぶやきGLSL の作成ログ。
『円で円を作る』をもう一段追加してみる。
今回はテーマなく勢いで始めたので短めです。
#つぶやきGLSL#define L(a)length(a)#define M(t)mat2(cos(t),sin(t),-sin(t),cos(t))
void main(){
vec2 p=5.*(gl_FragCoord.xy*2.-r)/r*M(t),f=floor(p)/5.+.1,g=fract(p)-.5,h=fract(g*5.)-.5;g=g*M(-t*2.)+L(f)*.5;
if(L(f)<1.&&L(g)<.5&&L(h)<.4)gl_FragColor=vec4(L(f),L(f.xx),L(g.xx),1);
} pic.twitter.com/NBF4EimNr6— Narumium (@Nr_Narumium) November 26, 2020
円で円を作る×２
座標 p を分割した座標 f 、f 内の座標の g 、g を分割した座標の h を作る。
|
1 2 3 4 5 6 7 8 9 10 11 |
precision highp float; uniform vec2 resolution; uniform float time; void main(){ vec2 r=resolution,p=5.*(gl_FragCoord.xy*2.-r)/r; vec2 f=floor(p)/5.+.1,g=fract(p)-.5,h=fract(g*5.)-.5; if(length(f)<=1.) if(length(g)<.5) if(length(h)<.4) gl_FragColor=vec4(1); } |
切れ目がちょうどいい感じに。
せっかく３つの円があるので距離を色にする。
|
1 |
gl_FragColor=vec4(length(f),length(g),length(h)+.2,1); |
座標を全部 [-1, 1] に合わすとこうなる。
|
1 2 3 4 5 6 7 8 |
void main(){ vec2 r=resolution,p=5.*(gl_FragCoord.xy*2.-r)/r; vec2 f=floor(p)/5.+.1,g=2.*fract(p)-1.,h=2.*fract(g*2.5)-1.; if(length(f)<=1.) if(length(g)<1.) if(length(h)<.8) gl_FragColor=vec4(length(f),length(g),length(h),1); } |
time に合わせて色を変えてみる。
|
1 2 3 4 5 6 7 8 9 10 |
void main(){ vec2 r=resolution,p=5.*(gl_FragCoord.xy*2.-r)/r; vec2 f=floor(p)/5.+.1,g=fract(p)-.5,h=fract(g*5.)-.5; vec3 c,y=abs(vec3(cos(time),cos(time*2.),cos(time*3.))); if(length(f)<1.) if(length(g)<.5) if(length(h)<.4) c=vec3(length(f),length(g),length(h)+.2); gl_FragColor.rgb=c*y; } |
回転行列で動きを追加してみます。
中の円は距離を使っているだけなので回転だけだと意味がない。
長さを可変にして見える範囲をずらした。
|
1 2 3 4 5 6 7 8 9 10 |
#define M(t)mat2(cos(t),sin(t),-sin(t),cos(t)) void main(){ vec2 r=resolution,p=5.*(gl_FragCoord.xy*2.-r)/r;p*=M(time); vec2 f=floor(p)/5.+.1,g=2.*fract(p)-1.,h=2.*fract(g*2.5)-1.; g=g*M(-time*2.)+length(f); if(length(f)<=1.) if(length(g)<1.) if(length(h)<.8) gl_FragColor=vec4(length(f),length(g),length(h),1); } |
距離そのものが変わるので色を別途いじる必要がなくなった。
|
1 2 3 4 5 6 7 8 9 |
#define L(a)length(a) #define M(t)mat2(cos(t),sin(t),-sin(t),cos(t)) void main(){ vec2 r=resolution,p=5.*(gl_FragCoord.xy*2.-r)/r;p*=M(time); vec2 f=floor(p)/5.+.1,g=2.*fract(p)-1.,h=2.*fract(g*2.5)-1.; g=g*M(-time*2.)+length(f); if(L(f)<=1.&&L(g)<1.&&L(h)<.8) gl_FragColor=vec4(L(f),L(f.xx),L(h),1); } |
少ないパラメータで色、形、動きを変えやすいので面白いです。