자바스크립트를 활용한 파티클 애니메이션 구현하기

18 Oct 2023

javascript

파티클 애니메이션은 웹 개발에서 매우 인기 있는 효과 중 하나입니다. 파티클 애니메이션은 작은 점들을 움직여 다양한 모양과 움직임을 만들어내는데 사용됩니다. 이번 블로그 포스트에서는 자바스크립트를 활용하여 간단한 파티클 애니메이션을 구현하는 방법을 알아보겠습니다.

HTML과 CSS 설정하기

파티클 애니메이션을 구현하기 위해 먼저 HTML과 CSS를 설정해야 합니다. 다음과 같이 HTML 파일을 작성해주세요.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>파티클 애니메이션</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <canvas id="particle-canvas"></canvas>
    <script src="script.js"></script>
  </body>
</html>

그리고 CSS 파일을 생성하고 다음과 같이 스타일을 설정해주세요.

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#particle-canvas {
  background-color: #000;
  width: 100%;
  height: 100vh;
}

자바스크립트로 파티클 애니메이션 구현하기

이제 자바스크립트 파일을 생성하여 파티클 애니메이션을 구현해보겠습니다. 다음과 같이 스크립트를 작성해주세요.

// 캔버스 설정
const canvas = document.getElementById("particle-canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 파티클 클래스 정의
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 10 + 1;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;

    if (this.size > 0.2) this.size -= 0.1;
  }

  draw() {
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  }
}

// 파티클 배열 생성
const particles = [];

function init() {
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle(canvas.width / 2, canvas.height / 2));
  }
}

// 애니메이션 프레임 함수
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach((particle, index) => {
    if (particle.size <= 0.2) {
      particles.splice(index, 1);
    } else {
      particle.update();
      particle.draw();
    }
  });

  requestAnimationFrame(animate);
}

init();
animate();

위의 코드는 다음과 같은 일을 수행합니다.

캔버스 설정: 파티클 애니메이션을 그릴 캔버스를 설정합니다.
파티클 클래스 정의: 파티클을 생성하고, 업데이트하고, 그리는 기능을 정의합니다.
파티클 배열 생성: 지정한 개수의 파티클을 생성하여 배열에 추가합니다.
애니메이션 프레임 함수: 캔버스를 clear하고, 각각의 파티클을 업데이트하고 그립니다.

결과 확인하기

위의 코드를 실행하여 파티클 애니메이션을 확인해보세요. 캔버스에 무작위로 움직이는 작은 점들이 생성되며, 크기가 줄어들면서 사라지는 것을 확인할 수 있을 것입니다.

이렇게 자바스크립트를 활용하여 파티클 애니메이션을 구현하는 방법에 대해 알아보았습니다. 파티클 애니메이션은 다양한 형태로 응용할 수 있으며, 사용자에게 흥미로운 시각적인 효과를 제공할 수 있습니다.

더 많은 자바스크립트 기술과 트렌드에 대해 자세히 알아보려면 MDN 웹 문서를 참고하세요.

#자바스크립트 #파티클애니메이션