CODEONWORT

아스키 아트와 타이포그래피 아트 본문

Season 1/플래시

아스키 아트와 타이포그래피 아트

codeonwort 2016.12.02 08:48

가장 단순한 아스키 아트는 픽셀 밝기가 클 수록 밀도가 큰 글자와 매칭하는 것이다. 예를 들어 흰색 픽셀은 '#', 회색 픽셀은 'o', 검은 픽셀은 '.'로 대체하는 식의 단순 매핑으로도 그럴 듯한 아스키 아트가 만들어진다. 이 때 폰트는 고정 길이 폰트를 써야 한다.


ascii art에 대한 이미지 검색결과


조금 더 발전한 아스키 아트는 개체의 형태를 반영하는 글자를 사용한다. 아래의 아스키 아트는 가변 길이 폰트와 모양 매칭을 이용해 아인슈타인을 표현한다.


ascii art에 대한 이미지 검색결과


그리고 단순히 이미지를 글자의 배열로 바꾸는 것을 넘어선 타이포그래피 아트가 있다.


typography art에 대한 이미지 검색결과


typography art에 대한 이미지 검색결과


(지금까지의 그림 4장은 구글에서 검색한 것임)


타이포그래피 아트를 코딩으로 그릴 수 있을까? 위 예시들이 보여주는 엄청난 표현력까지는 아니더라도 코딩으로 그럴 듯한 아트를 생성하는 방법을 고민하고 있다. 색상을 기준으로 영역을 분리하고, 각 영역을 마스크로 써서 텍스트 뭉치를 그리는 것을 어떨까? 텍스트 뭉치는 임의의 유니코드들로 채울 수도 있고, 사용자가 지정한 글자 집합일 수도 있다.


디지털 영상 처리 교재를 훑어보니 Image Segmentation 장이 그런 내용인 것 같다. 내가 지금까지 코딩으로 배운 이미지 처리와 교재의 이론적 설명이 전혀 매치가 안 되어서 책을 이해하는 데 애를 먹고 있다. 책을 제대로 이해하면 이 방법으로 타이포그래피 아트를 그려보고 싶다.


아래의 그림들은 딱히 사려깊은 알고리즘 없이 되는 대로 타이포그래피 아트를 시도한 것이다.



임의 위치에서 픽셀 색깔을 얻고 크기, 회전을 무작위로 변형한 글자를 그리는 작업을 만 번 반복한다. 글자는 "독수리"에서 매번 무작위로 하나를 추출한다.



위 그림은 글자 집합을 "독수리" 대신 "판다"를 써서 그린 것이다.




독수리와 판다 그림을 생성하기 위해 만든 플래시. 폰트 하나를 통째로 포함해서 용량이 크다. (약 3MB) 사용할 글자 집합을 입력하고 이미지를 선택하면 위와 같은 그림을 그린다.

2 Comments
댓글쓰기 폼