banding

2016.12.12

snow noiseでテレビっぽいノイズを探る中で細切れのグラデーションにしたらいいんじゃないかという結論に至った後、グラデーションをアニメーションさせたらどうなるんだろうと思って試してみたらちょっとアートな感じになったのでアップしてみました。

バンディングとは

web界隈では、繊細なグラデーションの画像をjpgで書き出してしまったときに遭遇するあの段々です。

[jpg] ※スマホだとほぼ気づかない 1 [png] 2

普段はバグ扱いのbandingですが、表現として敢えて使うとエッジーな感じが魅力的です。
タイトルは「banding」ですが画像は使っておらず使い方が正しくなさそうですが、粗いグラデーションという意味で使っています。

実装

基本の実装はこちらのsnownoiseをベースに、一部改変を加えているだけです。

グラデーションの距離を変化させる

グラデーションの距離決めるパラメータを-0.0000001~0.0000001の範囲で増減させます。
その結果、グラデーションの幅や方向が伸縮して接近したり、回転しているように見えます。

いろいろ試している中で偶然に表現が見つかる感じはFlashの頃を思い出します。
案件ベースでは依存やパフォーマンスを考慮するとこういったことがやりにくい状況ではありますが、たまには初心にかえって遊んでみるのもいいものです。