モザイク【閃光的網站・弛緩複合体 -Review Division-】

モザイク

2010/01/08 20:54 - AS3.0

「OpenGL+GLSLによる画像処理プログラミング」P46 によると、モザイク処理には、ひとつのブロックを何色で塗りつぶすのかを決めるロジックにより、以下の二つに分類されるんだそうな。

ブロック内部の画素値の平均値で塗りつぶすもの
ブロックの代表点の画素値で塗りつぶすもの

前者は特に説明は要らないでしょう。

で後者。代表点って何よ？　すべてのブロックで共通に設定する任意の点らしい。もっぱら左上のピクセルに割り当てることが多いっぽい感じ。まぁ左上のピクセルなら、モザイクのサイズ如何に関わらず、絶対に存在するピクセルだから妥当ですよね。

平均値によるものは原画像がある程度保存されるが、代表点はそうでもないので、情報を隠す目的なら代表点方式の方が良いだろう、と書かれています。

以下のサンプルは、上が平均値によるもので、下が代表点によるものです。代表点は左上に設定しました。

get Flash Player

たしかにずいぶん雰囲気が変わりますね。

ところで、実際問題として考えると、代表点によるモザイクって使うかなぁ、少なくとも自分は使わなそう、という印象を強く受けたので、オレオレライブライリーに登録するのは平均値によるモザイクのみにします。

で、下がコード全文。

package {
  import flash.display.BitmapData;
  import flash.geom.Matrix;
  import flash.geom.Rectangle;
  /**
   * モザイク（原画像のブロック内部の画素値の平均値による）
   * 「OpenGL+GLSLによる画像処理プログラミング」 工学社　酒井幸市　P46　「2.1 モザイク処理」
   * @author YOSHIDA, Akio (Aquioux)
   */
  public class EffectorPixelization extends AbstractEffector {
    public function set size(value:uint):void {
      _size = value;
      wNum = Math.ceil(width  / _size);  // width / _size が割り切れない場合は切り上げ
      hNum = Math.ceil(height / _size);  // height / _size が割り切れない場合は切り上げ
      pixelizeRect.width  = _size;
      pixelizeRect.height = _size;
      if (pixelizeBitmapData) pixelizeBitmapData.dispose();
      pixelizeBitmapData = new BitmapData(_size, _size);
    }
    private var _size:uint;      // モザイクの1辺の長さ（縦横同じ長さとする）
	
    private var width:Number;    // 対象幅
    private var height:Number;   // 対象高
    private var wNum:uint;       // 横方向のモザイク数
    private var hNum:uint;       // 縦方向のモザイク数
    private var pixelizeRect:Rectangle = new Rectangle();   // モザイク1つ分の Rectangle
    private var pixelizeBitmapData:BitmapData;              // モザイク1つ分の BitmapData
	
    private var matrix:Matrix = new Matrix();  // BitmapData.draw 用

public function EffectorPixelization(width:Number, height:Number) {
      this.width  = width;      // 対象幅を待避
      this.height = height;     // 対象高を待避
      size = 8;     // _size のデフォルト（setter メソッドを発動させる）
    }

override protected function effect(value:BitmapData):BitmapData {
      // モザイクブロックごとの走査
      for (var i:int = 0; i < hNum; i++) {
        for (var j:int = 0; j < wNum; j++) {
          pixelizeRect.x = j * _size;
          pixelizeRect.y = i * _size;
          matrix.tx = -pixelizeRect.x;
          matrix.ty = -pixelizeRect.y;
          pixelizeBitmapData.draw(value, matrix);
          // モザイクの1辺の長さが 16 より大きい場合はヒストグラムを使って、そうでない場合は getPixel を使って平均色を求める
          // 16 ^ 2 = 256
          // 走査ループ回数がヒストグラムでのそれの未満なら getPixel に切り替える
          var color:uint = (_size > 16) ? getAverageColorHistogram(pixelizeBitmapData) : getAverageColor1GetPixel(pixelizeBitmapData);
          value.fillRect(pixelizeRect, color);
        }
      }
      return value;
    }

// 平均色を求める（モザイク1ブロック内のヒストグラムから計算）
    private function getAverageColorHistogram(bitmapData:BitmapData):uint {
      var hist:Vector.<Vector.<Number>> = bitmapData.histogram();
      var rSum:uint = 0;
      var gSum:uint = 0;
      var bSum:uint = 0;
      for (var i:int = 0; i < 256; i++) {
        rSum += i * hist[0][i];
        gSum += i * hist[1][i];
        bSum += i * hist[2][i];
      }
      var numOfPixel:uint = _size * _size;
      var r:uint = rSum / numOfPixel >> 0;
      var g:uint = gSum / numOfPixel >> 0;
      var b:uint = bSum / numOfPixel >> 0;
      return 0xFF << 24 | r << 16 | g << 8 | b;
    }

// 平均色を求める（モザイク1ブロック内のピクセルを走査）
    private function getAverageColor1GetPixel(bitmapData:BitmapData):uint {
      var rSum:uint = 0;
      var gSum:uint = 0;
      var bSum:uint = 0;
      for (var i:int = 0; i < _size; i++) {
        for (var j:int = 0; j < _size; j++) {
          var color:uint = bitmapData.getPixel(j, i);
          var r:uint = (color >> 16) & 0xFF;
          var g:uint = (color >>  8) & 0xFF;
          var b:uint =  color        & 0xFF;
          rSum += r;
          gSum += g;
          bSum += b;
        }
      }
      var numOfPixel:uint = _size * _size;
      r = rSum / numOfPixel >> 0;
      g = gSum / numOfPixel >> 0;
      b = bSum / numOfPixel >> 0;
      return 0xFF << 24 | r << 16 | g << 8 | b;
    }
  }
}

ブロックの色の平均値を求める際に、このあいだの平面分割 WebCam で知恵をつけた BitmapData.histogram を使っています。ただしブロックの辺の長さが 16 以下になったら（つまりブロック内のピクセル数が256以下になったら）、histogram ではなく、ピクセル走査で平均値を求めるようにしました。

まぁ速度的にどんだけ影響あんのか分かんないんですけどねー。

ところでこういう処理は、英語では mosaic と言うよりも、pixelization と言う方が一般的だそうな。

それに則ってクラス名は EffectorPixelization としました。