疑似カラー
2010/04/20 20:43 - AS3.0
こないだ、新宿紀伊國屋書店で「ディジタル画像処理」という本を見つけました。
この本は(財)画像情報教育振興協会(CG-ARTS協会)によるCG検定の公式書籍で、その名のとおりコンピュータによる画像処理を網羅的に扱った、つまりは教科書ですねー。
フルカラーかつ画像が豊富。何か面白げ&分かりやすそうだったんで、思わず衝動買いしちゃいました。
今回はその本から仕入れた知識で「疑似カラー」なるものについての話。
疑似カラーというのは、グレイスケール画像をフルカラー画像にするものだそうです。
といっても色を復元するものではない。
RGB 各チャンネルごとに、グレイスケールの濃度値に対応したトーンカーブを用意する。 そのトーンカーブは任意に異なるものとし、そのようなトーンカーブを適用することで、モノクロ画像に色がつく。 それを疑似カラーと呼ぶとのこと。
具体的な事例として、以下のような図がP98に掲載されています。

このようなトーンカーブの場合、入力画像のグレイスケール濃度と出力画像の色が、下段のカラーバーのような対応になるとのこと。 黒い部分は青くなり、白い部分は赤くなる。中間の灰色は緑になる、という具合に色がつく、という寸法らしい。
で、実際にどういう見栄えのカラー画像になるかというと、現行の第5世代 iPod nano、ビデオが撮れるやつですが、それのビデオエフェクト「サーモグラフィー」のような感じになります。 iPod の「サーモグラフィー」トーンカーブは各色の山と谷を複数回繰り返しているようですが。
じゃあこれを今まで各種画像処理で学習してきたように、独立したエフェクタクラスとしてみようじゃないの、というのが今回のテーマ。
RGB のチャンネルに応じて入力画像の色を変える、となると使うメソッドはアレしかない。 そう。BitmapData.paletteMap ですね。 以前、減色エフェクタを作る際に使用したメソッドです。
ところでこの疑似カラー、すでに wonderfl で実装なさっている方がいらっしゃいました。 minon さんの「グラデーションマップっぽい」というのがそれです。
で、そのコードを拝見してまたひとつ賢くなりましたよ!
paletteMap の第4、5、6 引数の Array ですが、その当該チャンネルにしか影響を及ぼさないものだとばかり思ってましたが、それは間違いであるということを知りました。
たとえば、第4引数の Array の要素は入力画像の赤チャンネルのみに関わり、それ以外のチャンネルには一切ノータッチなんだろうと考えていたんですが、実は全然そんなことなかったんですねぇ。
今回のような場合、以下のように Array を3つ設定して、それぞれ第4、5、6引数に割り当てなければ、思ったとおりの結果が出ないんだとばかり思ってました。
赤チャンネル用に [0x00, 0x00, 0x00, ……, 0xFF, 0xFF, 0xFF]
緑チャンネル用に [0x00, 0x03, 0x07, ……, 0x07, 0x03, 0x00]
青チャンネル用に [0xFF, 0xFF, 0xFF, ……, 0x00, 0x00, 0x00]
(配列の要素は各チャンネルにあわせてビットシフトする必要あり)
もちろん、これも期待した結果になるんですが、実は Array 1つでも同じ結果を導くことができる、ということを今回初めて知りました。
[0x0000FF,0x0003FF, 0x0007FF, ……, 0xFF0700, 0xFF0300, 0xFF0000] という Array をひとつ設定して、それを第4引数(赤チャンネル)に割り当て、第5、6引数は共に [] にしても同じ結果になります。 第4じゃなくて、第5もしくは第6でも同じ結果でした(第4、5、6、どこでも同じなのは入力画像がグレイスケールだからでしょうが、仮に入力画像がカラーでも、結果はそんなに大幅に変わりませんでした)。
うーんそうだったのかー。日々勉強ですねぇ。
で、今回の結果を wonderfl に投稿しました。それが↓
ところで先ほど、paletteMap 用配列は云々と要素列挙しましたが、実装は若干違います。HSV の色相環を使っています。 HSV の H を 0 ~ 255 まで変えたものの RGB 値を Array に格納し、最後に Array.reverse で反転するということをしています。
それに関しては以下を参考にさせていただきました。