ConvolutionFilter는 주변픽셀의 색(RGBA채널)을 이용하여 각 픽셀의 색을 변경하는 필터입니다.

 

digital image processing에서 모든 채널을 포함한 pixel brightness값이 주위에 분포된 pixel 값들을 
기준으로 다시 계산되는 방식을 convolution 이라고 합니다. convolution 적용되는 룰이 바로 matrix 
의해 결정되기 때문에 통상 matrix 사용하여 여러가지 효과를 얻어내는 image processing convolution 이라 칭하고 convolution 이용하는 filter 보통 custom filter라고 부릅니다

 

40*0 + 42*1 + 46*0 +……. +75*0 = 42

50이 변화 대상 픽셀이고 주변 픽셀의 값과 matrix와 곱한 합인 42가 변화대상의 픽셀의 값이 됩니다.

원래 는 픽셀의 모든 채널(RGBA)에 적용해야 하지만 이해를 돕기 위해 채널 중에 하나만을 예시로 들었습니다.

 

보통 마스크로 사용하는 matrix의 총합을 divisor값으로 사용합니다.

 

ColorTransform은 적절한 계수를 이용하여 각 픽셀에 동일한 연산을 수행하지만 ConvolutionFilter는 변경 대상 픽셀에 임의의 Matrix(가중치)를 이용하여 주변 픽셀의 색상 의 색상을 모두 더한 뒤 반영합니다.

 

ConvolutionFilter에 사용하는 Matrix는 일반적으로 수학에서 사용하는 Matrix와 다릅니다.

Matrix라는 용어 대신 Kernel이란 용어를 쓰기도 합니다.

 

일반적인 구문은 다음과 같습니다.

ConvolutionFilter(matrixX:Number=0, matrixY:Number=0,matrix:Array=null,divisor:Number=1.0)

 

matrixX, matrixY : matrix의 m(행), n(열)을 나타냅니다

matrix: 가중치로 사용할 1차원배열로 (matrixX * matrixY) 배열의 중심이 변경대상픽셀과 매칭됩니다.

divisor: matrix를 이용하여 주변픽셀을 더한 값을 나눈 값으로 변경대상픽셀에 적용합니다.

 

 

참고)

디폴트 Matrix 원본 이미지에 아무 영향을 미치지 않습니다.

0 0 0
0 1 0      =>  [0,0,0,0,1,0,0,0,0]    형렬표기방법은 좌측과 같이 열단위로 끊어서 작성한다.
0 0 0 


Brightness 효과

 

0, 0, 0

0, 2, 0

0, 0, 0

 

1차원배열로는 [ 0, 0, 0, 0, 2, 0, 0, 0, 0]이 됩니다.

 

 

배열의 중심(변경 대상픽셀과 매칭이 되는)인 2외에 모두 0이므로 주변 픽셀은 0과의 곱셈이 되어 무시되게 되고 변경 대상이 되는 픽셀의 색에만 2를 곱하게 됩니다.

Divisor가 1일 때

R * 2 << 16 + G *2 <<8 + B*2

 

픽셀의 색상이 0x333399이라면 RGB성분에 2를 곱한 결과값인 0x6666FF이 됩니다.

As3에서 제공하는 ColorTransform으로 코드를 작성해보면:

 

var color:ColorTransform = new ColorTransform();

color.redOffset = 0x33 * 2;

color.greenOffset = 0x33 *2;

color.blueOffset = 0x99*2;

trace(color.color.toString(16));

 

내부적으로 픽셀마다 저러한 계산을 하게되겠죠.

 

결국 변경대상 픽셀의 brightness가 높아지는 결과가 생깁니다.

이미지를 가지고 직접 결과를 보도록 하겠습니다.

 

var filter = new ConvolutionFilter(3, 3, [0,0,0,0,2,0,0,0,0], 1);

lenna.filters = [filter];

 

 

 

