[TypeScript] 제스처로 대화하기. #12 - 플릭(with. 성분 분해) 편

이번 편은 이전 편으로부터 이어집니다.

지난 편에서는 시간에 따른 변위를 구했습니다. 그러면 이것을 코드에 바로 적용할 수 있을까요? 아쉽지만 조금 부족합니다. 얼마나 이동해야 하는지 알 수 있었지만 결국 각 좌표에 대해 어떻게 이동해야 하는지 알 수 없었으니까요. 이를 위해 두 가지 좌표 성분 즉, \(x\)와 \(y\) 좌표로 분해해야 합니다.

초기 속도를 \(x\)와 \(y\) 좌표 성분으로 분해하면 다음과 같습니다.

$$\begin{aligned} v_x & = v\cos\theta \\ & = (v_0 + at)\cos\theta \\ \\ v_y & = v\sin\theta \\ & = (v_0 + at)\sin\theta \end{aligned}$$

이를 시간에 대해 적분하면 변위를 계산할 수 있습니다.

$$\begin{aligned} s_x & = (v_0t + \frac{1}{2}at^2)\cos\theta \\ & = (v_0\cos\theta)t + \frac{1}{2}(a\cos\theta)t^2 \\ & = (v_{x0})t + \frac{1}{2}(\frac{a\Delta{x}}{\Delta{s}})t^2 \\ \\ s_y & = (v_0t + \frac{1}{2}at^2)\sin\theta \\ & = (v_0\sin\theta)t + \frac{1}{2}(a\sin\theta)t^2 \\ & = (v_{y0})t + \frac{1}{2}(\frac{a\Delta{y}}{\Delta{s}})t^2\\ \end{aligned}$$

코드로 나타내면 다음과 같습니다.

const deltaX = e.x - prevEvent.x;
const deltaY = e.y - prevEvent.y;
const deltaS = Math.hypot(deltaX, deltaY);

const velocityX = deltaX / timestampDiff;
const velocityY = deltaY / timestampDiff;

const accelerationX = -Math.sign(deltaX) * 0.0025 * deltaX / deltaS;
const accelerationY = -Math.sign(deltaY) * 0.0025 * deltaY / deltaS;

const displacementX = findDisplacementOverTime(
    velocityX,
    accelerationX,
    timestampDiff
);
const displacementY = findDisplacementOverTime(
    velocityY,
    accelerationY,
    timestampDiff
);

마찬가지로 각 좌표 성분의 속도가 0 이 되는 시점을 아래와 같이 계산할 수 있습니다.

$$\begin{aligned} v_x & = v_0\cos\theta + (a\cos\theta)t \\ & = \frac{\Delta{x}}{\Delta{s}}v_0 + (\frac{a\Delta{x}}{\Delta{s}})t \\ & = 0 \\ \\ v_y & = v_0\sin\theta + (a\sin\theta)t \\ & = \frac{\Delta{y}}{\Delta{s}}v_0 + (\frac{a\Delta{y}}{\Delta{s}})t \\ & = 0 \\ \\ t & = -\frac{\Delta{x}\Delta{s}}{a\Delta{x}\Delta{s}}v_0 \\ & = -\frac{\Delta{y}\Delta{s}}{a\Delta{y}\Delta{s}}v_0 \\ & = -\frac{v_0}{a} \end{aligned}$$

결과는 지난 편과 동일한 것을 확인할 수 있습니다.

내용은 다음 편에서 이어집니다. 읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.