피드로 돌아가기
Dev.toFrontend
원문 읽기
用 p5.js 做出會回應滑鼠的日式粒子背景，讓你的作品頁面更有互動感
p5.js Noise 함수와 Vector 연산을 활용한 인터랙티브 파티클 시스템 구현
AI 요약
Context
정적인 포트폴리오 웹페이지의 시각적 단조로움을 해결하기 위한 인터랙티브 배경 구현 필요성 제기. 단순한 애니메이션을 넘어 유기적인 움직임과 사용자 반응성을 동시에 확보해야 하는 설계 요구사항 존재.
Technical Solution
- Perlin Noise 기반의 flow field를 적용하여 선형 이동이 아닌 자연스러운 유기적 곡선 경로 생성
- Vector 클래스를 활용한 가속도(acc), 속도(vel), 위치(pos) 기반의 물리 엔진 구조 설계
- 마우스 좌표와 파티클 간의 거리(magnitude) 계산을 통한 실시간 반발력(Repulsion Force) 로직 구현
- map() 함수를 활용하여 거리-힘의 반비례 관계를 설정함으로써 부드러운 회피 동작 최적화
- 화면 경계 밖으로 나간 파티클을 반대편으로 재배치하는 Wrap-around 처리로 객체 수 유지 및 메모리 효율 확보
- Class 기반의 객체 지향 설계를 통해 개별 파티클의 독립적 상태 관리 및 확장성 확보
실천 포인트
1. 자연스러운 움직임을 위해 단순 Random 대신 Perlin Noise 적용 검토
2. 물리 기반 인터랙션 설계 시 거리-힘의 매핑 함수를 통한 감도 조절
3. Canvas 요소의 성능 최적화를 위해 객체 수와 연산 복잡도의 트레이드오프 분석
4. windowResized 이벤트를 통한 반응형 캔버스 크기 동적 제어 적용