주요 내용
인터랙티브 벡터 모션
이 절을 완료하기 전에 좀 더 복잡하고 유용한 것을 해봅시다. 알고리즘 #3에서 정한 객체가 마우스 쪽으로 가속 하는 규칙에 따라, 객체의 가속도를 동적으로 계산하는 코드를 만들어 봅시다.
언제든 규칙이나 공식에 따라 벡터를 계산하려면 두 가지, 즉 크기와 방향을 계산해야 합니다. 방향부터 생각해 보도록 하겠습니다. 가속도 벡터의 방향은 객체 위치에서 마우스 위치로의 방향입니다. 객체가 점
(x,y)에 위치하고 마우스가 (mouseX,mouseY)에 위치한다고 하겠습니다.그림의 마우스의 위치에서 객체의 위치를 빼서 벡터
(dx,dy)를 구할 수 있습니다.dx = mouseX - xdy = mouseY - y
PVector를 이용하여 위 수식을 다시 써 보도록 하겠습니다. Mover 객체의 정의 안에 있다고 가정하면 객체의 위치 PVector에 접근할 수 있습니다. 그러면 다음과 같습니다:var mouse = new PVector(mouseX, mouseY);
// 완전히 새로운 PVector를 원하기 때문에 정적 sub()를 이용합니다
var dir = PVector.sub(mouse, position);이제 움직이는 객체의 위치에서 마우스 위치를 가리키는
PVector를 만들었습니다. 객체가 위 벡터를 이용해 가속한다면 원이 곧바로 마우스 위치에 나타날 것입니다. 이는 당연히 좋은 애니메이션이 아닙니다. 객체가 마우스 방향으로 얼마나 신속하게 가속하는지를 결정해야 합니다. 가속도 PVector의 크기를 설정하려면 먼저 방향 벡터를 ___ 해야 합니다. 그렇습니다. 바로 정규화하는 것입니다. 벡터를 길이가 1인 단위 벡터로 축소하면 방향을 나타내면서 쉽게 임의의 값만큼 크기를 키울 수 있게 됩니다. 1에 어떤 값을 곱하면 그 값이 되기 때문입니다.
var anything = ??;
dir.normalize();
dir.mult(anything);요약하면 다음과 같습니다:
- 객체에서 타겟 위치(마우스)를 가리키는 벡터를 계산합니다.
- 해당 벡터를 정규화(길이를 1로 축소) 합니다.
- 해당 벡터에 특정 값을 곱하여 벡터를 적절한 값으로 확장합니다.
- 그 벡터를 가속도에 할당합니다
다음은 위 단계를 모두 구현한 프로그램입니다:
원이 대상에 도달하면 왜 멈추지 않을까요? 움직이는 객체가 멈춰야 할 시점을 모르기 때문입니다. 객체는 오직 최대한 빠르게 목적지만을 향해 갑니다. 최대한 빠른 속도로 가면 불가피하게 목적지를 지나치게 되고 다시 돌아오는 과정을 계속 반복하게 됩니다. 나중에 다른 단원에서 객체가 목적지에 도착하도록(천천히 접근하도록 함) 프로그래밍하는 방법을 배워보도록 하겠습니다.
이 예제는 중력의(여기에서 객체는 마우스 위치로 이끌립니다)의 개념과 매우 유사합니다. 중력에 대해서는 다음 단원에서 보다 자세히 다루어 보겠습니다. 여기에서는 중력의 크기(가속도의 크기)가 거리에 반비례하는 것을 구현되지 않았습니다. 중력의 크기가 거리에 반비례한다는 것은 객체가 마우스에 가까울수록 빨리 가속된다는 것입니다.
다음 예제는 객체의 배열을 이용해 만들어 보았습니다:
본 "내추럴 시뮬레이션" 과정은 다니엘 쉬프만(Daniel Shiffman)이 저술한 "The Nature of Code"의 내용을 차용한 것이며, 본 내용물의 저작권은 Creative Commons Attribution-NonCommercial 3.0 Unported License를 적용합니다.