사진을 Atkinson 디더링으로 변환

• 사진을 고전 Macintosh의 1비트 필터 스타일로 바꿔, 흑백 픽셀만으로 Atkinson dithering 효과를 적용함
• 각 픽셀은 50% 회색을 기준으로 검정 또는 흰색이 되며, 변환 오차가 주변 픽셀로 퍼짐
• 오차는 현재 픽셀 주변 6개 위치에 각각 1/8씩 분배되어 특유의 질감 있는 흑백 이미지를 만듦
• 결과 이미지는 우클릭 저장은 가능하지만, 브라우저 제한으로 데스크톱에 드래그해 저장할 수는 없음
• 구현에는 Canvas, Drag and Drop events, WebWorkers, FileReader API가 쓰이며 최신 브라우저가 필요함

---

Atkinson dithering 처리 방식

• 이 구현은 Hyperdither와 HyperScan에서 사용된 고전 Macintosh 1비트 필터를 재현함
• 처리 과정은 각 픽셀을 50% 회색과 비교해 검정 또는 흰색으로 바꾸는 구조임
• 변환하면서 생긴 입력값과 출력값의 차이는 주변 픽셀에 분산됨
  • 현재 픽셀 X의 오른쪽 2개 위치에 각각 1/8
  • 다음 줄의 왼쪽부터 3개 위치에 각각 1/8
  • 그다음 줄의 왼쪽 1개 위치에 1/8

데모 사용과 브라우저 요구사항

• 렌더링된 이미지는 우클릭으로 저장할 수 있음
• 브라우저 제한 때문에 이미지를 데스크톱으로 드래그 저장할 수는 없음
• 코드는 Canvas, Drag and Drop events, WebWorkers, FileReader API를 사용함
• 실행하려면 최신 브라우저가 필요함

[GN⁺]

Hacker News 의견들

• 여전히 내가 가장 좋아하는 흑백 디더링 알고리즘임
  대학에 Mac에 연결된 흑백 평판 스캐너가 있었고, 아마 HyperCard 스택으로 이미지를 스캔해 흑백 이미지로 만들 수 있었음
  1988년쯤 Mac 셰어웨어 게임을 만들기 시작했을 때, 대학 서점에서 산 클립아트 책을 빠르게 스캔해서 “로고”로 썼음
  당시에는 Atkinson 알고리즘이 얼마나 괜찮은지 몰랐지만, 나중에 다른 알고리즘으로 디더링을 해보니 Bill의 코드에서 확산이 얼마나 잘 되는지 알게 됐음
  최근에는 eInk 달력 프로젝트를 만들다가 여러 위상의 달 사진을 “Atkinson풍” 이미지 시리즈로 만들고 싶어서, 링크된 것과 비슷한 사이트를 찾아 달 사진에 Atkinson 디더링을 적용했음 [1]
  [1] 스크린샷의 달 참고: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...

  • 정말 아름답다! Bill의 코드를 볼 수 있는 곳이 있으면 직접 만져보면서 배워보고 싶음

• 정보 대화상자의 “as follows”는 누르지 않는 게 좋음
  한동안 업데이트가 안 된 듯하고, 그 사이 링크가 NSFW가 됐음

  • 사이트 만든 사람이 이 스레드를 보거나 알게 된다는 보장은 없으니, 가능하면 알려주는 게 좋음
    방금 이슈로 알려뒀음: https://github.com/gazs/canvas-atkinson-dither/issues/2

• 구현이 훌륭하고, 앵커의 download 속성에 값을 넘겨 다운로드 파일에 기본 이름과 .png 확장자를 주면 조금 더 좋아질 수 있음
  참고: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

  • 변호하자면, 링크에 따르면 그 속성은 브라우저에서 2017년 3월부터 지원됐고[1], 이 디더링 도구 저장소의 최신 커밋은 보기에 2016년 3월임
    https://github.com/gazs/canvas-atkinson-dither
    그래도 다른 저장소에서는 GitHub 활동을 계속하고 있으니, 풀 리퀘스트를 받아줄지도 모름 :)
    [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

• 왜 Sierra 디더링은 아니지?
  https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

  • 원래는 초기 Mac에 대한 향수였고, Bill Atkinson이 막 세상을 떠나서 다시 떠오른 것 같음

• 여러 이미지를 MacPaint로 변환해 400k MFS 포맷 디스크 이미지에 넣을 수 있게 해주는 걸 틈틈이 만들고 있음
  https://github.com/minorbug/mfsjs
  이 프로젝트는 몇 달째 홈 디렉터리에서 살짝 먼지만 쌓이고 있음
  Gemini Deep Research로 라이브러리 제작에 도움을 받았고, 다른 언어로 재현하거나 개선하고 싶은 사람을 위해 LLM이 생성한 Markdown도 포함해뒀음

  • “MacPaint 이미지는 576 x 720 픽셀 해상도의 고정 형식”이라고 되어 있는데, 정말 고정 형식이었나?
    Wikipedia에도 그렇게 쓰여 있지만 출처가 없음

• 이 구현은 훌륭하고 인터페이스도 추억을 불러옴
  오늘 내 Atkinson 디더링 웹 컴포넌트[0]에 조회수가 왜 늘었나 했는데, 슬픈 소식 때문이었음
  원래 Mac 같은 아주 선명한 모니터에서는 Atkinson 디더링이 가장 보기 좋은 이미지를 만든다고 늘 생각했음
  뭔가 멋지고 80년대 느낌이 나서 작년 게임에도 썼음
  [0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...

  • Retina 화면에서 픽셀 단위로 디더링하는 건 꽤 독특함
    어떤 사진에는 스타일이 꽤 잘 맞고, 어떤 사진에는 그렇지 않음
    이상하게 현대적인 옛날 느낌이 나고, 실제 옛 사진처럼 개별 점들이 거슬리지는 않음

• Python으로 해보고 싶다면 hyperdither가 있음
  https://github.com/tgray/hyperdither

  • 스크롤할 때 README의 이미지들이 갈색으로 변함

• eInk/ePaper 기기에 아주 잘 맞을 것 같음

• 오늘 세상을 떠난 그 Atkinson과 같은 사람이고, 이건 추모인가?

  • 어느 정도는 그렇지만, 저장소의 첫 커밋이 15년 전이라 뉴스에 맞춰 급히 만든 것은 아님
  • 맞음, 그가 이 알고리즘을 발명했음
    아마 추모가 맞을 것 같음
    “발견”이 아니라 “발명”으로 정정함. 아래 참고

• 그 알고리즘을 조금 더 배우고 싶어서 https://atkinson.franzai.com/를 만들었음
  몇몇 AI로 다시 확인했으니 사실관계가 맞기를 바람