기획자 본인만큼 잡다한 블로그

greentec.egloos.com

포토로그




Reddit Logo Generator 프로그래밍



내가 자주 가는 subreddit 인 r/proceduralgeneration 에서는 매 달 challenge 를 개최해서 유저들의 참여를 독려한다. 지금까지 재미있는 challenge 들이 많이 나왔는데, 이번에는 특히 이 subreddit 의 로고를 만드는 challenge 가 나왔다. 제한 조건은 다음과 같다.

- reddit 글씨가 들어가야 함 + some art
- 가로:세로 비율은 3:1. 120 * 40 px 로 보일 것이기 때문.
- 오픈 소스. 설치 / 실행이 쉬울 것
-- 물론 코드를 올리는 대신에 많은 양의 로고 이미지 파일을 만들어서 업로드해도 됨
- 매일 새로운 이미지여야 함

이걸 보고 예전에 codepen.io 와 이 subreddit 에 올렸던 Watercolor 가 생각났다. 처음에 몇 개의 픽셀로 이루어진 이미지로 시작해서, 각 픽셀 사이에 중간값을 채우는 식으로 자연스럽게 연결되는 수채화물감 같은 이미지를 만드는 작은 프로그램이다. 내가 독창적으로 생각했던 것은 아니고, 이미지 생성에 참조했던 것은 다른 글이었다. 지금은 링크를 못 찾겠다... 원래는 이 블로그포스트를 보고 따라하려고 했지만 KTX 에서 작업해서 그런지 집중이 되질 않아서 잘 되지 않았다.

원리는 다음과 같다. 처음에 적은 수 - 여기서는 25개 - 의 픽셀에 랜덤한 컬러 값을 지정한다.



그리고 그 후 각 사이값에 적절한 값을 채워넣는다.



적절한 값을 채워넣는 알고리즘은 코드에도 있지만 풀어서 설명하면 다음과 같다.

1. 모든 픽셀의 좌표에 2를 곱해준다.




2. 위에서 부터 3 x 3 의 9개 픽셀을 선택. corner 4 개의 픽셀은 변하지 않는 값으로 두고, 새로 생성되는 빈 픽셀들에 대해서 다음과 같은 규칙으로 픽셀의 RGB 값을 지정한다.
- R, G, B 각각에 대해서 반복
-- corner 4개 픽셀의 average 값 계산
-- edge의 4개 픽셀은 인접한 픽셀 중 한 개의 (RGB 값 + average) / 2 의 RGB 값을 갖는다.
-- center의 1개 픽셀은 corner 4개 픽셀 중 하나의 값을 갖는다. (R, G, B 에서 같은 corner 픽셀이 선택될 확률은 낮기 때문에 center 픽셀은 각 corner 가 어느 정도 섞인 픽셀이 된다)




이후로는 이 과정의 반복이다. 생성되는 픽셀의 수가 타겟 이미지의 픽셀 수와 같아지게 되면 그럴듯한 이미지가 나온다.




이제 이 이미지를 배경으로 reddit logo generator 를 만들려고 보니... 2가지 문제가 있었다.
1. 레딧 로고니까 레딧 마스코트 로봇을 그려주는 게 좋을 것 같다.
2. 매일 다른 이미지가 생성되어야 한다.

1번은 일단 svg 파일을 찾아서, 그것을 통째로 복사하는 식으로 접근했다. 그 다음에 svg 를 canvas 에 그리려고 보니 svg 에 custom tag 들이 많이 붙어 있어서 에러가 나는 것을 발견하지 못해서 1시간쯤 헤맸다. custom tag 들을 열심히 제거하고 나니 svg 를 canvas 에 그릴 수 있어서, 최종 이미지에 로봇이 포함될 수 있었다.

2번은 원래 WaterColor 버전에는 random seed 가 없었다. 그래서 매일의 year, month, day 로 random seed 를 구성하도록 접근해서 해결했다. 이것도 seed 에 숫자를 보내야 하는데 date 문자를 그대로 보내는 바람에 버그가 생겨서 1시간쯤 헤맨 것 같다.

어쨌든 이 2가지의 난관을 극복하니 로고 제너레이터를 완성할 수 있었다. 언젠가는 내가 만든 이 로고가 proceduralgeneration subreddit 메인에 걸리면 좋겠다.


핑백

덧글

댓글 입력 영역

애드센스