fract関数でタイルレイアウトに挑戦メモ
以前mod関数やfor文でタイルレイアウト挑戦しました。
今回はfract関数を使ってタイルレイアウトに挑戦してみたいと思います。 fract関数は引数の値の少数点以下の値を返却してくれます。
mod関数で代替するとしたらmod(x,1.0)
となります。
タイルレイアウト
実際に試してみます。
void main() { vec2 st = (gl_FragCoord.xy * 2.0 -resolution) /min(resolution.x,resolution.y); vec3 color = vec3(0.0); //正規化して座標を2倍する st *= 2.0; st = fract(st); float l = length(st); color = vec3(l); gl_FragColor = vec4(color,1.0); }
ポイントは正規化した座標を正規化た値をfract関数にわたしているところです。
丸を書いてみる
タイルレイアウトができたので色々試してみます。
まずは丸を書いてみます。
void main() { vec2 st = gl_FragCoord.xy /min(resolution.x,resolution.y); vec3 color = vec3(0.0); st *= 3.0; st = fract(st); //各タイルの座標(0.0,0.0)を中心に持ってくる st = (st*2.0 - 1.0); float l = step(0.5,length(st)); color = vec3(l); gl_FragColor = vec4(color,1.0); }
丸と四角をタイル毎に変えてみる
もっとスマートな方法があるとおもうのですが、if文で無理やり変更してみました。
void main() { vec2 st = gl_FragCoord.xy /min(resolution.x,resolution.y); vec3 color = vec3(0.0); float l = 0.0; st *= 3.0; vec2 tilePos = fract(st); //各タイルの座標(0.0,0.0)を中心に持ってくる tilePos = (tilePos*2.0 - 1.0); if( //偶数行と偶数列は四角を描く mod(st.x ,2.0) > 1.0 || mod(st.y ,2.0) > 1.0 ){ vec2 c = max(abs(tilePos) - 0.5,0.0); l = length(c); l = ceil(l); }else{ //奇数行と奇数列は丸を描く l = step(0.5,length(tilePos)); } color = vec3(l); gl_FragColor = vec4(color,1.0); }
アニメーションさせてみる
void main() { vec2 st = gl_FragCoord.xy /min(resolution.x,resolution.y); float l = 0.0; st *= 10.0; if(mod(st.y ,2.0) > 1.0){ st.x += time; }else{ st.x -= time; } vec2 tilePos = fract(st); //各タイルの座標(0.0,0.0)を中心に持ってくる tilePos = (tilePos*2.0 - 1.0); //丸を描く l = step(0.5,length(tilePos)); gl_FragColor = vec4(vec3(l),1.0); }
参考
わかりやすいです。 Patterns