AfterEffectにある波紋のエフェクトをPixelBenderで作ってみました。


こんな感じになりました。


右上のボタンでフィルターのオンオフを切り替えられます。
 

PBJファイルこちら
 

パラメータはこんな感じで調整

//波紋の中心座標
shader.data.center.value = [200, 150];
//波紋の広がる半径
shader.data.radius.value = [250];
//波の幅
shader.data.width.value = [50];
//波の高さ
shader.data.height.value = [8];
//波のフェーズ(これを0~360でループさせることで波のアニメーション)
shader.data.phase.value = [0];


PBKソース

< languageVersion : 1.0; >

kernel Ripple
<   namespace : "";
    vendor : "Kousho Shimada";
    version : 1;
    description : "ripple filter";
>
{
    input image4 src;
    output pixel4 dst;
    
    const float PI = 3.14159265;
    
    parameter float2 center
    <
        minValue:float2(0.0);
        maxValue:float2(2800.0);
        defaultValue:float2(200.0);
    >;
    parameter float height
    <
        minValue:0.0;
        maxValue:100.0;
        defaultValue:10.0;
    >;
    parameter float radius
    <
        minValue:0.0;
        maxValue:2800.0;
        defaultValue:100.0;
    >;
    parameter float width
    <
        minValue:1.0;
        maxValue:100.0;
        defaultValue:20.0;
    >;

    parameter float phase
    <
        minValue:0.0;
        maxValue:360.0;
        defaultValue:0.0;
    >;

    
    void evaluatePixel()
    {
        float2 pos = outCoord();
        float dist = distance(pos, center);
        
        if(dist < radius)
        {
            float val = cos((dist / width - phase / 360.0) * PI * 2.0);
            float2 targetPos = float2(pos.x + val * height, pos.y + val * height);
            dst = sampleLinear(src, targetPos);
        }
        else
        {
            dst = sampleLinear(src, pos);
        }
    }
}


複数の波を起こすことは出来ないので水をリアルに表現するのには向かないですが、
トランジションやちょっとした演出には使えそうです。

画面を揺らしながらクロスディゾルブで回想シーンに切り替える演出は
昔のテレビ番組なんかでもありますね。

よかったら使ってみてください。

 

HTML5飯