HTML5에서 Vector를 사용하기 위한 기본적인 이해
테스트 환경: HTML5, Google Chrome, Eclipse
개요
Vector는 평면이나 입체공간에서 [방향과 크기]를 동시에 표현하기 위한 물리량이다. 예를 들어, 바람의 속성을 설명할 때 풍향과 풍속을 동시에 표현해 주어야 할 때가 자주 있다. 이럴 때 화살표를 이용하여 풍향을 그리고 풍속에 따라서 화살표의 크기를 달리 표현한다면 화살표 한개를 이용하여 풍향(방향)과 풍속(크기)를 동시에 표현할 수 있게 된다.
이에 반해서 온도라는 물리량은 크기는 있지만 방향성을 가지는 것은 아니다. 온도와 같이 크기 속성은 기지고 있지만 방향성이 없는 물리량을 스칼라(Scalar)량이라고 한다.
방향과 크기를 동시에 표현할 수 있는 물리량을 벡터라고 한다. 수학에서는 벡터를 표현할 때 화살표의 크기와 방향으로 간단히 벡터를 표현할 수 있으며 수학적인 계산이 필요할 때는 2차원, 3차원 공간 상의 좌표(2,3개의 숫자의 나열)로 쉽게 표현할 수가 있다. 벡터(Vector)와 같이 크기와 방향을 동시에 표현하기 위해서는 최소한 2개의 숫자로 표현할 필요가 있으며, Scalar량은 크기만 가지는 량이므로 숫자 한개만으로도 충분히 표현할 수가 있다.
컴퓨터 게임 등에서 자주 사용되는 Vector와 관련한 계산에는, 벡터간의 계산과 벡터와 스칼라 수와의 계산, 그리고 벡터와 행렬간의 계산등이 있으며 여기서 설명하고자 하는 내용이기도 하다.
HTML5의 게임 프로그래밍 환경, Canvas
게임 프로그래밍 환경으로써 HTML5는 Canvas 태그에 Javascript 를 이용하여 상호작용이 가능한 색상, 기본도형, 이미지, 애니메이션등을 사용할 수 있기 때문에 누구나 게임 프로그래밍을 쉽게 할 수 있는 환경을 제시하고 있으며 개발에 필요한 소프트웨어가 거의 필요 없이 바로 게임을 개발할 수가 있다.
Canvas가 제공하는 화면에 특정한 방향과 속도를 가지며 이동하는 스프라이트 애니메이션이나 마우스에 반응하면서 실물세계의 물리현상을 모방하여 서비스한다면 이용자들은 더욱 흥미를 가지고 접근하게 될 것이다. 이 때 필수적으로 필요한 이론이 Vector이다.
기본적인 Vector 연산
당구게임을 예로 들면, 당구공이 이동하는 방향과 속도를 수학적으로 표현하고 당구공끼리 충돌했을 때 충돌반응을 실감나게 표현하려면 충돌시의 양측 공의 이동방향과 속도가 중요하다. 공의 이동방향과 속도는 2개의 숫자로 구성된 2차원 평면 상의 벡터로 표현될 수 있다. 1개의 공이 특정한 방향과 속도로 이동할 때는 굳이 벡터 이론을 적용할 필요는 없겠지만, 2개의 공이 충돌할 때 양쪽 공은 서로의 방향과 속도에 영향을 미치기 때문에 충돌 후의 방향과 속도는 각각의 공이 다른 값을 갖게 된다. 이 때는 반드시 벡터연산을 적용해야 쉽게 새로운 방향과 속도를 산출할 수가 있다. 게임을 만들 때 복잡도의 정도에 따라 다르겠지만 당구게임을 작성할 때 사용해야 할 기본적인 벡터의 연산에 대해서 알아본다.
벡터의 기하학적 표현
벡터의 연산을 좀더 쉽게 이해하려면 산술적인 계산에 앞서 벡터를 기하학적으로 접근해 보면 학습에 흥미와 재미를 더 할 수가 있다. 예를 들어, 1초에 오른쪽으로 5픽셀, 위로 5픽셀을 이동하는 공의 방향과 속도를 기하학적으로 표현하면 다음과 같다.
위의 그림에서 화살표는 공의 이동 방향과 속도를 동시에 표현하고 있으며, 화살표를 이용하지 않더라도 위의 화살표와 동일한 의미를 지니는 2개의 숫자(2차원 평면 상의 좌표)를 이용하여 (5, 5)와 같이 표현해도 그 의미는 동일하다는 것을 알 수 있다.
위의 그림에 표시된 벡터는 원점을 기준으로 그려져 있기 때문에 벡터의 방향을 쉽게 파악할 수 있지만 어떤 상황에서는 원점을 기준으로 한 선도 생각해 볼 수 있다. 원점을 기점으로 하지 않는 선도 그 방향성을 판단할 때는 모든 선의 방향을 확인할 수 있는 절대적인 기준이 있어야 하므로 원점에 그 기점을 옮겨 놓고 그 방향성을 파악해야 한다.
다음은 원점에 기점을 두지 않은 선분을 원점에 옮겨 놓고 그 방향을 생각하는 예이다.
원점을 기점으로 하지 않은 선분의 양 끝점 좌표를 같은 성분끼리 뺄셈을 하면 선분의 기점이 (0,0) 이 되므로 좌표상의 원점에 해당하며 이 상태에서 벡터의 방향과 크기가 제대로 확인될 수 있다. 즉, 다음과 같은 수식으로 정리할 수 있다.
점 A(7,6) 와 점 B(5,1)를 연결한 선분의 방향과 길이(크기)를 가진 벡터는 다음과 같이 표현할 수 있다.
그러므로 위의 적색 선분을 벡터 성분으로 표시하면 [2, 5] 가 되고 이 벡터의 이름을 C 라고 한다면 C = [2,5] 라고 표현할 수 있다. 또한 벡터의 표현법은 계산의 편의성을 위해 성분을 위에서 아래로 내려쓰기 방법으로 다음과 같이 표현할 때도 있다.
결국 위의 그림에서 표현된 적색 선분과 청색 선분을 벡터로 표시하면 동일한 크기와 방향을 갖는 완전히 동일한 벡터라고 할 수 있다. 2차원 평면이나 3차원 입체 공간에서의 벡터는 정의된 위치에 상관 없이 그 크기와 방향이 동일하다면 동일한 벡터라고 할 수 있다.
벡터의 길이 ( Vector Length )
2차원 평면이나 3차원 공간에서 벡터는 좌표를 이용하여 그 방향을 직관적으로 표현하고 있지만 그 벡터의 길이를 수치로 표현하기 위해서는 약간의 계산이 요구된다. 벡터는 2차원 평면에서 기하학적으로 직각삼각형의 사변에 해당하므로 피타고라스 정리를 이용하여 다음과 같은 방법으로 그 벡터의 길이를 구할 수가 있다.
A라는 벡터의 크기는 다음과 같은 방법으로 표시한다.
벡터의 덧셈
벡터의 덧셈은 기하학적으로 평면에 그려서 확인하면 쉽게 이해할 수 있다. 다음 그림은 두 벡터를 더한 결과 한개의 벡터로 표현된 경우이다.
벡터의 뺄셈
벡터와 스칼라 수의 곱셈
벡터에 스칼라 수를 곱할 때는 벡터의 각 성분에 해당 스칼라 수를 곱해주면 된다. 벡터의 스칼라 곱셈은 특히 단위 벡터에 크기를 설정할 때 많이 사용된다. 단위 벡터란 벡터의 크기가 1인 벡터를 의미하며 크기가 1인 경우 그 벡터에 다른 벡터를 곱할 때 아무런 영향도 없는 특징을 지닌다. 마치 자연수의 1에 다른 수를 곱해도 아무런 변화도 일어나지 않는 특징을 가진 벡터이다. 단위벡터에 스칼라 수를 곱하면 단위벡터의 크기가 해당 스칼라수 만큼 적용되므로 방향정보만 유효하게 가진 단위벡터에 다시 벡터의 크기를 설정해 주려면 원하는 크기의 스칼라 수를 곱해주면 된다.
A = [ 3, 5 ]
A * 2 = [ 3*2, 5*2 ] = [6, 10]
벡터에 스칼라 수인 -1을 곱해주면 벡터의 방향을 정반대 방향으로 설정할 수 있다.
벡터와 스칼라 수의 나눗셈
위에서 언급한 스칼라 곱셈과 마찬가지로 벡터의 각 성분을 스칼라 수로 나누어 주면 된다. 스칼라 수 중에서 벡터의 크기에 해당하는 스칼라 수로 벡터의 각 성분을 나누어 줄 경우에는 벡터의 크기가 1인 단위벡터가 된다. 그러므로 단위벡터를 구하고자 할 때는 그 벡터의 크기를 구해서 크기에 해당하는 스칼라 수로 벡터의 각 성분을 나누어 주면 단위벡터를 구할 수 있다.
A = [4, 6 ]
A / 2 = [4/2, 6/2] = [2, 3]
벡터의 내적 ( Inner Product, Dot Product, Scalar Product )
벡터의 내적은 2개의 벡터가 있을 때 벡터의 동일 성분끼리 곱해서 그 결과를 모두 더하여 최종 값을 산출한다.
A = [2, 3]
B = [4, 5]
또한 중요하게 사용되는 내적의 특성은 2개의 벡터의 크기 만으로도 삼각함수의 코사인비를 구할 수가 있다는 사실이며 다음과 같은 정의가 알려져 있다.
벡터의 내적을 이용하는 한 예
위와 같은 상황에서 정지 중인 공을 이동 중인 공이 충돌했다면 정지 중인 공은 이동 중인 공으로부터 충돌 시 그 속도와 방향에 영향을 받아서 특정한 방향과 속도로 충돌반응을 보이게 된다. 이 때 적색공은 어떤 방향과 속도로 이동해야 하는지 다음과 같은 절차로 결정할 수 있다.
1. 충돌당시의 각 공의 중심좌표를 구해서 뺄셈을 하면 충돌방향 벡터를 구할 수가 있으며 이 때는 아직 충돌의 크기는 정해지지 않았기 때문에 충돌방향 벡터를 단위벡터로 설정하여 방향정보만 유지하도록 한다.
2. 이동 중인 공의 이동방향과 속도는 알려져 있기 때문에 2개의 벡터를 알고 있는 셈이다.
3. 이동 중인 공에 적용했던 벡터로부터 단위벡터를 구하여 아래의 계산에 사용한다
4. 위에서 확인된 2개의 벡터(2개의 단위벡터)를 대상으로 벡터의 내적을 구하면 코사인 비를 구할 수가 있고 코사인 비에 이동 중인 벡터의 크기를 곱해서 충돌의 크기를 구한다.
5. 충돌방향 벡터는 아직 단위벡터이므로 충돌의 크기를 곱하면 충돌의 방향과 충돌의 크기를 가진 충돌벡터가 완성된다.
6. 정지 중인 공에 충돌벡터를 설정하여 충돌의 방향과 충돌의 크기 만큼 이동하도록 한다.
7. 이동 중인 공은 충돌벡터를 정지 중인 공에 손실 당한 셈이므로 벡터의 뺄셈을 이용하여 충돌 후 방향과 속도를 결정할 수 있다.
8. 적색 공도 이동 중에 초록공과 충돌했다면 적색공의 벡터도 초록공에 영향을 주게 되므로 위와 동일한 처리를 한번 더 해야 한다.