search

예제: 2차원 그래픽 변환

hashtag
기본 개념

2차원 그래픽 변환은 컴퓨터 그래픽스에서 기본적이면서도 중요한 주제이다. 동차 좌표 시스템을 사용하면, 일관된 방식으로 선형 변환(회전, 축소/확장, 평행이동 등)을 수행할 수 있다.

hashtag
변환 행렬

hashtag
평행이동 (Translation)

평행이동은 객체를 일정한 거리만큼 이동시키는 변환이다. 2D 평행이동을 정의하는 변환 행렬 $\mathbf{T}$는 다음과 같다:

T=[10tx01ty001]\mathbf{T} = \begin{bmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{bmatrix}

여기서 $t_x$와 $t_y$는 각각 x축과 y축 방향으로의 이동 거리이다. 동차 좌표계에서 점 $\mathbf{P}(x, y)$를 이동시키는 연산은 다음과 같이 표현된다:

P′=TP=[10tx01ty001][xy1]\mathbf{P'} = \mathbf{T} \mathbf{P} = \begin{bmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}

hashtag
회전 (Rotation)

회전 변환은 객체를 원점 중심으로 일정한 각도만큼 회전시키는 변환이다. 회전을 정의하는 변환 행렬 $\mathbf{R}$는 다음과 같다:

R=[cos⁡θ−sin⁡θ0sin⁡θcos⁡θ0001]\mathbf{R} = \begin{bmatrix} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix}

여기서 $\theta$는 회전 각도이다. 동차 좌표계에서 점 $\mathbf{P}(x, y)$를 회전시키는 연산은 다음과 같이 표현된다:

P′=RP=[cos⁡θ−sin⁡θ0sin⁡θcos⁡θ0001][xy1]\mathbf{P'} = \mathbf{R} \mathbf{P} = \begin{bmatrix} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}

hashtag
스케일링 (Scaling)

스케일링 변환은 객체의 크기를 조정하는 변환이다. 2D 스케일링을 정의하는 변환 행렬 $\mathbf{S}$는 다음과 같다:

S=[sx000sy0001]\mathbf{S} = \begin{bmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{bmatrix}

여기서 $s_x$와 $s_y$는 각각 x축과 y축 방향으로의 스케일링 팩터이다. 동차 좌표계에서 점 $\mathbf{P}(x, y)$를 스케일링하는 연산은 다음과 같이 표현된다:

P′=SP=[sx000sy0001][xy1]\mathbf{P'} = \mathbf{S} \mathbf{P} = \begin{bmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}

hashtag
예제 (종합 변환)

이제 평행이동, 회전, 스케일링을 조합하여 종합 예제를 만들어 보겠다.

예를 들어, 원점에 있는 점 $\mathbf{P}(1, 1)$을 먼저 x축 방향으로 2 단위, y축 방향으로 3 단위 평행이동시키고, 45도 회전시킨 다음, x축 방향으로 2배, y축 방향으로 3배 스케일링한다고 가정해 봅시다.

Step 1: 평행이동

T=[102013001]\mathbf{T} = \begin{bmatrix} 1 & 0 & 2 \\ 0 & 1 & 3 \\ 0 & 0 & 1 \end{bmatrix}

프로덕트:

P1=TP=[102013001][111]=[341]\mathbf{P_1} = \mathbf{T} \mathbf{P} = \begin{bmatrix} 1 & 0 & 2 \\ 0 & 1 & 3 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 \\ 1 \\ 1 \end{bmatrix} = \begin{bmatrix} 3 \\ 4 \\ 1 \end{bmatrix}

Step 2: 회전

R=[cos⁡45∘−sin⁡45∘0sin⁡45∘cos⁡45∘0001]=[22−22022220001]\mathbf{R} = \begin{bmatrix} \cos 45^\circ & -\sin 45^\circ & 0 \\ \sin 45^\circ & \cos 45^\circ & 0 \\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} \frac{\sqrt{2}}{2} & -\frac{\sqrt{2}}{2} & 0 \\ \frac{\sqrt{2}}{2} & \frac{\sqrt{2}}{2} & 0 \\ 0 & 0 & 1 \end{bmatrix}

프로덕트:

P2=RP1=[22−22022220001][341]=[−0.7074.9491]\mathbf{P}_2 = \mathbf{R} \mathbf{P}_1 = \begin{bmatrix} \frac{\sqrt{2}}{2} & -\frac{\sqrt{2}}{2} & 0 \\ \frac{\sqrt{2}}{2} & \frac{\sqrt{2}}{2} & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 3 \\ 4 \\ 1 \end{bmatrix} = \begin{bmatrix} -0.707 \\ 4.949 \\ 1 \end{bmatrix}

Step 3: 스케일링

S=[200030001]\mathbf{S} = \begin{bmatrix} 2 & 0 & 0 \\ 0 & 3 & 0 \\ 0 & 0 & 1 \end{bmatrix}

프로덕트:

P3=SP2=[200030001][−0.7074.9491]=[−1.41414.8471]\mathbf{P}_3 = \mathbf{S} \mathbf{P}_2 = \begin{bmatrix} 2 & 0 & 0 \\ 0 & 3 & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} -0.707 \\ 4.949 \\ 1 \end{bmatrix} = \begin{bmatrix} -1.414 \\ 14.847 \\ 1 \end{bmatrix}

따라서 최종적으로 변환된 점의 좌표는 $(-1.414, 14.847)$가 된다.

이러한 각 변환을 하나의 결합 변환 행렬로 표현할 수도 있다. 결합된 변환 행렬 $\mathbf{C}$는 각각의 변환 행렬을 순서대로 곱한 결과이다.

C=SRT\mathbf{C} = \mathbf{S} \mathbf{R} \mathbf{T}

이를 통해 다양한 그래픽 변환을 한 번에 적용할 수 있다.

이 예제는 동차 좌표계를 사용하여 2차원 그래픽 변환을 수행하는 방법을 잘 보여준다. 동차 좌표계는 복잡한 변환을 간결하고 체계적으로 처리할 수 있게 해준다.

Previous동차좌표와 아핀 변환Next제3장: 3차원 동차좌표계

Last updated