GLSLで回転行列を使って座標を回転させる

・参考
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（７） - Qiita
http://goo.gl/5aM2U7

precision mediump float;
uniform float t; // time
uniform vec2  r; // resolution

void main(void){
	vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x,r.y);
	vec3 destColor = vec3(1.0, 0.3, 0.7);
	float f = 0.001 / abs(p.x * p.y) * gl_FragCoord.x;
	
	float l = f * abs(sin(t));

	gl_FragColor = vec4(vec3(destColor * l),1.0);
}

回転行列で座標を回転

・参考
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（８） - Qiita
js4k intro - GLSL editor

precision mediump float;
uniform float t; // time
uniform vec2  r; // resolution

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    float s = sin(t); 
    float c = cos(t);  
    
    mat2 m = mat2(c,s,-s,c);
    
    p *= m;
    
    vec2 q = vec2(p.x - 1.0, p.y);
    float f = 0.1 / length(q);
    gl_FragColor = vec4(vec3(f), 1.0);
}

キラシール加工

余りを求めるmodをうまく使う。

precision mediump float;
uniform float t; // time
uniform vec2  r; // resolution

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    vec2 q = mod(p, 0.2) - 0.1;
    float s = sin(t);
    float c = cos(t);  
    
    q *= mat2(c,s,-s,c*p.x);
    
    float v = 0.1 / abs(q.y) * abs(q.x);

    gl_FragColor = vec4(vec3(v), 1.0);
}