ActionScript3でグラデーションディザを実現する

Published at:
16th Aug 2011
Categorised at:
,

グラデーションを描く際に頻発する問題、それがトーンジャンプ。 階調が少なかったり、描画するエリアが大きくなるとグラデーションの色の変わり目がはっきりと出てしまい、縞模様が見えてしまう。まぁ、画面の性能や周囲の明るさで全然見え方が変わるのだけど、僕の環境MBP17では上の画像の左側にはかなりくっきりと縞模様ができている。

この問題を抑制するためにPhotoshopやFireworksには"ディザ"というオプションがあるのだけど(FW 使いとしては CS5でグラデーションディザ機能がついたときにはかなり嬉しかった)、残念ながらFlashには未搭載。

ならばPSなりFWなりで作ればいいやと思っていたのだけど、ディザがかかった画像もJPGとして書きだすと、トーンジャンプが酷くなるんだよねぇ…。圧縮アルゴリズムの問題だろうか?PNGだとファイルサイズ的に厳しいし。

というわけで、ASでディザを実現する仕組みを考えてみた。
アルゴリズムを調べたわけではないので適当実装だけど、基本路線はグラデーションに対して、ノイズ画像をディスプレイスメントフィルター(以下DF)として適用してあげるだけ。グラデによってDFのパラメータの最適化をさせる必要あり。ソースは全く整理してないけど、何かの役に立ちそうなら使ってください。ツッコミなんかも大歓迎です。

PSの様にオプション一発でキレイになるわけではないけど、調整してあげればトーンジャンプは確実になくなるし、しかも敢えてDFの強度をあげると最近流行りのノイジーなグラデ画像が出来上がるというオマケが。雰囲気的にはPSの「はね」フィルターに近いのかなぁ。個人的には今後、色々と使えそうな気がしているので割と満足度が高いのです。