#gesture articles

고고라니드로koranidro.hashnode.devJan 18, 2025 · 3 min read

[TypeScript] 제스처로 대화하기. #17 - 로테이트 편(with. 기준점)

이번 편은 이전 편으로부터 이어집니다. 핀치 때와 마찬가지로 기준점에 대해 한번 생각해 봅시다. 마찬가지로 고정된 포인터를 기준점으로 생각할 수 있습니다. 이를 수행하기 위한 변환 행렬은 아래와 같습니다. $$\begin{aligned} \begin{pmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} \cos\theta & -\sin\theta & 0 \...

0

고고라니드로koranidro.hashnode.devJan 11, 2025 · 1 min read

[TypeScript] 제스처로 대화하기. #16 - 로테이트 편

잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 로테이트는 지정된 중심점을 기준으로 회전하듯 스와이프하는 동작을 말합니다. 지난 편과 마찬가지로 가상의 중심점을 상상해 보세요. 이제 포인터를 배치하고 중심점을 기준으로 회전하듯이 이동해봅시다. 이렇게 하면 아래와 같은 세 점이 발생합니다. 최초에 지정된 중심점 $O$ 포인터의 초기 지점 ...

0

고고라니드로koranidro.hashnode.devJan 4, 2025 · 3 min read

[TypeScript] 제스처로 대화하기. #15 - 핀치(with. 기준점) 편

이번 편은 이전 편으로부터 이어집니다. 이번에는 기준점에 대해 한번 생각해 봅시다. 포인터 이벤트는 하나의 포인터에 대해 개별적으로 발생합니다. 두 포인터의 이동이 거의 동일하더라도 말이지요. 따라서 두 포인터에 대해 움직이는 포인터와 고정된 포인터로 생각할 수 있습니다. 그렇다면 고정된 포인터가 기준점이 되겠네요. 이를 수행하기 위한 변환 행렬은 아래와 같습니다. $$\begin{aligned} \begin{pmatrix} 1 & 0 & t...

0

고고라니드로koranidro.hashnode.devDec 8, 2024 · 1 min read

[TypeScript] 제스처로 대화하기. #14 - 핀치 편

잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 핀치는 지정된 중심점을 기준으로 스와이프하는 동작을 말합니다. 포인터가 중심점으로부터 멀어지면 핀치 아웃, 가까워지면 핀치 인이라고 합니다. 가상의 중심점을 상상해 보세요. 이제 포인터를 배치한 후, 이동하여 멀어지기도 하고, 가까워지기도 하는 겁니다. 이렇게 하면 아래와 같은 세 점이 발생합니다...

0

고고라니드로koranidro.hashnode.devNov 30, 2024 · 4 min read

[TypeScript] 제스처로 대화하기. #13 - 플릭(with. 범위) 편

이번 편은 이전 편으로부터 이어집니다. 플릭의 이동 범위를 제한하고 싶다면 어떻게 해야 할까요? 단순히 계산 시마다 대상이 유효한 범위 내에 있는지 확인할 수도 있을 것입니다. 하지만 이는 다소 비합리적으로 보일 수 있습니다. 우리는 조금 더 영리한 방법으로 이를 해결할 수 있습니다. 최대 변위 변위가 아래를 만족해야 한다고 합시다. $$\begin{aligned} & s \leq k \end{aligned}$$우리는 수식을 다음과 같이 전개...

0

고고라니드로koranidro.hashnode.devNov 23, 2024 · 2 min read

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

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

0

고고라니드로koranidro.hashnode.devNov 17, 2024 · 1 min read

[TypeScript] 제스처로 대화하기. #11 - 플릭(with. 변위) 편

이번 편은 이전 편으로부터 이어집니다. 지난 편에서는 간단히 플릭에 대한 초기 속도를 계산해 봤습니다. 그렇다면 이것을 어떻게 활용할 수 있을까요? 여러분의 관심사는 결국 얼마나 이동해야 하는지일 것입니다. 이를 위해서는 시간에 따른 속도를 알 필요가 있습니다. 등가속도 운동에서의 속도는 $v = v_0 + at$ 입니다. 각각 $v_0$ = 초기 속도, $a$ = 가속도, $t$ = 시간입니다. 속도는 점차 감속해야 하므로 가...

