つぶやきGLSL理解したい

これを理解したい

code:glsl

void main(){vec2 p=(.5-fract(mat2(cos(-t*.4+vec4(1,33,11,1)))*(gl_FragCoord.xy*2.-r)/min(r.y,r.x)))*2.4;float q=length(p),a=atan(p.y,p.x)*2.5+t*2.;gl_FragColor=vec4(mix(q*.9*step(q,min(abs(sin(a))+.4,abs(cos(a))+1.1)*.7),.7,step(q,.15)));}

https://gyazo.com/c886047f75a75510549a8c65963f2fe2

どうやって動かすのか

GLSL Sandboxってのがあるらしい

エラーメッセージはどうやって見るのか

コンソールに出てた

tとrをtimeとresolutionに変更したら動いた

https://gyazo.com/a6858f7a158d6989efc49e5cabe03527

step(edge, x) == x < edge ? 0.0 : 1.0

x - floor(x)

mix(x, y, a) == x * (1 - a) + y * a

時間による拡大縮小部分

code::

mat2(

cos(-time * .4 + vec4(1,33,11,1))

)

タイリング

code::

vec2 from_center_x2 = (gl_FragCoord.xy * 2. - resolution);

vec2 p1 = from_center_x2 / min(resolution.y, resolution.x);

vec2 p2 = fract(p1);

vec2 p=( .5 - p2 ) * 2.4;

https://gyazo.com/ed45b38029f2e1c4b187beb7b7da4d4c

中心からの距離

code::

float q=length(p);

中心からの角度

2.5倍しているので、一周で5π、これが花びらの枚数になる。時刻を足しているので時間経過で回転する

code::

float a=atan(p.y, p.x) * 2.5 + time * 2.;

step(q, edge)

「中心からの距離がedge以下なら1.0」ということなので中心付近を塗るのに使える

輪郭の形

code::

min(abs(sin(a))+.4, abs(cos(a))+1.1)

https://gyazo.com/87926436442193a2483cc6801bd1499d

中心からの距離に応じたグラデーション

code::

q * .9 * step( ... )

これは中央の丸

code::

step(q,.15)

yが固定のmixは何か

aが0の時x、1の時y、という条件分岐

拡大縮小部分のコード

code::

mat2 m = mat2(cos(-time * .4 + vec4(1,33,11,1)));

vec2 p2 = fract(m * p1);

33などのマジックナンバー

どうせcosに入れるので2πの倍数には意味がない

計算してみるとπ/2の倍数に近い値

ショートコーディングのためのテクニックに過ぎない

下記のコードと振る舞いは同じ

code::

float pi = 3.14159;

mat2 m2 = mat2(

cos(-.4 * time + 1.),

cos(-.4 * time + pi * 0.5),

cos(-.4 * time + pi * 1.5),

cos(-.4 * time + 1.));

vec2 p2 = fract(m2 * p1);

sinも使うとこうなる

code::

float t = -.4 * time;

mat2 m2 = mat2(cos(t + 1.), -sin(t), sin(t), cos(t + 1.));

vec2 p2 = fract(m2 * p1);

cosに対する+1.がなければ単なる回転になる

ここまでを踏まえて少し改造した

https://gyazo.com/c42b981ccaaa5d56e2052158edb93102