[ WPF ] Word Cloud

Word Cloud 는

어떤 데이터에 포함된 단어들의 빈도수를 시각적으로 표현해 주는 것을 말합니다.

 

data visualization ( 데이터 시각화 ) 의 한 방법으로

보통 키워드 ( 단어/텍스트 ) 들을 어떠한 공간이나 형태에 랜덤하게 배치해 줌으로써 시각화 되어집니다.

 

이런 Word Cloud 처럼

텍스트들을 어떠한 형태로 배치해야 하는 일이 있어, 

테스트 해보기 위해 프로토 타입으로 작성했던 프로그램과 

나름 여러가지 테스트와 고민을 통해 얻게 된 내용에 대해 포스팅합니다.

 

프로그램은 다음과 같은 작업을 합니다. 

반복횟수, 최대 폰트 사이즈, 최소 폰트 사이즈, 회전, 폰트 효과, 폰트를 설정할 수 있고,

이미지를 불러들여 입력된 텍스트들을 그 형태에 맞게 그립니다.

 

 

다음과 같은 결과물을 얻을 수 있습니다.

 

 

 

 

 

 

초기에 다음과 같은 알고리즘으로 시작하였습니다. 

 

1. 영역을 나눈다.

3. 영역마다 다음을 수행한다.

2. 영역 범위안의 랜덤한 위치에 최소, 최대 폰트 사이즈 사이의 텍스트를 생성한다.

4. 다른 텍스트와 겹치지 않는지 확인한다.

5. 겹치는 횟수가 정해진 카운트 값을 초과하지 않을 때까지 반복한다.

 

 

 

하지만 다음과 같은 단점들이 있었습니다.

 

1. 영역을 나누기 위해서는 이진화 이미지가 필요하다.

2. 영역을 나누기가 쉽지 않다. ( 영상처리가 필요하다. )

3. 정밀성을 높이기 위해서는 카운트 횟수가 많아야 한다.

4. 카운트 횟수가 높을 수록 소요시간이 너무 길어진다.

5. 폰트 사이즈가 크면 이질감 있게 보인다.

 

이런 단점들을 보완하기 위해 여러 테스트와 리서치를 진행했고, 

processing 으로 작성되어 있는  Scattered Letters 를 통해 방향을 잡게 되었습니다.

폰트 사이즈를 랜덤하게 생성하는 것이 아닌 최대 폰트 사이즈에서 최소 폰트 사이즈까지

점차 줄여가야 함을 알게 되었습니다.

 

현재는 다음과 같은 알고리즘을 사용하고 있습니다.

 

1. 텍스트가 그려질 영역 정보를 설정한다. ( default : 현재 이미지 영역  )

2. 원본 이미지와 동일한 사이즈의 빈 이미지를 2개 생성한다. ( result, temp )

3. 영역 마다 다음을 수행한다.

4. 현재 폰트 사이즈를 현재 영역의 최대 폰트 사이즈로 설정한다.

5. 현재 폰트 사이즈가 영역의 최소 폰트 사이즈 보다 클 동안 다음을 반복한다. ( 현재 폰트 사이즈를 줄여간다. )

6. 현재 폰트 사이즈의 텍스트를 생성한다. ( rotation 옵션 )

7. 성공할 때까지 정해진 반복횟수만큼 다음을 시도한다.

8. 현재 영역안에서 텍스트가 그려질 위치를 설정한다.

9. 텍스트가 그려질 영역에 해당하는 원본 이미지 픽셀에서 다음을 확인한다.

10. 흰색인지 확인한다. ( 흰색이면 fail )

11. 텍스트가 그려질 영역의 중심점 픽셀과 픽셀들을 비교한다. ( 차이가 10보다 크면 fail, 영역이 다른 것으로 간주 )

12. 9, 10 번이 성공하면 텍스트를 이미지화 시켜 픽셀 데이터를 생성한다. ( png )

13. 텍스트가 그려질 영역에 해당하는 temp 이미지 픽셀에서 텍스트 픽셀이 겹치지 않는지 확인한다. ( 겹치면 fail )

14. 겹치지 않으면 텍스트에 설정된 효과 ( Blur, Boundary, Stroke, None ) 를 적용하여 새로운 픽셀 데이터를 생성한다.

15. 새로운 픽셀 데이터는 temp 이미지에, 기존 텍스트 픽셀은 result 이미지에 그린다.

 

말이 길지만 간단하게 요약하자면,

 

텍스트가 그려질 영역 정보를 설정하는 건

좀 더 디테일 하게 그려져야 할 부분을 설정하기 위함입니다. ( 자동으로 찾으면 좋겠지만.. )

 

영역마다 설정된 최대 폰트 사이즈부터 폰트 최소 사이즈까지 줄여가며 텍스트를 채워갑니다. 

 

픽셀 값의 경계를 구분하기 위해 

텍스트가 그려질 위치의 중간 픽셀 과의 차이값을 이용했습니다. 

차이가 10정도 나면 다른 영역이라고 판단합니다.

 

텍스트의 여백을 설정하기 위해 Blur, Boundary, Stroke, None 이라는 타입을 설정했습니다.  

 

Blur 는 텍스트에 Blur 효과를 적용합니다.  

 

 

 

Stroke 는 텍스트에 Stroke를 설정합니다.  

 

 

 

Boundary 는 텍스트의 영역을 사용합니다. 

 

 

 

None 은 아무 효과도 사용하지 않습니다.

 

 

Blur 와 Stroke 는 텍스트 형태에 맞게 어느 정도 여백을 가집니다.

Boundary 는 텍스트의 외곽 안쪽 영역의 여백을 가집니다.

None 은 텍스트에 여백없이 빽빽하게 채워집니다.

 

각 결과물은 다음과 같습니다.

 

[ Blur ]

 

 

[ Stroke ]

 

 

[ Boundary ]

 

 

[ None ]

 

 

[ Rotation ]

 

 

[ 한글 ]

 

 

 

 

WordCloud.zip

WordCloud_exe.zip