GLSLで行列で回転・縮小をする為のメモ

行列を使った回転と、拡大縮小をやってみます。

sin,cosで円を回転

sin、cosを使って回転してみます。

const float PI = 3.14159265359;

void main( void ) {

    vec2 st = (gl_FragCoord.xy * 2.0 - resolution) /min(resolution.x,resolution.y);
    float p = 0.0;
    
  //  st = rotate2d( sin(time)*PI ) * st;
    
    vec2 c = max(abs(st +vec2(cos(time)*0.5,sin(time)*0.5)) - 0.2,0.0);
    p = length(c);
    p = ceil(p); 
    
    vec3 color = vec3(1.0 - p);

    gl_FragColor = vec4(color,1.0);

サンプル

中心座標をうごかしている為、オブジェクトだけでなく空間全体が動いてしまいます。

行列で回転させる

2次元の回転行列をやってみます。 下記が、（x, y）を原点に反時計方向にθ度回転する行列です。

mat2 rotate2d(float _angle){
    return mat2(
        cos(_angle),-sin(_angle),
        sin(_angle),cos(_angle));
}

const float PI = 3.14159265359;


mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}

void main( void ) {

    vec2 st = (gl_FragCoord.xy * 2.0 - resolution) /min(resolution.x,resolution.y);
    float p = 0.0;
    
   st = rotate2d( sin(time)*PI ) * st;
    
    vec2 c = max(abs(st) - 0.2,0.0);
    p = length(c);
    p = ceil(p); 
    
    vec3 color = vec3(1.0 - p);

    gl_FragColor = vec4(color,1.0);

}

サンプル

行列で拡大・縮小

2次元の拡大縮小行列をやってみます。 下記が、（x, y）を原点にX軸方向にSx倍、Y軸方向にSy倍する行列です。

mat2 scale(vec2 _scale){
    return mat2(_scale.x,0.0,
                0.0,_scale.y);
}

void main( void ) {

    vec2 st = (gl_FragCoord.xy * 2.0 - resolution) /min(resolution.x,resolution.y);
    float blur = 0.1;
    float radius = 0.1;
    float p = 0.0;
    
    st = scale(vec2(sin(time) + 1.0)) * st;
    
    vec2 c = max(abs(st) - 0.2,0.0);
    p = length(c);
    p = ceil(p); 
        
    vec3 color = vec3(1.0 - p);

    gl_FragColor = vec4(color,1.0);

}

サンプル