Processing で目で見る画像処理 - フィルタ

画像処理なんだから目で見るのはあたりめーだろ、というツッコミは心の中にしまい込みましょう。

本投稿はProcessing Advent Calendar 2013の22日目の記事です。
無理やりねじ込んでいただきましてその節はありがとうございました。
のこり3日、完走まであと一息ですね！

次のような作品を作りました。ぽちぽちクリックorドラッグしてみてください。

どうにも最初の描画がうまくいかんのですが...

https://www.openprocessing.org/sketch/125994

解説

というより備忘録。

作品について

右の各ボタンをクリックすると、ボタンに応じたフィルタ処理が施され、処理後のLennaさん画像が表示されます。Lennaさんの画像をクリック(orドラッグ)すると、x座標を横軸に取ったRGBそれぞれの色値のグラフが下部に表示されます。
画像処理を施したときの画像の変化と画素値の変化をビジュアルでわかりやすくするための作品です。

ボタンの種類は以下。

画像	種別	画像	種別
	元画像		エッジ抽出
	先鋭化		x軸微分
	平滑化		y軸微分

デジタル画像処理についてざっくりと

デジタル画像はx軸とy軸の空間における、RGBそれぞれの色値、アルファなどの多次元の信号から成る情報の集合です。

例えばこんな画像があったとして、

f:id:hoshi_sano:20131220153121p:plain

あるy座標に一本線を引きます。

f:id:hoshi_sano:20131220153136p:plain

上記の線分における色値の変化を、横軸:x座標、縦軸:色値でプロットすると

f:id:hoshi_sano:20131220153144p:plain

こんな感じになります。
y座標を変えると、

f:id:hoshi_sano:20131220153154p:plain f:id:hoshi_sano:20131220153159p:plain

こんな感じです。
画像をこのような波形に捉えると、周波数だのフーリエ変換だのといった信号処理の概念を応用できるようになるんですねー。

フィルタ処理についてざっくりと

で、デジタル信号処理には「フィルタ」という概念がありまして、特定の周波数成分を抽出したり、ノイズをカットしたり、という目的に利用されます。

画像処理におけるフィルタは次のような3x3(または5x5など)の配列で表現されます。

0	1	0
1	-4	1
0	1	0

このフィルタが意味するところは、対象の(x,y)座標のピクセルに対して、その周囲8ピクセルの重み付けを考慮して計算しましょう、というものです。

上の例だと、

after_C(x,y) =
  before_C(x-1, y-1) * 0 + before_C(x, y-1) *  1 + before_C(x+1, y-1) * 0 +
  before_C(x-1,   y) * 1 + before_C(x,   y) * -4 + before_C(x+1,   y) * 1 +
  before_C(x-1, y+1) * 0 + before_C(x, y-1) *  1 + before_C(x+1, y+1) * 0

# before_C(x,y): フィルタ処理前の(x,y)座標のピクセルの色
# after_C(x,y): フィルタ処理後の(x,y)座標のピクセルの色

で、(x,y)座標のピクセルの色を計算することができます。