0%

Unity

수학 교과서에서만 보던 **사이클로이드 곡선(Cycloid Curve)** 을 실제 눈앞에서 굴려볼 수 있다면 어떨까요?

전*원··수정됨 2026.07.21

수학 교과서에서만 보던 **사이클로이드 곡선(Cycloid Curve)** 을 실제 눈앞에서 굴려볼 수 있다면 어떨까요?
아키텍처_01_전체구조.png

1. 시스템 아키텍처 개요

본 프로젝트는 크게 세 가지 단계로 구성됩니다.

센서 입력, 시리얼 전달, 시각화

이 모든 과정은 Unity 2023.2.20f1을 메인 플랫폼으로 하여 단일 상태 머신(State Machine) 아래에서 하드웨어 입력과 UI를 통합 관리합니다.

2. 주요 기술적 구현

2.1 실시간 시리얼 수신과 비트맵 복원 (UIManager.cs)

센서 데이터는 MCU에서 baud 9600의 시리얼 포트를 통해 Unity로 들어옵니다. UIManager는 싱글톤으로 시리얼·상태·UI 전환을 총괄하며, 비동기 StartListening() 루프가 19바이트 단위로 수신합니다. 수신된 패킷은 SaveData()에서 0xFA 헤더 검증 후 9바이트를 비트 단위로 풀어 sensors[61] 배열로 복원되는데, 마지막 바이트는 5비트만 사용하는 미세한 포맷까지 반영하여 61개 센서를 정확히 매핑합니다.

2.2 모서리 피벗 전환 방식의 굴림 회전 (RectRottation.cs, HexagonRotation.cs)

단순 Rotate 만으로는 "굴러가는" 모션이 자연스럽게 나오지 않기에, 회전 피벗을 도형의 모서리 이미지 간에 순환 교체 하는 방식을 채택했습니다. 4개 꼭짓점(LB-LT-RT-RB)을 Modulo 연산으로 순환시키며, 매 프레임 touchPoint.y ≤ pivotPoint.y 조건으로 바닥 접촉을 감지합니다. 그 순간 InterpolationAngle()이 가장 가까운 스냅 각도로 LerpAngle 보정을 걸어, 미끄러짐 없이 매끄러운 굴림을 구현했습니다.

Sphere: 반지름 216.5px 기반 Translate + Rotate

Rectangle: 4개 모서리 순환, 90° 스냅

Hexagon: 6개 모서리 순환, 60° 스냅

2.3 사이클로이드 궤적 렌더링 (AddUILinePoint.cs)

도형의 꼭짓점이 굴러가며 그리는 사이클로이드 곡선은 Unity UI Extensions의 UILineRendererAddUILinePoint가 쌍으로 출력합니다. 매 프레임 추적 대상의 localPositionpoints 리스트에 추가한 뒤 UILineRenderer.Points에 재대입하는 방식이며, 게임 종료·타임아웃 플래그에 따라 자동으로 그리기를 중지해 잔상 문제를 차단했습니다. 외곽 꼭짓점(OutLineRenderUI)과 내부 점(InLineRenderUI)의 두 궤적을 동시에 출력하여 수학책 속 곡선을 그대로 화면에 띄워 줍니다.

3. 사용자 경험(UX) 최적화

명확한 상태 머신 흐름 : Title → InGame → End → TakeOut → InsertNew 흐름을 GameState enum과 UI 배열로 명확히 분리해, 관람객이 "지금 뭘 해야 하지?" 같은 혼란 없이 다음 행동을 자연스럽게 인지하도록 했습니다.

제한 시간 비주얼 게이지 : TimerManagerfillAmount -= Time.deltaTime * 0.02f 공식으로 약 50초에 걸쳐 게이지를 부드럽게 감소시키며, 타임아웃 시 IsTimeOut 플래그로 자동 실패 처리합니다.

도형 자동 감지 & 전환 : CheckingTakeOutShape() 코루틴이 센서 상태를 0.5초 간격으로 폴링해 도형 제거를 감지하고, Sphere 클리어 시 SettingShape()이 자동으로 Rect로 전환하여 관람객이 연속으로 다양한 사이클로이드를 비교 체험할 수 있도록 했습니다.

4. 마치며

이 프로젝트는 물리 전시물과 디지털 시각화라는 두 세계를 시리얼 프로토콜 하나로 잇는 작업이었습니다. 61개 센서 비트맵을 받아 가상 도형의 모서리 피벗을 순환시키고, 다시 그 움직임을 사이클로이드 곡선으로 치환하는 파이프라인은 기술적으로도 흥미롭지만, 수학 교과서 속 추상 개념을 손으로 굴려 체험하게 한다는 점에서 큰 의미가 있었습니다.

향후에는 Rectangle과 Hexagon 간의 자동 전환 로직을 정식 구현하고, 도면에 표기된 오각형(Pentagon) 도형까지 지원하여 관람객이 더 다양한 다각형의 사이클로이드를 비교 관찰할 수 있도록 확장할 예정입니다.

읽기 도구

4분 읽기

이 글이 도움이 되었나요?

다음으로 읽기