이번에는 좀 더 복잡한 matrix를 가지고 적용해보겠습니다.

Matrix의 모든 성분이 1인 단순한 blur 알고리즘(Average)을 적용해 보죠. Box blur 필터라고도 합니다.

var filter = new ConvolutionFilter(3, 3, [1,1,1, 1,1,1, 1,1,1], 9);

lenna.filters = [filter];

 

좀더 matrix를 확장해서 5x5로 해보면 어떨까요? 좀더 강한 blur가 적용되는군요.

var filter = new ConvolutionFilter(5, 5, [1,1,1,1,1, 1,1,1,1,1, 1,1,1,1,1, 1,1,1,1,1, 1,1,1,1,1], 25);

lenna.filters = [filter];

혹은 아래와 같이 십자형태로 값을 넣어볼까요?

var matrix = [    

                 0, 0, 1, 0, 0,

                0, 0, 1, 0, 0,

                1, 1, 1, 1, 1,

                0, 0, 1, 0, 0,

                0, 0, 1, 0, 0,

            ];

var filter = new ConvolutionFilter(5, 5, matrix, 9);

lenna.filters = [filter];

 

응용해서 가로방향 블러효과

var filter = new ConvolutionFilter(1, 10, [1,1,1,1,1,1,1,1,1,1], 10);

lenna.filters = [filter];

 

내친김에 모션블러

var matrix = [    1, 0, 0, 0, 0, 0, 0, 0, 0,

        0, 1, 0, 0, 0, 0, 0, 0, 0,

        0, 0, 1, 0, 0, 0, 0, 0, 0,

        0, 0, 0, 1, 0, 0, 0, 0, 0,

        0, 0, 0, 0, 1, 0, 0, 0, 0,

        0, 0, 0, 0, 0, 1, 0, 0, 0,

        0, 0, 0, 0, 0, 0, 1, 0, 0,

        0, 0, 0, 0, 0, 0, 0, 1, 0,

        0, 0, 0, 0, 0, 0, 0, 0, 1

    ];

 

 

var filter = new ConvolutionFilter(9, 9, matrix, 9);

lenna.filters = [filter];

 

Gaussian Blur


수학자 가우스(Gauss) 창안한 곡선 방정식에의해 계산된 곡선값에의해 움직입니다. 가우스 곡선이라고 불리우는 수의 공식에 따라 Blur효과를 적용시킵니다.

 

분포의 그래프는 모양이구요

 

   

계산식처럼 무척 복잡하기 때문에 시간 단축을 위해 가우시안 분포함수로부터 얻은 값을 마스크(matrix혹은 kernel) 테이블로 작성해서 사용하게 됩니다.

 

마스크 내의 값의 합을 divisor로 나눴을 때 1이 됩니다.

var filter = new ConvolutionFilter(5, 5, [1, 4, 7, 4, 1, 4, 16, 26, 16, 4, 7, 26, 41, 26, 7, 4, 16, 26, 16, 4, 1, 4, 7, 4, 1 ], 273);

lenna.filters = [filter];

 

필터의 적용은 x, y 방면으로 나누어서 해도 됩니다.

var filter_x = new ConvolutionFilter(1, 5, [1, 5, 10, 5, 1], 22);

var filter_y = new ConvolutionFilter(5, 1, [1, 5, 10, 5, 1],22);

 

lenna.filters = [filter_x,filter_y];

 

끝으로 저번에 테스트 해본 gradiant를 사용해서 가우션 블러를 적용해보는 예제를 끝으로 두서없는 급하게 마무리합니다.

 

// lenna라는 인스턴스명으로 stage에 놓여있다.

var filter = new ConvolutionFilter(5, 5, [1, 4, 7, 4, 1, 4, 16, 26, 16, 4, 7, 26, 41, 26, 7, 4, 16, 26, 16, 4, 1, 4, 7, 4, 1 ], 273);

 

var lennaBd = new BitmapData(lenna.width, lenna.height);

