convolution 필터를 구현할때 주의할 사항

최근에 convolution 필터를 구현할 일이 생겼다.

기본 원리는 학부때 많이 배워서 구글링을 하여 구현 방법을 습득후 p5.js로 구현하게 되었다.

물론 참고한 자료에서는 canvas를 사용하고 있었지만

p5.js가 나에겐 편한 라이브러리가 되었기에 캔버스 함수를 해석해서 p5.js로 고쳐짜기로 하였다.

그런데 아무리 해도 결과가 똑같이 나오지 않았다.

조금 비슷하게는 나오는데 에얼리어싱이 생기고 색도 안 맞았다.

도대체 어떤 부분이 잘못되었는지 2일동안 시간을 할애해서 수학식도 점검하고 코드도 디버깅 해보고 했지만 이상이 없었다.

그리고 마지막 3일날 오류를 찾게 되었는데,

원인은 기존의 캔버스 코드에서는 결과를 담을 이미지 배열을 따로 생성해주어

convolution한 값들을 새로운 이미지 배열에다 넣어주고 해당 이미지를 리턴하는식이었다.

하지만 내가 사용한 방법은 convolution된 값을 기존의 원본 이미지에 그냥 넣어주어 업데이트시키는 방법이었다.

이렇게 되면 계속해서 원본 이미지 배열의 픽셀값이 업데이트되고

그 업데이트된 값을 또 convolution할때의 값으로 사용해주게 되니까

결과의 오류가 있을수밖에 없었다.

간단한 오류였지만 지금까지 삽질한 시간을 생각할때 억울하기도 하다 ㅋ..

혹여 convolution을 구현하는 사람중에 이런 오류를 범할 사람이 있을까 글을 남겨본다.