고라니드로koranidro.hashnode.dev·Nov 30, 2024[TypeScript] 제스처로 대화하기. #13 - 플릭(with. 범위) 편이번 편은 이전 편으로부터 이어집니다. 플릭의 이동 범위를 제한하고 싶다면 어떻게 해야 할까요? 단순히 계산 시마다 대상이 유효한 범위 내에 있는지 확인할 수도 있을 것입니다. 하지만 이는 다소 비합리적으로 보일 수 있습니다. 우리는 조금 더 영리한 방법으로 이를 해결할 수 있습니다. 최대 변위 변위가 아래를 만족해야 한다고 합시다. $$\begin{aligned} & s \leq k \end{aligned}$$우리는 수식을 다음과 같이 전개...[TypeScript] 제스처로 대화하기.JavaScript
고라니드로koranidro.hashnode.dev·Nov 23, 2024[TypeScript] 제스처로 대화하기. #12 - 플릭(with. 성분 분해) 편이번 편은 이전 편으로부터 이어집니다. 지난 편에서는 시간에 따른 변위를 구했습니다. 그러면 이것을 코드에 바로 적용할 수 있을까요? 아쉽지만 조금 부족합니다. 얼마나 이동해야 하는지 알 수 있었지만 결국 각 좌표에 대해 어떻게 이동해야 하는지 알 수 없었으니까요. 이를 위해 두 가지 좌표 성분 즉, \(x\)와 \(y\) 좌표로 분해해야 합니다. 초기 속도를 \(x\)와 \(y\) 좌표 성분으로 분해하면 다음과 같습니다. $$\begin{a...[TypeScript] 제스처로 대화하기.JavaScript
고라니드로koranidro.hashnode.dev·Nov 17, 2024[TypeScript] 제스처로 대화하기. #11 - 플릭(with. 변위) 편이번 편은 이전 편으로부터 이어집니다. 지난 편에서는 간단히 플릭에 대한 초기 속도를 계산해 봤습니다. 그렇다면 이것을 어떻게 활용할 수 있을까요? 여러분의 관심사는 결국 얼마나 이동해야 하는지일 것입니다. 이를 위해서는 시간에 따른 속도를 알 필요가 있습니다. 등가속도 운동에서의 속도는 \(v = v_0 + at\) 입니다. 각각 \(v_0\) = 초기 속도, \(a\) = 가속도, \(t\) = 시간입니다. 속도는 점차 감속해야 하므로 가...[TypeScript] 제스처로 대화하기.displacement
고라니드로koranidro.hashnode.dev·Nov 10, 2024[TypeScript] 제스처로 대화하기. #10 - 플릭(with. 초기 속도) 편잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 플릭은 스와이프하다가 포인터를 떼는 동작을 말합니다. 다른 제스처는 포인터를 뗌과 동시에 종료되지만, 플릭은 뗀 이후에 의미가 있습니다. 그렇다면 포인터 이벤트가 종료된 후에 어떻게 동작을 이어갈 수 있을까요? 비밀은 순간 속도에 있습니다. interface PanEvent { timest...[TypeScript] 제스처로 대화하기.flick
![[TypeScript] 제스처로 대화하기. #13 - 플릭(with. 범위) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/WlZiSQw_nks/upload/6f8bb3d858b31deb1e0085c43fc1b49c.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #12 - 플릭(with. 성분 분해) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/2lijqbLePBM/upload/6e7ce54d799746064181cf57f3f06439.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #11 - 플릭(with. 변위) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/r5c_l6SCRdg/upload/bb24791cc87f86f24a26de2040c3736a.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #10 - 플릭(with. 초기 속도) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/vx-PQnfLDDk/upload/628d48edf6f0e1d85342ae2cd4703fb5.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)