디더링 – Part 1

• 흑백 픽셀 배열로 여러 단계의 명암을 시각적으로 재현하는 원리를 설명
• 디더링(dithering) 은 실제보다 더 많은 색상이나 명암 단계를 착시로 표현하는 기술
• Ordered dithering 방식에서는 임계값 맵(threshold map) 을 사용해 각 픽셀의 밝기를 기준으로 흑백을 결정
• 이 과정에서 픽셀 밀도 변화가 회색조의 느낌을 만들어내며, 원본 이미지의 형태를 유지
• 글은 디더링의 기본 개념을 다루는 3부작 중 첫 번째로, 이후 임계값 맵 생성 알고리듬과 오차 확산(error diffusion) 을 다룰 예정

디더링의 개념과 원리

• 디더링은 제한된 색상으로 더 많은 색조를 표현하기 위한 시각적 기법
  • 흑백 픽셀을 특정 패턴으로 배열해 여러 단계의 회색조 착시를 생성
  • 실제 색상 수를 늘리지 않고 시각적 다양성을 확보
• 글에서는 회색조 이미지를 예시로 사용
  • 흑백만 표시 가능한 화면에서 각 픽셀을 가장 가까운 색상(검정 또는 흰색) 으로 변환
  • 단순 변환 시 명암 경계가 거칠고 세부 그림자 정보가 손실됨
• 디더링은 일부 픽셀을 의도적으로 반대 색상으로 바꾸어 부드러운 명암 전환을 구현
  • 어두운 영역에는 검은 픽셀 밀도를 높이고, 밝은 영역에는 흰 픽셀 밀도를 높임
  • 결과적으로 픽셀 밀도 차이가 회색조의 착시를 형성

Ordered Dithering과 임계값 맵

• Ordered dithering은 임계값 맵(threshold map) 을 사용하는 단순한 디더링 방법
  • 임계값 맵은 0(가장 어두움)에서 1(가장 밝음)까지의 밝기 값 그리드로 구성
• 각 입력 픽셀의 밝기를 해당 위치의 임계값과 비교
  • 밝기가 임계값보다 크면 흰색, 작으면 검정으로 설정
  • 이 과정을 모든 픽셀에 반복해 흑백 패턴 이미지 생성
• 임계값 맵은 입력 이미지의 밝기 분포에 따라 적절한 흑백 밀도 패턴을 출력하도록 설계
  • 밝은 영역은 흰색 비율이 높고, 어두운 영역은 검정 비율이 높음
  • 이러한 밀도 차이가 멀리서 볼 때 회색조처럼 보이는 효과를 만듦

대형 이미지 처리와 시각적 효과

• 큰 이미지를 디더링할 때는 임계값 맵을 확장해 전체 이미지 크기에 맞춤
  • 각 픽셀의 밝기를 임계값과 비교해 흑백으로 변환하는 동일한 원리 적용
• 결과적으로 이미지는 두 가지 색상만 사용하지만, 원본의 명암 구조를 유지
  • 색상 수는 줄었지만 픽셀 밀도 변화로 시각적 세부 표현 유지

디더링의 의미와 시리즈 구성

• 디더링은 색상을 추가하는 것이 아니라 제거하면서 시각적 다양성을 만드는 기술
  • 작성자는 이를 “가진 것으로 최대한을 만들어내는 과정”으로 표현
• 이번 글은 3부작 중 첫 번째로, 기초 원리와 시각적 이해에 초점을 맞춤
  • 다음 글에서는 임계값 맵 생성 알고리듬을, 마지막 글에서는 오차 확산(error diffusion) 을 다룰 예정
• 시리즈는 디더링의 다양한 알고리듬적 접근과 시각적 결과의 차이를 탐구할 계획

작성자 및 프로젝트 소개

• visualrambling.space는 Damar가 운영하는 개인 프로젝트
  • 다양한 주제를 시각적으로 탐구하고 설명하는 인터랙티브 콘텐츠 제작
  • 다루는 주제에는 Three.js, WebGL, 디더링, 시각화, 인터랙티브 학습 등이 포함
• Damar는 X/Twitter 계정(@damarberlari)을 통해 새로운 비주얼 아티클을 지속적으로 공유 예정