선 그리기 알고리즘 - 컴퓨터에서의 점 표현

- 개요

• L(a) = a · P1 + (1 - a) · P2

위와 같이 구성된 직선의 방정식을 사용하여 선을 그릴 수 있었다

그러나 컴퓨터에서 선을 그리기 위해서는 모니터 화면이 구성되는 원리와 선을 그리는 알고리즘을 이해해야 한다

따라서 이번 포스트에서는 모니터 화면이 구성되는 원리를 알아보도록 한다

 

- 스크린 좌표계

수학에서 벡터를 표현할 때는 Y축이 위를 향하는 데카르트 좌표계를 사용한다

그러나 모니터 화면의 좌표계는 Y축이 아래를 향하는 스크린 좌표계(Screen Coordinate)를 사용한다

 

출처 : https://libgdx.com/wiki/articles/coordinate-systems

 

스크린 좌표계는 데카르트 좌표계와는 다른 성질을 갖고 있다

• Y축의 방향이 아래쪽으로 향하며 아래로 갈수록 증가
• 좌표계에서 실수가 아닌 정수를 사용
• 데카르트 좌표계와 다르게, 서로 독립적인 영역을 가지는 이산적인(Discrete) 정수를 사용
  • 따라서 하나의 스크린 좌표가 네모난 영역에 대응

 

픽셀화의 예시

 

스크린 좌표계를 사용해 화면에 물체를 표시하기 위해서는 반드시 색상이 함께 지정되어야 한다

이렇게 스크린 좌표와 색상에 대응하는 화면의 구성 요소를 픽셀(Pixel)이라고 표현한다

따라서 벡터를 화면의 점으로 표현하기 위해서는 실수의 벡터를 정수로 변환하고 색상을 부여해야 하는데,

이러한 변환 과정을 픽셀화(Rasterization)라고 부른다

 

- 픽셀화 과정에서 주의할 점

1) 데카르트 좌표계의 벡터 좌표 -> 스크린 좌표계의 픽셀

데카르트 좌표게의 경계값에 대한 픽셀화 규칙

 

스크린 좌표계의 픽셀의 가장 자리에 벡터 좌표가 걸쳐 있다면 일관성 있는 규칙을 설정하고 적합한 픽셀을 선택해야 한다

프로젝트에서는 주의를 둘러싼 4개의 픽셀 중에서 오른쪽 하단에 위치한 픽셀을 선택하는 것으로 설정하였다

 

2) 스크린 좌표계의 픽셀 -> 데카르트 좌표계의 벡터 좌표

스크린 좌표계에서 데카르트 좌표계로 변환하는 규칙

 

반대로 스크린 좌표계에서 데카르트 좌표계로 변환하는 규칙도 설정해야 한다

스크린 좌표를 구성하는 픽셀이 가로 - 세로로 [0, 1]의 범위 영역을 가지므로, 해당 영역을 대표하는 벡터를 선정한다

프로젝트에서는 픽셀 좌표계의 픽셀의 중점을 사용하여 데카르트 좌표계의 점으로 변환하도록 설정하였다

 

- 정리

데카르트 좌표계와 스크린 좌표계의 차이점을 정리하면 다음과 같이 정리할 수 있다

• 1) 데카르트 좌표계
  • 수 집합 : 실수
  • 수의 성질 : 연속성
  • 단위 원소 : 벡터
  • 수의 범위 : 실수 범위
• 2) 스크린 좌표계
  • 수 집합 : 정수
  • 수의 성질 : 이산성
  • 단위 원소 : 픽셀
  • 수의 범위 : 0부터 해상도 크기까지