절도 있는 뼈대 체인으로 움직이는 프로시저럴 물고기

체인 리깅으로 유연하게 헤엄치는 물고기

Processing에서 시작한 물고기 애니메이션을 웹으로 옮겨오면서, 단순한 스프라이트(Sprite)가 아닌 관절 체인을 활용한 움직임을 유지하는 것이 핵심 과제였어요. 몸통을 따라 이어진 12개의 관절과 각 관절의 최대 회전 각도를 제어하는 제약 조건으로 자연스러운 굽힘과 꼬리 파동을 만들었어요.

포팅에서 살펴본 기술 포인트

• 관절 각도 제약: Processing 코드에서 사용하던 constrainAngle 로직을 그대로 옮겨와 관절이 과도하게 꺾이지 않도록 했어요.
• 마우스 추적: 머리 관절이 마우스를 향해 회전하고, 따라오는 관절은 순차적으로 제약 범위 내에서 추종하도록 구현했어요.
• 곡선 표현 유지: 몸통과 지느러미는 curveVertex 대신 p5.js에서도 안정적인 curveVertex 호출 순서를 맞추어 기존 형태를 그대로 표현했어요.

React 컴포넌트로 감싸면서도 Processing 특유의 움직임과 색감을 유지할 수 있었고, 마우스를 따라 움직이는 상호작용 덕분에 웹에서도 직관적인 체험을 제공해요.