[javascript] P5.js에서 파티클 시스템을 만드는 방법을 알려주세요.

04 Dec 2023

javascript

개요

P5.js는 JavaScript 기반의 창작 및 미디어 예술 라이브러리로 사용자 친화적인 API를 제공합니다. 파티클 시스템은 P5.js를 사용하여 동적인 효과를 구현하는 데에 매우 유용한 기술입니다. 이번 블로그에서는 P5.js를 활용하여 파티클 시스템을 만드는 방법을 알아보겠습니다.

파티클 시스템 개념

파티클 시스템은 작은 점, 또는 입자들이 모여 움직이는 형태로 구현되는 시각적 효과입니다. 각 입자는 위치, 속도, 가속도 등의 속성을 갖고 있으며, 시간이 지남에 따라 이러한 속성들이 변화하여 움직임을 만들어냅니다.

P5.js를 사용한 파티클 시스템 구현

P5.js에서 파티클 시스템을 구현하기 위해서는 다음과 같은 단계를 따르면 됩니다.

P5.js 라이브러리를 HTML 문서에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

파티클 시스템 클래스를 생성합니다. 이 클래스에서는 파티클들의 위치, 속도, 가속도 등을 관리하고 업데이트합니다.

class Particle {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.acceleration = createVector(0, 0);
    this.maxSpeed = 2;
  }

  applyForce(force) {
    this.acceleration.add(force);
  }

  update() {
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxSpeed);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
  }

  display() {
    fill(255);
    noStroke();
    ellipse(this.position.x, this.position.y, 5, 5);
  }
}

P5.js의 setup() 함수에서 파티클 시스템을 초기화하고 설정합니다.

let particles = [];

function setup() {
  createCanvas(400, 400);

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

P5.js의 draw() 함수에서 파티클 시스템을 업데이트하고 그려줍니다.

function draw() {
  background(0);

  for (let i = 0; i < particles.length; i++) {
    let gravity = createVector(0, 0.1);
    particles[i].applyForce(gravity);

    particles[i].update();
    particles[i].display();
  }
}

HTML 문서에 <script> 태그를 사용하여 파티클 시스템을 실행합니다.

<script>
  setup();
  draw();
</script>

결론

P5.js의 간단한 파티클 시스템 구현 방법에 대해 알아보았습니다. 이를 응용하여 다양한 시각적 효과를 만들어내거나, 상호작용 가능한 애니메이션을 구현할 수 있습니다. P5.js의 다른 기능과 함께 활용하면 더욱 흥미로운 웹 제작을 할 수 있습니다. P5.js의 공식 사이트에서 더 많은 자료와 예제를 참고하시기 바랍니다.

개요

파티클 시스템 개념

P5.js를 사용한 파티클 시스템 구현

결론

참고 자료