ポスタリゼーション【閃光的網站・弛緩複合体 -Review Division-】

ポスタリゼーション

2010/01/07 20:23 - AS3.0

先般、wonderfl に BitmapData.paletteMap を使ったポスタリゼーションのコードを投稿しました。あのときは、そのアルゴリズムが正当なものなのかどうなのか、いまいちよくわかんなかったんですよねー。しかし、細かい計算上のミスがあったようですが、基本的なロジックはアレで間違いないようです。

「実践画像処理入門」の P16、「2.5 濃度値の量子化による減色処理」という堅苦しいタイトルの章に、ポスタリゼーションのロジックが説明されていました。

以下のようなことが書かれています。

カラー画像は RGB の各成分が 256 階調の濃度値を持つが、その各 RGB の濃度値の階調値を減らすことで色を減らすことができ、この処理を減色処理という。階調値を減らす簡単な方法としては、量子化処理がある。

量子化処理というのは以下のような処理だそうです。

例えばＮ階調にする場合、256÷Ｎの商を求めます。ここでは仮にＭとします。そして、256 階調の濃度値はＭ個ずつのひとまとまりとし、そのまとまり内にあるものを全て同じ値にします。

16 階調にする場合、256階調の濃度値は、以下のような値に変換されることになります。

0 ～ 15 までの 16 個は、全て 0 に置き換えられる
16 ～ 31 までの 16 個は、全て 17 に置き換えられる
32 ～ 47 までの 16 個は、全て 34 に置き換えられる
48 ～ 63 までの 16 個は、全て 51 に置き換えられる
64 ～ 79 までの 16 個は、全て 68 に置き換えられる
（中略）
208 ～ 223 までの 16 個は、全て 221 に置き換えられる
224 ～ 239 までの 16 個は、全て 238 に置き換えられる
240 ～ 255 までの 16 個は、全て 255 に置き換えられる

これはつまり、先だっての paletteMap の第4、5、6引数である、赤・緑・青へ働きかける、要素数 256 個の Arrray の各値を計算したときにやったことと同じロジック（あん時は計算間違えてたけど。置換後の 17 とか 34 とか 51 といった値がどのように導き出されたのか、というのは、下のコードの set degree の val を求める計算式を見てください）。

お墨付きがついたってことで、堂々と減色エフェクタとして使いたいと思います。

package {
  import flash.display.BitmapData;
  /**
   * paletteMap による BitmapData の減色
   * 参考：「実践画像処理入門」 培風館　内村圭一・上瀧剛　P16　「2.5 濃度値の量子化による減色処理」
   * @author YOSHIDA, Akio (Aquioux)
   */
   
  public class EffectorPosterization extends AbstractEffector {
    /*
     * 減色の段階（1、および 256 より大きい値以外）
     */
    public function set degree(value:uint):void {
      for (var i:int = 0; i < 256; i++) {
        var val:uint = uint(i / (256 / value)) * 255 / (value - 1);
        rArray[i] = val << 16;
        gArray[i] = val <<  8;
        bArray[i] = val;
      }
    }
    // paletteMap の引数となる各色要素用の Array
    private var rArray:Array = [];
    private var gArray:Array = [];
    private var bArray:Array = [];

/*
     * コンストラクタ
     */
    public function EffectorPosterization() {
      degree = 8;    // degree のデフォルト（setter メソッドを発動させる）
    }
    
    /*
     * 減色実行
     * @param  value  効果をかける BitmapData
     */
    override protected function effect(value:BitmapData):BitmapData {
      value.paletteMap(value, value.rect, ZERO_POINT, rArray, gArray, bArray);
      return value;
    }
  }
}