2008-11-282014-05-02tech/studyactionscript, tool

Flash Text Layout Framework 2

引き続きFlash テキストレイアウトフレームワークの使い方を調べています。前回はCore ComponentとConversion Componentを扱いました。今回は3つめのEdit Componentを使っていきたいと思います。・The Text Layout Edit Component (textLayout_edit.swc) Edit ComponentにはSelectionManager、EditManager、UndoManagerという3つの管理クラスがあります。使…

2008-11-252008-11-28tech/studyactionscript, tool

Flash Text Layout Framework

Flash テキストレイアウトフレームワークのベータ版をすこし触ってみました。とりあえずActionScriptだけで制御するシンプルなものから。 Text Layout Framework Overview(pdf)を読みながら手探りで少しずつ試していきます。まず、Text Layout Framework – Adobe LabsのDownload the Text Layout Frameworkからダウンロード。フォルダのlibsに入っている、textLayout_~.…

2008-11-252014-05-02tech/studyactionscript, algorithm, computervision

誤差拡散法 – AS3.0

誤差拡散法。前回紹介したディザ法と同じく疑似階調表現アルゴリズムのひとつです。こちらはディザ法よりも一般的に品質が良いとされています。誤差拡散法の基本的な考え方は、減色処理によって生じた誤差を近傍の画素に拡散させ、画像全体としての誤差を最小にしようとする手法になります。フルカラー画像を限定されたカラーパレットで表現された画像への変換を行う場合、元の色に最も近い色をパレット内から選び出し、その色に変換していくことで減色処理を行います。この変換を行う時に、元の色がパレット内に存在しない限り誤…

2008-11-242014-05-02tech/studyactionscript, algorithm, computervision

ディザ法 – AS3.0

新聞は基本的に黒インクのみを用いて印刷されています。そのため使える色は白と黒だけのはずですが、記事中の写真などではグレーの色も確認できます。実際に写真部分をよく見てもらえるとわかると思いますが、グレーの部分では網目状の点で構成されています。このように実際に使用している色は少なくても、その密度を変化させることによって多くの色を使っていると見せかけることができ、これを疑似階調表現といいます。疑似階調表現を実現する方法としてディザ法と呼ばれる方法があり、組織的(Ordered)ディザとランダム…

2008-11-222013-09-28tech/studyactionscript, algorithm, computervision

VTR調変換 – AS3.0

ByteArrayで画像処理~みたいな記事タイトルだと何してるかわからないので止めました；内容自体はその続きで、ByteArray内のバイナリデータを扱って画像処理をします。今回はVTR調変換。これは、ダビングや経年などで劣化したVTR映像のような効果を付加するものです。 Photoshopのプラグインでも提供されていますね。前回作ったIplImageクラスを利用していきます。

// thick:走査線の太さ、contrast:走査線の明るさ、ghost:画像のぶれ量
private function filterVTR(img:IplImage, thick:int, contrast:int, ghost:int):void {
  var f:Boolean = true;
  var r:int = 0, g:int = 0, b:int = 0;
  var i:int = 0, j:int = 0;
  
  for(var y:int=0;y&lt;img.height;y++){
    f = ((y%thick*2)&lt;thick) ? true : false;
    pos = img.widthStep*y;
    for(var x:int=0;x&lt;img.width;x++){
      i = pos + x*4, j = pos + (x + ghost)*4;
      r = (img.imageData[i + 1] + img.imageData[j + 1])/2;
      g = (img.imageData[i + 2] + img.imageData[j + 2])/2;
      b = (img.imageData[i + 3] + img.imageData[j + 3])/2;
      if(f){
        r += contrast;
        g += contrast;
        b += contrast;
      }
      img.imageData[i + 1] = r;
      img.imageData[i + 2] = g;
      img.imageData[i + 3] = b;
    }
  }
  gammaCorrect(img, 0.8);
}

