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