01
쓸 색을 먼저 고릅니다.
사진에는 수만 가지 색이 있지만 도트 그림은 16~32색으로 그립니다. 어떤 색을 남길지는 k-means++ 방식으로 사진에서 직접 뽑고, 두 색이 비슷한지 판단할 때는 RGB 대신 OKLab 좌표계에서 거리를 잽니다. 사람이 느끼는 색 차이에 더 가깝기 때문입니다.
IMAGE → PIXEL ART · LOCAL ONLY
사진을 픽셀 아트로
이미지를 올리고 컨셉 하나만 고르세요. 결과는 브라우저에서 바로 만들고 PNG로 저장합니다.
1
현재 · 클린컨셉 선택
세부 설정 없이 사진에 맞는 분위기만 선택하면 됩니다.
이 데모에 대하여
사진이 도트로 바뀌는 과정
올린 사진은 서버로 전송되지 않습니다. 쓸 색을 고르고, 팔레트에 없는 색을 점으로 메우고, 확대해 PNG로 저장하는 과정이 모두 브라우저 안에서 끝납니다.
- 컨셉(인물 · 풍경 · 레트로 · 클린) 하나를 고릅니다. 세부 설정은 컨셉에 맞춰 한꺼번에 바뀝니다.
- 사진을 클릭 · 드래그 앤 드롭 · 붙여넣기(Ctrl+V) 중 편한 방법으로 올립니다.
- 원본과 결과 사이의 비교선을 움직이고, 네 컨셉을 바꿔 가장 잘 맞는 결과를 고릅니다.
- PNG로 저장합니다. 도트 한 칸이 기본 8배로 확대돼 저장되므로 화면에서 칸이 뭉개지지 않습니다.
도트 그림이 되는 세 단계
02
없는 색은 점을 흩어 만듭니다.
팔레트에 없는 중간색은 디더링으로 표현합니다. Floyd–Steinberg와 Atkinson은 담지 못한 오차를 옆 픽셀로 넘기는 방식이라 자연스럽고, Bayer는 4×4 격자의 문턱값을 쓰는 방식이라 규칙적인 무늬가 남아 레트로한 느낌이 납니다. ‘클린’ 컨셉은 디더링을 아예 끕니다.
03
무거운 계산은 따로 돌립니다.
픽셀 수만큼 반복하는 계산이라 그대로 실행하면 화면이 멈춥니다. 그래서 변환은 Web Worker로 옮겨 별도 스레드에서 처리하고, 그동안에도 설정을 계속 만질 수 있게 했습니다.
브라우저 안에서만 처리합니다.
선택한 파일은 서버로 올라가지 않고 브라우저 메모리에서 처리되며, 사이트는 원본도 결과물도 보관하지 않습니다. 입력은 20MB · 40MP 이하만 받습니다. 결과는 원본 해상도가 아니라 컨셉에 따라 가로 64~160칸의 도트 격자로 줄인 그림을 다시 확대한 것입니다. 현재 화면은 개별 수치를 조절하거나 사진을 자르는 편집기가 아니므로, 필요한 경우 원본을 먼저 잘라 두세요. 아주 작은 글씨나 가는 선은 되살아나지 않습니다.
참고 자료OKLab 색 공간 (Björn Ottosson) ↗W3C CSS Color 4 ↗MDN — Canvas getImageData ↗MDN — Web Workers API ↗
실험을 마쳤다면