のぐそんブログ

暗いおじさんがシコシコ書くブログです。

fract関数でタイルレイアウトに挑戦メモ

以前mod関数やfor文でタイルレイアウト挑戦しました。

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);
        }

Kobito.MhzUqE.png

アニメーションさせてみる

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