▲

사진을 Atkinson 디더링으로 변환

 (gazs.github.io)
1P by GN⁺ 2일전 | ★ favorite | 댓글 1개
  • 이 프로젝트는 고전적인 Macintosh 1-bit 필터인 Atkinson Dithering을 웹에서 구현함
  • 입력 이미지를 50% 회색과 비교하여 흑백으로 변환하고, 차이를 이웃 픽셀로 분배함
  • Canvas, Drag & Drop, WebWorkers, FileReader와 같은 최신 브라우저 기술을 활용함
  • 변환된 이미지는 오른쪽 클릭 저장이 가능함
  • 이미지의 드래그 저장은 브라우저의 제한으로 지원되지 않음

오픈소스 프로젝트의 중요성 및 차별점

  • Atkinson Dithering은 Hyperdither와 HyperScan에서 사용된 클래식 Macintosh 그래픽 효과임
  • 복잡한 이미지 색상 정보를 픽셀 단위로 단순하게 변환하여, 경량 흑백 이미지 생성에 유용함
  • 웹 기반 구현으로 별도의 소프트웨어 없이 최신 브라우저만 있으면 사용 가능함
  • WebWorkers를 통해 대용량 이미지 처리 시 비동기 실행 및 성능 최적화가 가능함
  • 오픈소스 코드로 기능 확장 및 커스터마이징이 용이함

Atkinson Dithering 알고리듬 개요

  • 각 픽셀을 50% 그레이(회색) 값과 비교하여 흑백으로 변환함
  • 변환으로 인한 차이값을 다음과 같이 주변 6개 픽셀에 분배함
    (X: 현재 픽셀, 1/8씩 분배)
    • X 1/8 1/8
    • 1/8 1/8 1/8
    • 1/8
  • 이 방식으로 이미지 전체에 디더링 효과를 적용함

구현 및 사용 방식

  • 이미지 파일을 브라우저로 드래그 앤 드롭하거나 파일 선택 기능을 통해 입력함
  • Canvas API를 이용하여 실시간으로 이미지를 변환 및 렌더링함
  • FileReader를 사용해 이미지 데이터를 읽고,
  • WebWorkers를 이용해 디더링 처리를 백그라운드에서 실행함
  • 변환된 이미지는 오른쪽 클릭을 통해 저장 가능함
    (브라우저의 한계로, 이미지를 바탕화면에 바로 드래그하여 저장할 수 없음)

기술 스택 및 지원 환경

  • HTML5, JavaScript의 최신 API를 적극적으로 활용함
  • 최신 브라우저 환경이 필요하며, 구형 브라우저에서는 일부 기능이 제한될 수 있음

결론

  • Atkinson Dithering 필터의 간편하고 직관적인 웹 구현 제공
  • 그래픽 개발자, 아트웍, 이미지 경량화 등 다양한 분야에서 활용 가능성 높음
▲
GN⁺ 2일전  [-]
Hacker News 의견

  • 여전히 내가 가장 좋아하는 흑백 디더 알고리즘임
    대학교에서 Mac에 B&W 플랫베드 스캐너를 연결해 하이퍼카드 스택 같은 프로그램으로 이미지를 스캔해 흑백 이미지를 만드는 경험이 있었음
    대학교 서점에서 산 클립아트 책의 이미지를 간단히 스캔해 1988년쯤 작성하기 시작한 Mac 셰어웨어 게임의 '로고'로 사용함
    그 당시에는 Atkinson의 알고리즘이 얼마나 멋진지 몰랐지만, 나중에 다른 디더링 알고리즘을 사용해보고 Bill의 코드의 확산 방식이 정말 훌륭하단 사실을 깨달음
    최근에는 eInk 캘린더 프로젝트에서 Moon의 여러 위상 이미지를 Atkinson 스타일로 변환하고 싶어서 관련 사이트를 찾아 달 이미지를 변환함

  • info dialog의 "as follows" 링크는 클릭하지 않는 게 좋음
    오래 업데이트되지 않아 지금은 NSFW(직장이나 공공장소에서 보기 부적절) 링크로 바뀌었음

  • 이 구현물 정말 훌륭함
    다운로드할 때 anchor의 "download" 속성에 값을 주면 파일에 기본 이름과 .png 확장자를 줄 수 있어서 다운로드 경험을 조금 더 개선할 수 있음
    참고: HTMLAnchorElement.download 문서

    • 방어해보자면, 그 download 속성은 네가 링크한 대로 2017년 3월부터 브라우저에서 지원되기 시작했음
      반면 디더링 툴 저장소의 마지막 커밋은 2016년 3월로 보임
      저자분은 여전히 GitHub에서 다른 저장소로 활동 중이니, 아마 pull request를 받아줄 수 있지 않을까 기대함
      링크: canvas-atkinson-dither GitHub 저장소

  • 내가 개발하고 있는 프로젝트도 있는데, 여러 이미지를 MacPaint로 변환해 400k MFS 포맷 디스크 이미지로 만들 수 있게 해줌
    링크: mfsjs 프로젝트
    몇 달 동안 내 홈 디렉토리에서 약간 방치되어 있었지만, 최근 Gemini Deep Research를 사용해 라이브러리를 보완했음
    다른 언어로 재현하거나 개선하고픈 사람을 위해 LLM이 생성한 마크다운도 포함함

  • Python으로 Atkinson 디더링을 해보고 싶다면
    hyperdither 프로젝트 추천

  • 구현도 멋지고 인터페이스에서 옛 추억이 느껴짐
    최근 내 Atkinson 디더링 웹 컴포넌트[0]의 접속자가 늘어서 이상하다 생각했는데, 이런 슬픈 소식이 있었음
    개인적으로 Atkinson 디더링이 원래 Mac 같은 정말 선명한 모니터에서 가장 예쁜 이미지를 만들어준다는 느낌임
    뭔가 쿨하고 80년대 느낌이라 작년에 만든 게임에도 사용함
    [0]: 픽셀 단위 정밀 Atkinson 디더링 웹컴포넌트

    • 와, 멋진 웹 컴포넌트임

  • 내가 몇 년 전에 만든 비슷한 툴
    비욘드룸 디더링 툴

  • 사이즈 옵션 중 하나가 512x384인데, 원래 Mac 해상도는 512x342임이 흥미로움

    • 진짜로 초창기 Mac은 512x342 화면 해상도였음
      관련 정보: 오리지널 Macintosh 해상도
      수정: 내용을 다시 읽어보니, 사실 네 말이 맞았음

    • 그건 우연이 아닌 듯한 느낌임

  • UI가 귀엽고, 데모의 GitHub 링크도 참고할 만함
    canvas-atkinson-dither GitHub 저장소

  • 오늘 돌아가신 Atkinson과 같은 사람인가요? 그리고 이건 그분을 추모하는 프로젝트인가요?

    • 어느 정도는 맞는 말임
      하지만 저장소의 첫 커밋이 15년 전이라 최근 뉴스를 듣고 급히 만든 건 아님

    • 네, 이 알고리즘을 Atkinson 본인이 '발명'함
      '발견'이라고 썼지만, '발명'이 더 정확함

답변달기