3.GLSL ２D螺旋構造虹の解析

 http://glslsandbox.com/e#41999.0

２つの円が色を変えながらくるくる回っています。

どうやって作ってるんだろう...

ということで解析してみました。(最後の一行は理解出来なかった)

void main()
{
vec2 r = resolution;
// 現在のピクセル位置(0~横解像度,0~縦解像度)

vec2 o = gl_FragCoord.xy - r/2.;
// (-横解像度*0.5 ~ +横解像度*0.5,-縦解像度*0.5 ~ +縦解像度*0.5)

o = vec2(length(o) / r.y - .3, atan(o.y,o.x));
// 極座標系に変換　".3"=円の半径　o.xは外にかけて増えるmaxで0.62ぐらい　o.yはぐるっと回っている-3.14 ~ 0 ~ +3.14

// oを表示するとこうなる

vec4 s = .07*cos(1.5*vec4(0,1,2,3) + time + o.y + cos(o.y) * cos(time));
// sがなにやってるかひと目では分かりません。こういうときはｓを表示してみます。
// gl_FragColor=s*(1./0.07).;return;
// ｓの画像です。画像なので動いていないが、極座標系がくるくる回っています。

// cosの中にcosがある..ややこしいです。括弧内の２つのcosを消してみると...
// .07*cos(1.5*vec4(0,1,2,3) + time + o.y);
// すると２つの円が同じ速度で回転しています

//vec4(0,1,2,3)にtimeを足すことで各要素のxyzwが増えていきます。

// そこに、o.yを足すことで極座標系なので回ります。

 // 最後にcosと*0.07をすることで-0.07~+0.07になります。

vec4 e = s.yzwx;

//eはｓの要素を並び替えたものです。

vec4 f = max(o.x-s,e-o.x);

//o.x-s はo.xで作られる円を-sして円の中心の場所を±0.07ずらしています。中心が黒で外が白。

// e-o.xも同じで円の中心をずらしていますが、e-o.xで中心が白く外が黒。

//vec4 f = max(o.x-s.x,e.x-o.x);  x成分だけ表示した時のfは以下の画像になります。

// もとのvec4 f = max(o.x-s,e-o.x);に大きい値(10)をかけて表示すると以下のようになります。

gl_FragColor = dot( clamp(f*r.y,0.,1.) , 72.*(s-e)) * (s-.1) + f;

// fをコメントアウトすると背景が真っ黒になります。

// 最後が分からない...............参考になる情報などあれば欲しいです

}