4-1-4.변환 행렬

캔버스의 모든 변환은 행렬을 사용한다. 잠깐 수학적인 연구를 해 보자. 변환 행렬은 3 * 3의 행렬이며 다음과 같이 정의되어 있다.

3열은 계산을 위한 보조 역할을 하며 0, 0, 1로 값이 고정되어 있다. 메서드에서 지정한 좌표 x, y는 변환 행렬에 의해 다음과 같이 변환된다.

원래 좌표에 행렬을 곱하면 최종 출력 좌표가 나온다. 이 행렬식에 의해 다음 다항식이 도출된다.

x' = x * m11 + y * m21 + dx;

y' = x * m12 + y* m22 + dx;

1 = 1

모든 출력 좌표는 이 방정식에 의해 계산된다. 평소에 이 변환을 느낄 수 없는 이유는 디폴트 변환 행렬이 단위 행렬로 정의되어 있기 때문이다.

이 행렬을 곱한 다항식은 x' = x, y' = y가 되어 아무런 변환이 발생하지 않는다. 그래서 메서드에서 지정한 좌표에 그대로 출력되는 것이다. 하지만 변환 행렬을 조작하면 최종 좌표가 영향을 받는다. 변환 행렬은 다음 두 메서드로 지정한다.

transform(m11, m12, m21, m22, dx, dy)

setTransform(m11, m12, m21, m22, dx, dy)

변환 행렬의 1열, 2열 6개 원소를 인수로 전달한다. 이 원소는 위에서 보인 다항식의 계수로 사용된다. transform 메서드는 현재 변환에 추가로 변환을 더한다. 현재 변환 행렬에 새로운 행렬을 곱해 추가적으로 누적 변환을 수행한다. 반면 setTransform 메서드는 이전 변환을 무시하고 인수로 전달받은 값으로 행렬을 초기화한다. 앞에서 확대와 이동의 순서를 연구할 때 다음 호출문을 사용했었다.

ctx.setTransform(1,0,0,1,0,0);

이 호출문에 의해 단위 행렬을 지정함으로써 모든 변환이 리셋된다. 행렬의 원소를 변경하면 다항식에 적용되어 변환이 발생한다. 행렬로 이동 변환과 확대 변환을 수행해 보자.

matrix.html

function draw() {

ctx.fillStyle="blue";

ctx.fillRect(50,50,30,30);

ctx.setTransform(1,0,0,1,50,50);

ctx.fillStyle="red";

ctx.fillRect(50,50,30,30);

ctx.setTransform(3,0,0,2,0,0);

ctx.fillStyle="green";

ctx.fillRect(50,50,30,30);

}

(50, 50)에 출력된 파란색 사각형이 이동에 의해 빨간색 사각형으로 출력되고 확대에 의해 초록색 사각형으로 출력된다.

setTransform(1,0,0,1,50,50) 호출에 의해 x' = x + 50, y' = y + 50의 다항식이 생성되고 이 식에 의해 수평, 수직으로 50만큼 이동한다. 이 호출문은 translate(50, 50)과 같다. setTransform(3,0,0,2,0,0) 호출에 의해 x' = 3 * x, y' = 2 * y의 다항식이 생성되고 이 식에 의해 수평으로 3배, 수직으로 2배 확대된다. 이 호출문은 scale(3, 2)와 같다.

회전의 경우는 좀 복잡한데 삼각 함수가 적용된다. 결국 translate, scale, rotate 메서드는 변환 행렬을 만드는 편리한 방법일 뿐이며 내부적으로는 모두 행렬 곱셈으로 좌표를 조작한다. 행렬보다는 메서드가 더 직관적이고 편리하다. 그렇다면 메서드가 있는데 왜 굳이 변환 행렬을 직접 조작하는 방법을 제공하는 것일까?

행렬을 직접 조작하면 여러 가지 더 복잡한 변환도 수행할 수 있기 때문이다. 앞에서 이동과 확대 변환을 같이 적용하는 예제를 만들어 본 적이 있는데 이 변환을 행렬로 수행해 보자. 먼저 확대 후 이동 변환이다.

matrix2.html