lennaBd.draw(lenna);

var lennaClone = new Bitmap(lennaBd);

addChild(lennaClone);

var t = getTimer();

lennaClone.filters = [filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter,filter];

var lennaMask = new Sprite();

var mat = new Matrix();

mat.createGradientBox(lenna.width, lenna.height, Math.PI/2, 0, 0);

lennaMask.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF,0x0, 0x0], [0, 1, 1], [0, 82, 255], mat);

lennaMask.graphics.drawRect(0, 0, lenna.width,lenna.height);

lennaMask.cacheAsBitmap = true;

lennaClone.cacheAsBitmap = true;

lennaClone.mask = lennaMask;

 

addChild(lennaMask);

http://www.catenary.com/howto/gaussian.html

http://homepages.inf.ed.ac.uk/rbf/HIPR2/gsmooth.htm

http://www.php.net/manual/kr/function.imageconvolution.php

http://www.gamerendering.com/2008/10/11/gaussian-blur-filter-shader/

http://vkr9999.springnote.com/pages/2881694

http://kin.naver.com/detail/detail.php?d1id=11&dir_id=1111&eid=T9Kacpvt70HnKZEmel0J8rrStz10gTex&qb=sKG/7L3Dvsgguu23rw==&enc=euc-kr&section=kin&rank=18&sort=0&spq=0

http://samtaegi.springnote.com/pages/1497184/attachments/649672

http://www.gamedev.net/reference/programming/features/imageproc/page2.asp

 

사진의 주인공 레나

레나(Lenna 또는 Lena) 플레이보이 잡지 1972 11월자의 센터폴드 실린 스웨덴 누드 모델 레나 쇠데르베리(1951 3 31 - ) 사진의 일부분을 말한다.

얼굴과 어깨만 취한 그림 파일은 모든 종류의 영상 처리 알고리즘(영상 압축,영상 노이즈 제거 ) 관련 과학적 출판물에서 시험용 이미지 가장 널리 쓰인다. 실제로 대부분의 영상처리, 신호처리 교과서에는 레나의 사진을 이용한 결과 비교가 나온다. 일부에서는 사진이 외설스러운 것이며, 한때 플레이보이가 사진을 사용하는데 저작권을 행사하려 적이 있다며 반감을 가지기도 한다. 실제로 플레이보이는 저작권 소송을 하려 했었지만 뒤에 이를 철회했다.

1996 1월판 IEEE Transactions on Image Processing 편집장이던 David C. Munson 레나 사진을 영상처리에 널리 사용하는 이유에 대해 다음과 같이 밝혔다.

먼저, 레나 이미지는 세밀함과 평면, 그림자, 그리고 질감이 적절하게 조화되어 있어서 다양한 이미지 처리 알고리즘을 처리하는 좋다. 이미지는 정말 좋은 시험용 이미지이다! 둘째로, 레나 이미지는 매력적인 여성의 사진이다. 그러므로 이미지 처리 연구 분야 종사자들이 그들이 매력적이라 생각하는 이미지에 끌리는 것은, 별로 놀라울 없다. 왜냐하면 이들은 대다수가 남자이기 때문이다.

사진의 실제 주인공인 레나 쇠데르베리는 1997 50th annual Conference of the Society for Imaging Science in Technology 게스트로 초대받았다.

한편 플레이보이에 따르면 레나를 등장시켰던 잡지는 2006 5월까지 가장 많이 팔린 기록(7,161,561) 가지고 있다고 한다.

 

여기에 가면 원본사진을 볼 수 있습니다. 19금

http://www.cs.cmu.edu/~chuck/lennapg/lenna.shtml

 

Posted by 기남

댓글을 달아 주세요

  1. 붕대마음 2016.10.29 21:16 신고  댓글주소  수정/삭제  댓글쓰기

    convolution filter을 이해하는데 많은 도움이 되었습니다. 감사합니다. ^^