#つぶやきGLSL で #tan治郎 の解説

tanjiro.glsl

// #つぶやきGLSL で #tan治郎 の解説
// https://twitter.com/gam0022/status/1339584625929175042

// #つぶやきGLSLとは？
// 1ツイートに収まる文字数の制限でGLSLのシェーダーを書く遊びです。
// ハッシュタグを考慮すると 270 文字前後のようです。
// @h_doxas さん開発の https://twigl.app/ を使うと、文字数カウントやGIF出力の機能があるため便利です。

// FCは gl_FragCoord の短縮形です。ピクセル単位の座標が入っています。
// r は resolution の短縮形です。ピクセル単位のキャンバスの解像度が入っています。
// p には1に正規化された座標を8倍にしたものが入っています。
// 縦方向（短辺方向）の市松模様のユニットの数が8になっているのは、座標を8倍しているからです。
vec2 p=FC.xy/min(r.x,r.y)*8.;

// a には左下の原点からの距離と時間から三角関数の位相を計算した値が入っています。
// acos(-1) は計算すると PI = 3.14159265359 になります。
// t は time の短縮形です。秒単位の時間が入っています。
// つまり t*acos(-1.) = t*PI で位相をアニメーションしています。
// 三角関数の位相は 2*PI で一周するので、このシェーダーのアニメーションは2秒でループします。
float a=length(p)+t*acos(-1.);

// tan(a)*cos(a) は sin(a) と等価です。
// tan治郎ということで、なんとか tan と cos も使いたかったので、このような置き換えをしました。
// 座標pにsin(a)を加算して、座標を歪めることで、布が風で揺れるアニメーション効果を加えました。
p+=0.2*tan(a)*cos(a);

// vec3(0,0.3,0) は緑のカラーコードです。
// mod(floor(p.x)+floor(p.y),2.) は市松模様を計算するための式です。
// sin(a+3.) はライティング計算です。
// 動きのアニメーションの sin(a) の位相を 3. だけずらして、影の位置を調整しています。
// sinの値域 [-1 1] はライティングには使いづらいので、(2.+sin(a+3.)で底上げして値域を [1 3]にしています。
// vec3(0, 0.3, 0) と緑を 0.3 と暗めにしたのは、3倍されることを考慮して 1/3 に調整した結果です。
// 最後に +0.1 で黒の部分を vec3(0.1, 0.1, 0.1) の暗いグレーに調整しています。
o.rgb=vec3(0,0.3,0)*mod(floor(p.x)+floor(p.y),2.)*(2.+sin(a+3.))+0.1;