function draw() {

ctx.fillStyle="blue";

ctx.fillRect(10,10,30,30);

// ctx.translate(50,50);

// ctx.scale(2,2);

ctx.setTransform(2, 0, 0, 2, 50, 50);

ctx.fillStyle="red"

ctx.fillRect(10,10,30,30);

}

실행 결과는 메서드를 호출한 경우와 같다. scale, translate 호출이 다음 곱셈의 의해 하나의 행렬로 합쳐진다.

변환 행렬에 의해 x' = 2 * x + 50이라는 식이 만들어진다. 먼저 곱해지고 나중에 더해지는 것이다. y축 변환도 동일하다. 다음은 이동 후 확대 변환을 보자.

matrix3.html

function draw() {

ctx.fillStyle="blue";

ctx.fillRect(10,10,30,30);

// ctx.scale(2,2);

// ctx.translate(50,50);

ctx.setTransform(2, 0, 0, 2, 100, 100);

ctx.fillStyle="red"

ctx.fillRect(10,10,30,30);

}

앞에서 살펴 봤다시피 이동을 먼저 하면 빨간색 사각형이 더 멀리 이동한다. 이 현상은 다음식으로 설명할 수 있다.

이 변환 행렬에 의해 x' = 2 * x + 100 식이 만들어지며 이는 x' = 2 * (x + 50)과 같다. 먼저 더해지고 나중에 곱해지므로 훨씬 더 멀리 이동하는 것이다. 변환의 순서에 따라 결과가 달라지는 이유는 행렬은 곱셈의 교환 법칙이 성립하지 않기 때문이다. 정수와는 달리 행렬은 AB와 BA가 같지 않다. 거짓말인지 정석책을 찾아 봐라. 먼저 가해지는 변환이 행렬곱의 우변에 오며 그래서 효과는 더 늦게 나타난다.

3개 이상의 변환도 하나의 행렬로 정리된다. 변환을 아무리 많이 수행해도 결국 최종적으로는 변환 행렬 하나가 만들어지며 이 행렬에 의해 모든 변환이 수행된다. 앞에서 만들었던 호돌이 회전 예제도 세 개의 행렬을 곱하면 setTransform 한 줄이면 똑같은 예제를 만들 수 있다. 변환을 아무리 중첩시켜도 단 한번의 행렬 연산으로 최종 좌표가 결정되므로 속도가 느려지지 않는다. 이것이 수학의 힘이다.

행렬 연산을 직접 할 수 있도록 지원하는 또 다른 이유는 메서드가 제공하지 못하는 복잡한 변환을 처리하기 위해서이다. 예를 들어 기울이기 같은 변환은 제공되지 않지만 행렬을 직접 조작하면 기울이는 것도 가능하다. 다음 예제는 호돌이 이미지를 기울인다.

skew.html

function draw() {

var img = new Image();

img.src="hodori.jpg"

img.onload = function() {

ctx.transform(1,0,0.3,1,0,0);

ctx.drawImage(img, 0, 0);

}

}

호돌이를 오른쪽으로 살짝 기울여 짝다리 짚고 있는 건방진 모습으로 나타난다.

어째서 이런 모양이 나오는지는 행렬을 곱해 보고 다항식을 도출해 보면 금방 알 수 있다.

x' = x + y * 0.3;

y' = y;

y'는 변화가 없지만 x'는 원래의 x값에 y값을 30% 더한 값으로 계산된다. 그래서 y가 아래쪽으로 증가할수록 x가 비례적으로 이동되므로 오른쪽으로 살짝 기우는 것이다. -0.3으로 바꾸면 왼쪽으로 기울어진다. 응용의 여지가 많다는 것이 직감적으로 이해될 것이다. 기존의 이동, 확대, 회전 뿐만 아니라 기울이기까지 같이 조합하면 가능한 변환의 예는 무궁무진하다.

배운지 한참 되었더라도 행렬 연산은 어렴풋이 기억날 것이다. 행렬의 곰셈 정도만 이해해도 이 항의 주제는 상당히 흥미롭게 다가올 것이다. 행렬 연산은 참 재미있다. 또한 굉장히 강력해서 3차원 변환까지도 행렬 하나면 안되는 게 없다.