Don't touch me!
1. 프로젝트 개요 (Project Overview) 3D 인터랙티브 글리터 스피어는 웹 브라우저 환경에서 실시간 2D Canvas API와 3D 수학적 공간 투영을 활용하여 구현된 입자 시뮬레이션 인터랙티브 아트 프로젝트입니다. 수천 개의 영롱한 글리터 입자들이 3D 입체 구(Sphere) 형상을 이루어 정교하게 자전하며, 사용자의 마우스 움직임, 휠
💡 만든 동기
2. 개발 동기 (Motivation) 2.1. 정적 UI를 넘어서는 몰입형 인터랙티브 경험 제공 기존 웹사이트의 정적인 그래픽 요소에서 벗어나, 사용자의 사소한 마우스 커서 이동이나 스크롤만으로도 생생하게 반응하는 살아있는 인터랙티브 그래픽을 구현하고자 했습니다. 2.2. 수학적 3D 체계와 감각적 유체 물리의 결합 3D 수학적 구체(Sphere) 알고리즘: $X^2 + Y^2 + Z^2 \le R^2$의 구체 표면 및 공간 좌표 생성식을 적용하여 기하학적으로 완벽한 입체 구조를 형성했습니다. 초고속 스프링 복원 물리: 마우스가 지나간 빈자리를 사방의 입자들이 순식간에 채워 넣는 유체 스프링 알고리즘을 설계하여 마찰력과 복원력이 선사하는 시각적 쾌감을 극대화했습니다. 2.3. 아름다운 3D 글리터 그래픽 렌더링 단순한 단색 입자가 아닌, 각 입자마다 독립적인 빛의 위상 변화를 부여하고 프레임별 섬광(Star-flare)을 발산하도록 조율하여 보석이 빛나는 듯한 고품질 시각 효과를 연출했습니다. 2.4. 사용자 중심의 직관적 제어 환경 구축 유리 질감(Glassmorphism) 기반의 햄버거 메인 패널과 휠 스크롤 확대/축소 시스템을 탑재하여 사용자가 직접 입자 개수, 구 반지름, 색상 테마, 잔상(Motion Trails) 여부 등을 자유롭게 커스텀할 수 있도록 제작했습니다. 3. 핵심 기능 및 기술적 특징 (Key Features) 3D 구체 투영 & 연속 자전 (3D Projection & Yaw/Pitch Spin) 3D 공간 상에서의 회전 행렬 연산과 원근 투영(Perspective Scaling)을 통해 깊이감(Depth)에 따른 입자의 크기 및 투명도를 실시간 연산합니다. 정밀 반응형 마우스 피하기 & 빈자리 충전 (Repulsion & Slot Recovery) 마우스 접근 시 부드러운 2차 감쇠(Quadratic Falloff)로 입자가 뭉침 없이 깔끔하게 밀려납니다. 커서가 지나가는 순간, 상대 목표 위치(Slot)로 빠르게 돌아가는 고탄성 스프링 엔진이 작동합니다. 휠 스크롤 확대/축소 (Lerp Zoom System) 30%부터 350%까지 보간법(Lerp) 기반의 부드러운 휠 스크롤 화면 확축소를 제공합니다. 다채로운 글리터 색상 테마 & 잔상 조절 다이아몬드 화이트, 레인보우 젬, 골드, 네온, 파스텔 오로라 등 다양한 팔레트 제공 운동 잔상 효과(Motion Trails) ON/OFF 실시간 토글 기능 지원
🤔 어려웠던 점
이 프로잭트를 3d화등 그걸 옆으로 자연스럽게 돌리는게 어려웠다.
🛠 해결한 방법
어러 사이트를 찾아보며 정보를 찾았다
✨ 배운 점
어려워도 계속하면 된다