Huggy Wuggy
Canvas idea
Project summary
프로젝트명
Huggy Wuggy
개발 기간
2023.08.07 ~ 09.05
내용
간단한 아이디어를 구현하며 Canvas API의 사용법에 대해 익혀 보았습니다. 캔버스에 고정 좌표를 생성하고 네 개의 점(손발)을 인접한 고정 좌표로 이동시켜 마치 팔다리가 움직이는 것 같은 애니메이션을 구현하는 아이디어입니다. 그리고 그 위에 캐릭터의 모습을 덧씌워 캐릭터가 벽을 타고 이동하는 장면을 연출해 보았습니다. 점의 위치를 몸통 위치 기준 사분면으로 구분하고 거리순으로 정렬하여 각 손발의 활동 반경을 자연스럽게 유지하였고 마우스를 가리키는 손과 플래시라이트의 각도를 계산하는 등 여러 부분에서 디테일을 높이기 위해 노력해 보았습니다.
Skills
HTML
TypeScript
React