0

고고라니드로koranidro.hashnode.devNov 10, 2024 · 1 min read

[TypeScript] 제스처로 대화하기. #10 - 플릭(with. 초기 속도) 편

잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 플릭은 스와이프하다가 포인터를 떼는 동작을 말합니다. 다른 제스처는 포인터를 뗌과 동시에 종료되지만, 플릭은 뗀 이후에 의미가 있습니다. 그렇다면 포인터 이벤트가 종료된 후에 어떻게 동작을 이어갈 수 있을까요? 비밀은 순간 속도에 있습니다. interface PanEvent { timest...

0

고고라니드로koranidro.hashnode.devNov 3, 2024 · 2 min read

[TypeScript] 제스처로 대화하기. #9 - 팬(with. 스와이프) 편

이번 편은 이전 편으로부터 이어집니다. 스와이프는 특정 축을 따라 이동하는 팬 동작을 의미합니다. 즉, 이동 축을 제한한 팬입니다. 대부분 수직, 수평 축에 대해 사용합니다. 축을 제한하려면 어떻게 해야 할까요? 이를 위해서는 포인터의 좌표를 축 위에 놓아야 합니다. 이는 축에 내린 수선의 발을 구하는 문제와 동일합니다. function findPerpendicularFootOnAxis(x: number, y: number, axis: num...

0

고고라니드로koranidro.hashnode.devOct 27, 2024 · 2 min read

[TypeScript] 제스처로 대화하기. #8 - 팬(with. 드래그) 편

이번 편은 이전 편으로부터 이어집니다. pointermove를 드래그 대상에 설정하면 포인터를 빠르게 이동할 경우, 대상을 놓치는 것을 느끼셨을 겁니다. 왜 이런 일이 벌어질까요? 상상해 보세요. 포인터가 이동했습니다. 충분히 이동했다면 요소 바깥으로 넘어갔을 겁니다. 이후 핸들러가 호출되고, 대상을 이동하면 포인터를 따라잡을 겁니다. 하지만 핸들러가 호출되기 전에 포인터가 한 번 더 이동하면 어떻게 될까요? 이번에도 충분히 이동했다면 대상이...

0

#gesture

#gesture

Explore Hashnode

Trending tags this week

[TypeScript] 제스처로 대화하기. #17 - 로테이트 편(with. 기준점)

[TypeScript] 제스처로 대화하기. #16 - 로테이트 편

[TypeScript] 제스처로 대화하기. #15 - 핀치(with. 기준점) 편

[TypeScript] 제스처로 대화하기. #14 - 핀치 편

[TypeScript] 제스처로 대화하기. #13 - 플릭(with. 범위) 편

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

[TypeScript] 제스처로 대화하기. #11 - 플릭(with. 변위) 편

[TypeScript] 제스처로 대화하기. #10 - 플릭(with. 초기 속도) 편

[TypeScript] 제스처로 대화하기. #9 - 팬(with. 스와이프) 편

[TypeScript] 제스처로 대화하기. #8 - 팬(with. 드래그) 편

#gesture

Search Hashnode

#gesture

Explore Hashnode

Trending tags this week

[TypeScript] 제스처로 대화하기. #17 - 로테이트 편(with. 기준점)

[TypeScript] 제스처로 대화하기. #16 - 로테이트 편

[TypeScript] 제스처로 대화하기. #15 - 핀치(with. 기준점) 편

[TypeScript] 제스처로 대화하기. #14 - 핀치 편

[TypeScript] 제스처로 대화하기. #13 - 플릭(with. 범위) 편

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

[TypeScript] 제스처로 대화하기. #11 - 플릭(with. 변위) 편

[TypeScript] 제스처로 대화하기. #10 - 플릭(with. 초기 속도) 편

[TypeScript] 제스처로 대화하기. #9 - 팬(with. 스와이프) 편

[TypeScript] 제스처로 대화하기. #8 - 팬(with. 드래그) 편