GLSLコード書いて”Filter”のカスタマイズをやってみた

kayacさんが開始した新しいフィルタアプリ「Filter」が面白いです。
http://filters.kayac.com/

何が面白いかってGLSLでシェーダー書いてオリジナルのフィルタが作成出来るってとこです。
そもそも画像加工するのにGLSLでいくって辺りが面白い。という事でその界隈のプログラマーにバズっているのでさっそく作ってみました。

シェーダーはこんな感じでブラウザ上のエディタで書けます。
アプリからのペアリングしてリアルタイムに書きながら確認も出来ます。

スクリーンショット 2014-12-10 17.15.11

書いたシェーダーは公開が出来るのですが、これが公開されるとアプリを使っている人みんなのフィルタに自動的に入ります。で、気に入ったフィルタがあったらそのコードをまた改変して新しいフィルタが作れます。

まさに無限。
と、いう事でゼロから1つ、公開されてるもののカスタマイズで作ったフィルタのコードがこちら。

 

float sigmoid( float value, float gain ){
return 1.0 / ( 1.0 + exp( – gain * value ) );
}

float timeOfValue(float time){
return abs( log( ( sin( 2.0 * (time/2.0+floor(time/2.0+1.0/2.0))) + 1.0 ) / 2.0 ) * cos( tan( time ) ) * sin( cos( time / 2.0 ) ) );
}

float chroma( vec3 color ){
return color.r * 0.3 + color.b * 0.59 + color.b * 0.11;
}

void main()
{
vec2 uv = iScreen;
float cycle = mod( iTime / 1.0, 1.0 );
float value = sigmoid( pow( timeOfValue(iTime), 2.0 ) / 1.4, 1.0 );
float value2 = timeOfValue( iTime ) * value * 0.427;
value2 = pow(value2,2.0);

uv.x = mod( ( uv.x + tan( ( uv.y – cycle ) * 3.0 * value * 888.0 ) * value * 1.0 / ( 2900.0 * (1.0-value) ) ), 1.0 );
uv.y = mod( uv.y – value2, 1.0 );
vec2 uv2 = uv;

uv.x = 0.1 + 0.8 * uv.x;
uv.y = 0.1 + 0.8 * uv.y;

vec4 color = texture2D(iCamera, mod(uv,1.0));
uv2.x = uv.x + value / 0.1;
color.x = texture2D( iCamera, mod(uv2,1.0) ).x;

uv2.x = uv.x – value / 0.;
color.z = texture2D( iCamera, mod(uv2,1.0) ).z;
float chroma = chroma(color.rgb);
color.rgb = color.rgb + ( vec3(chroma) – color.rgb ) * 0.7;
color.r *= 0.4;
color.g *= 0.4;
color.b *= 0.4;

// — 走査線を追加
float size = 600.0;
vec2 position = uv * iResolution;
float height = iResolution.y + size;
float posY = – size + ( height * cycle );

if( posY <= position.y && position.y < posY + size ){
color.xyz *= 0.96;
}
color.xyz *= vec3( ( 6.0 + cos(sin(gl_FragCoord.y) )) / 2.0 );
gl_FragColor = vec4(color.rgb, 1.0);

}

オリジナルを元にuvの値とかcolorとかtimeとかいじってます。
GLSLは数学の世界ですね。でもパワフルさが半端ない。
参加のハードルが高いんだか低いんだか。相変わらず面白いことやりますね。

引き続きいじっていきますー。

●この記事を書いた人