[javascript] Paper.js로 물결 효과 및 파티클 애니메이션 구현하기
개요
이번 포스트에서는 Paper.js를 사용하여 물결 효과와 파티클 애니메이션을 구현하는 방법을 알아보겠습니다. Paper.js는 웹 기반의 벡터 그래픽 라이브러리로, JavaScript로 작성된 HTML5 Canvas를 사용하여 다양한 그래픽 요소를 생성하고 조작할 수 있습니다.
Paper.js 설치하기
먼저, 프로젝트에 Paper.js를 설치해야 합니다. npm을 사용하는 경우 아래 명령어를 통해 설치할 수 있습니다.
npm install paper
물결 효과 구현하기
프로젝트 설정하기
HTML 문서에 <canvas> 요소를 추가하고, 해당 요소의 ID를 “myCanvas”로 설정합니다.
<canvas id="myCanvas"></canvas>
물결 효과 구현하기
Paper.js를 사용하여 물결 효과를 구현해보겠습니다. 아래 코드를 스크립트 태그 안에 작성합니다.
<script>
// Canvas 요소와 Paper.js 초기화
paper.setup('myCanvas');
// 물결 효과를 생성하는 함수
function createRipple(point) {
// 물결 그룹 생성
var rippleGroup = new paper.Group();
// 원 모양의 물결 생성
for (var i = 0; i < 10; i++) {
var circle = new paper.Path.Circle(point, i * 10);
circle.strokeColor = 'blue';
rippleGroup.addChild(circle);
}
// 애니메이션 설정
rippleGroup.onFrame = function(event) {
rippleGroup.scale(1.02);
rippleGroup.opacity -= 0.01;
if (rippleGroup.opacity <= 0) {
rippleGroup.remove();
}
};
}
// 클릭 이벤트 리스너 등록
paper.view.onMouseDown = function(event) {
createRipple(event.point);
};
</script>
위의 코드는 클릭한 지점을 중심으로 원 모양의 물결을 생성하는 기능을 구현한 것입니다. 애니메이션은 onFrame 이벤트 핸들러를 사용하여 구현하였습니다.
파티클 애니메이션 구현하기
파티클 생성하기
Paper.js를 사용하여 파티클 애니메이션을 구현하는 방법을 알아보겠습니다. 아래의 코드를 스크립트 태그 안에 추가합니다.
<script>
// 파티클 그룹 생성
var particleGroup = new paper.Group();
// 파티클 생성 함수
function createParticle(point) {
var particle = new paper.Path.Circle(point, 10);
particle.fillColor = 'red';
particleGroup.addChild(particle);
return particle;
}
// 파티클 애니메이션 설정
particleGroup.onFrame = function(event) {
particleGroup.children.forEach(function(particle) {
// 파티클의 위치와 속도 업데이트
particle.position.y += Math.random() * 5 - 2.5;
particle.position.x += Math.random() * 5 - 2.5;
// 파티클의 크기 업데이트
particle.scale(0.95);
// 파티클의 투명도 업데이트
particle.opacity -= 0.02;
// 투명도가 0이하인 경우 파티클 제거
if (particle.opacity <= 0) {
particle.remove();
}
});
};
// 클릭 이벤트 리스너 등록
paper.view.onMouseDown = function(event) {
createParticle(event.point);
};
</script>
위의 코드는 클릭한 지점을 중심으로 파티클을 생성하고, 애니메이션을 적용하는 기능을 구현한 것입니다.
마무리
Paper.js를 사용하여 물결 효과와 파티클 애니메이션을 간단하게 구현해보았습니다. Paper.js는 강력한 기능과 사용하기 쉬운 API를 제공하여 다양한 그래픽 요소를 구현할 수 있습니다. Paper.js의 공식 문서와 다양한 예제를 참고하면 더욱 다양한 효과를 구현할 수 있습니다.