# 예제: 2차원 그래픽 변환

### 기본 개념

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

### 변환 행렬

#### 평행이동 (Translation)

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

$$
\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)$를 이동시키는 연산은 다음과 같이 표현된다:

$$
\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}
$$

#### 회전 (Rotation)

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

$$
\mathbf{R} = \begin{bmatrix} \cos \theta & -\sin \theta & 0 \ \sin \theta & \cos \theta & 0 \ 0 & 0 & 1 \end{bmatrix}
$$

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

$$
\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}
$$

#### 스케일링 (Scaling)

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

$$
\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)$를 스케일링하는 연산은 다음과 같이 표현된다:

$$
\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}
$$

#### 예제 (종합 변환)

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

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

**Step 1: 평행이동**

$$
\mathbf{T} = \begin{bmatrix} 1 & 0 & 2 \ 0 & 1 & 3 \ 0 & 0 & 1 \end{bmatrix}
$$

프로덕트:

$$
\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: 회전**

$$
\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}
$$

프로덕트:

$$
\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: 스케일링**

$$
\mathbf{S} = \begin{bmatrix} 2 & 0 & 0 \ 0 & 3 & 0 \ 0 & 0 & 1 \end{bmatrix}
$$

프로덕트:

$$
\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}$는 각각의 변환 행렬을 순서대로 곱한 결과이다.

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

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

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