덧글수0
비트맵 데이터에서 각 픽셀의 컬러값을 받아서 평균을 내서 팔레트를 만드는 작업은 예전에 툴로 만들었던 적이 있다.
라이브러리는 아래 사이트에서 가져와서 색깔을 가져오고 컬러 수와 Tolerance를 조절하는 기능 등만 추가해서 잘 쓰곤 했다. 아티스트가 주는 컨셉 원화의 색감을 빠르게 잡아내서 그 색을 이용한 PT나 기획서를 쓸 때 유용했다.
그런데 얼마 전 wonderfl.net 에서 재미있는 것을 발견했다. 바로 비트맵 데이터를 noise로 만든 다음에 각 픽셀마다 상하좌우의 1픽셀의 값을 평균 낸 값을 자기 픽셀 값으로 바꿔치기 하는 것이다. 마치 셀룰러 오토마타와 같은 이 작업의 결과가 놀랍게도 규칙성을 띠는 것을 확인할 수 있었다. (http://wonderfl.net/c/8jy4)
나는 4방향인 것을 대각선을 포함해서 8방향으로 바꾸고, BlendMode.ADD 를 사용해서 이미지의 움직임이 좀 더 연속적으로 보이도록 프로그램을 수정했다. (http://wonderfl.net/c/tLg3)
핵심 로직 코드는 아래와 같다.
var clone:Bitmap = new Bitmap(image.bitmapData.clone());
var bitmapdata:BitmapData = image.bitmapData;
for(var y:uint = 0; y < clone.height; y++)
{
for(var x:uint = 0; x < clone.width; x++)
{
clone.bitmapData.setPixel(x, y, (bitmapdata.getPixel(x, y - 1) + bitmapdata.getPixel(x, y + 1) + bitmapdata.getPixel(x + 1, y) + bitmapdata.getPixel(x - 1, y) + bitmapdata.getPixel(x - 1, y - 1) + bitmapdata.getPixel(x + 1, y + 1) + bitmapdata.getPixel(x + 1, y - 1) + bitmapdata.getPixel(x - 1, y + 1)) / 8)
}
}
image.bitmapData = clone.bitmapData.clone();
image.blendMode =BlendMode.ADD;
아래는 그 결과를 시간의 경과에 따라 정리해 본 것이다.
13 Generation : 아직 불규칙한 이미지로 보이지만, 가장자리가 희미하게 빛나기 시작한다.
47 Generation : 조금씩 규칙성이 눈에 들어온다. 가장자리가 더 진해졌다.
148 Generation : 규칙성이 좀 더 선명하게 보인다. 자연에서 볼 수 있는 등고선의 패턴을 닮았다.
1103 Generation : 가장자리가 점점 커지고 이미지들은 확연하게 단순화된다. 등고선이 점차 사라지고 커다란 면이 그 자리를 대체한다.
3317 Generation : 가운데는 점차 단순화되었지만 가장자리에 푸른색 원이 생겨난 것이 보인다. 자세히 보면 가운데에서도 원형의 무늬들이 생겨나고 있다.
6286 Generation : 이미지의 가운데 부분이 점점 원형에 가까워진다. 마치 고요한 수면에 작은 돌을 던져 파문이 일고 있는 듯하다.
8261 Generation : 이제 가운데는 거의 완전한 원이 되었다.
11055 Generation : 4개의 모서리에서 이미지가 재정렬되기 시작한다. 무슨 일이 일어나려는 것일까?
.
.
.
꽤 많은 시간이 지난 후에 이렇게 되었다(물론 이미지는 이 스크린샷을 찍는 순간에도 계속 변하고 있었다).
113262 Generation : 이미지는 완전히 정렬된 무언가가 되었다. 안에서는 수많은 원이 생성과 소멸을 반복한다. 이 이미지를 들여다보고 있는 것은 매우 즐겁고 이상한 기분을 들게 한다.
.
.
.
그리고 더 오랜 시간이 지나면 이미지는 서서히 소멸하기 시작한다.
픽셀값을 평균내는 과정에서 딱 떨어지지 않는 소수점 이하의 값들이 사라지는 것이 쌓여서 이런 결과를 만들어내는 것 같다. 픽셀의 컬러값은 점점 0에 가까워지고 활발하던 활동은 점점 사라져간다.
시끄러운 노이즈로 가득하던 계는 이제 점점 안정적인 상태가 된다.
단순히 픽셀의 평균값을 내는 것만으로 위와 같은 이미지를 만들어낼 수 있었다. 예전에 봤던 프랙탈 아트 프로그램 등이 생각난다. 그쪽도 관심이 있다가 예전에는 너무 어려워서 포기했었는데, 이제 조금씩 만져볼 수 있을 것 같다. 어쨌든 간단한 알고리즘으로 재미있는 이미지를 만들 수 있었다.
참고 링크
---------
1. BitmapData Average Colours : 맨 위의 툴을 만들 때 도움을 받았던 사이트이다.
최근 덧글