private function gammaCorrect(img:IplImage, param:Number):void {
  var lut:Vector.&lt;int&gt; = new Vector.&lt;int&gt;(256, true);
  var gamma:Number = param;
  var len:int = img.imageData.length;

  for(var i:int=0;i&lt;256;i++){
    lut[i] = Math.pow(i/255.0, gamma)*255.0;
  }
  for(var n:int=0;n&lt;len;n+=4){
      img.imageData[n+1] = lut[img.imageData[n+1]];
      img.imageData[n+2] = lut[img.imageData[n+2]];
      img.imageData[n+3] = lut[img.imageData[n+3]];
  }
}

// thick:走査線の太さ、contrast:走査線の明るさ、ghost:画像のぶれ量

private function filterVTR(img:IplImage, thick:int, contrast:int, ghost:int):void {

var f:Boolean = true;

var r:int = 0, g:int = 0, b:int = 0;

var i:int = 0, j:int = 0;

for(var y:int=0;y<img.height;y++){

f = ((y%thick*2)<thick) ? true : false;

pos = img.widthStep*y;

for(var x:int=0;x<img.width;x++){

i = pos + x*4, j = pos + (x + ghost)*4;

r = (img.imageData[i + 1] + img.imageData[j + 1])/2;

g = (img.imageData[i + 2] + img.imageData[j + 2])/2;

b = (img.imageData[i + 3] + img.imageData[j + 3])/2;

if(f){

r += contrast;

g += contrast;

b += contrast;

}

img.imageData[i + 1] = r;

img.imageData[i + 2] = g;

img.imageData[i + 3] = b;

}

gammaCorrect(img, 0.8);

}

private function gammaCorrect(img:IplImage, param:Number):void {

var lut:Vector.<int> = new Vector.<int>(256, true);

var gamma:Number = param;

var len:int = img.imageData.length;

for(var i:int=0;i<256;i++){

lut[i] = Math.pow(i/255.0, gamma)*255.0;

}

for(var n:int=0;n<len;n+=4){

img.imageData[n+1] = lut[img.imageData[n+1]];

img.imageData[n+2] = lut[img.imageData[n+2]];

img.imageData[n+3] = lut[img.imageData[n+3]];

}

処理はこれだけ。↓のような結果が得られます(…

2008-11-212008-11-22tech/studyactionscript, c/c++, computervision

ByteArrayで画像処理入門

前回は画像ヘッダ(ppmフォーマット)について扱いました。これで前準備が終わり、実際の画像処理に取りかかることができます。ただその前に、画像に関する情報はまとめて管理しておくと便利かと思います。 ByteArrayに画像ヘッダ以外のデータ、つまり画像データ本体を格納することになるんですが、その画像データにアクセスする際にいくつかの画像に関する情報が必要です。なのでそれらの情報をどういう風にまとめようかと考えたんですが、ここではOpenCVで利用されているIplImage構造体に倣います。・…

2008-11-172008-11-27tech/studyactionscript, computervision

ByteArrayで画像処理入門以前 2

前回は画像フォーマットとしてraw画像を扱いました。このフォーマットだとデコードが必要ないのですぐに画像データにアクセスできましたが、画像サイズやビット深度などの情報がわからないので、あらかじめそれらの情報は既知であるものとしていました。そこで、今回はヘッダのあるフォーマットを扱うことにします。 ppm/pgm/pbm 画像 UNIXでは一般的な画像フォーマットです。 (参考：画像ファイルの扱い方 (2) -PPM/PGM/PBM形式 (1)) PPM形式(Portable PixMap f…

2008-11-152008-11-16tech/studyactionscript, computervision

ByteArrayで画像処理入門以前

画像データの扱い方についてのメモということで、”入門以前” としました。僕の場合はまずByteArrayについて調べるところから始めないと。。扱う画像についてカラー(RGB各チャンネル8ビット)のraw画像を扱います。 (RAW画像ではなくベタ画像の方) よって画像データは R0G0B0 R1G1B1 R2G2B2 ・・・の順で格納されているものとします。画像データの扱い ByteArray上の画像データを参照する場合、・画像の横幅 (width) ・1画素あた…