Update README.md

Author: johypark

README.md

@@ -1 +1,49 @@
 # Play 405
+
+개개인의 작품을 ‘게임 칩’에 담아 선보이는 전시 컨셉에 맞추어, 마우스를 움직이면서 떨어지는 게임 칩을 담거나, 화면에 널브러져 있는 게임 칩을 게임기에 집어넣는 사용자 인터랙션을 구현했습니다.
+
+## Drag 구현
+
+먼저 Framer Motion의 `drag` prop을 사용하여 칩을 드래그할 수 있도록 하였습니다.
+
+이 때 칩을 잡은 위치를 중심으로 칩이 자연스럽게 회전하도록 하였습니다. 회전축을 바꾸기 위해 `transform-origin`을 사용합니다.
+
+### 1. 칩을 탭했을 때
+
+![1-1](/assets/readme/1-1.png)
+
+위의 그림에서 O는 현재 회전축의 위치를 나타내고, T는 탭한 위치를 나타냅니다. 칩을 집은 위치를 중심으로 회전하도록 하기 위해, 회전축을 탭한 위치로, 즉 O를 T로 변경해야 합니다.
+
+![1-2](/assets/readme/1-2.png)
+
+하지만 칩이 가지고 있는 위치 값 P는 칩이 회전하지 않은 상태에서의 위치를 나타냅니다.
+
+![1-3](/assets/readme/1-3.png)
+
+따라서 칩의 회전축을 바로 변경한다면, 칩은 회전하기 전의 위치에서 T를 중심으로 회전하여 원하지 않는 위치로 이동하게 됩니다.
+
+![1-4](/assets/readme/1-4.png)
+
+이를 방지하기 위해, 회전축을 변경할 때, 칩의 위치를 노란색 벡터만큼 이동시켜야 합니다. 이렇게 되면 칩을 회전했을 때의 T의 위치와 회전하지 않은 상태에서의 T의 위치가 같아집니다.
+
+![1-5](/assets/readme/1-5.png)
+
+먼저 O에서 T로 가는 벡터 `vectorA`를 구합니다. 이 벡터를 칩이 회전한 각도만큼 반시계 방향으로 회전시킨 벡터 `vectorB`를 구합니다. `vectorB`는 O에서 T'로 가는 벡터입니다. 이 때 T'는 칩이 회전하지 않은 상태에서의 T입니다. `vectorA`에서 `vectorB`를 빼면, 칩을 얼마나 이동시켜야 하는지 알 수 있습니다.
+
+### 2. 칩을 드래그했을 때
+
+칩을 드래그할 때, 칩의 중심을 기준으로 회전각을 계산해야 자연스러운 칩의 움직임을 구현할 수 있습니다.
+
+![2-1](/assets/readme/2-1.png)
+
+여기서 T는 탭한 위치, P는 칩의 위치, C'는 칩이 회전하지 않은 상태에서의 중심을 나타냅니다. C'는 P에서 칩의 크기를 이용하여 구할 수 있습니다. 그 다음 T에서 C'로 가는 벡터 `vectorA`를 구합니다.
+
+![2-2](/assets/readme/2-2.png)
+
+`vectorA`를 칩이 회전한 각도만큼 시계 방향으로 회전시킨 벡터 `vectorB`를 구합니다. `vectorB`는 T에서 C로 가는 벡터입니다. 이 때 C는 칩이 회전한 상태에서의 중심, 즉 실제 칩의 중심입니다.
+
+![2-3](/assets/readme/2-3.png)
+
+T'는 T에서 드래그한 위치입니다. 따라서 T에서 T'로 가는 벡터는 `movement`입니다. `vectorB`에서 `movement`를 빼면, T'에서 C로 가는 벡터 `vectorC`를 구할 수 있습니다. 이 때 `vectorB`와 `vectorC`의 사이각을 구하면, 칩이 회전해야 하는 각도를 알 수 있습니다.
+
+마지막으로 이 각도에 가속도 등을 곱하여 회전각을 결정합니다.