If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

단일 입자

전체적인 ParticleSystem을 만들기 전에 단일 입자를 묘사할 객체를 생성해야 합니다. 좋은 소식은 이미 만들었다는 것입니다. 힘을 배울 때 만든 Mover 객체가 완벽한 밑바탕이 됩니다. 여기서 입자는 화면을 돌아다니는 독립적인 물체입니다. 입자에는 location, velocity, acceleration과 이런 변수를 초기화하는 생성자, 입자를 보여주는 display() 함수, 위치를 갱신하는 update() 함수가 있습니다.
// 간단한 입자 객체
var Particle = function(position) {
  this.acceleration = new PVector();
  this.velocity = new PVector();
  this.position = position.get();
};

Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
};

Particle.prototype.display = function() {
  stroke(0, 0, 0);
  fill(175, 175, 175);
  ellipse(this.position.x, this.position.y, 8, 8);
};
위 코드는 입자를 가장 간단한 방법으로 나타낸 것입니다. 여기에서 여러 방향으로 입자를 발전시킬 수 있습니다. applyForce() 메소드를 추가하여 입자의 행동에 영향을 줄 수도 있고 (이후 예제에서 한 번 해볼 겁니다) 색깔과 모양을 바꾸는 변수를 추가하거나 image()를 이용하여 입자를 그릴 수도 있습니다. 지금은 한 가지 변수, 입자의 수명을 추가하는 것에 중점을 둡시다.
일반적인 입자 시스템에는 이미터라는 것이 있습니다. 이미터는 입자의 근원이며 입자, 위치, 속도 값의 초기 설정을 제어합니다. 이미터는 입자를 한 번만 방출할 수도, 입자를 지속해서 방출할 수도 있고 둘 다 일 수도 있습니다. 중요한 점은, 이런 일반적인 상황에서는 입자가 이미터에서 나오지만, 영원히 남아있지는 않습니다. 만약 입자가 사라지지 않고 영원히 존재하면 시간이 갈수록 입자의 수가 감당하기 힘들 정도로 증가하게 되고 결과적으로 프로그램이 정지할 겁니다. 새로운 입자가 생겨나면 그 전에 생긴 입자는 없어져야 합니다. 이렇게 하면 입자가 끊임없이 흐르는 착시를 주면서도 프로그램의 성능 악화를 막을 수 있습니다.
입자가 사라지는 시기를 지정하는 방법은 매우 다양합니다. 예를 들어 또 다른 물체와 접촉하거나 단순히 화면에서 벗어날 때 없어지게 만들 수 있습니다. 첫 번째 Particle 객체에 대해, timeToLive 프로퍼티를 추가해 봅시다. 이 프로퍼티는 255에서 0까지 세는 타이머 역할을 하고 0이 되면 입자를 "죽었다고 (dead)" 생각합니다. 따라서 Particle 객체를 다음과 같이 확장해봅시다:
// 간단한 입자 객체
var Particle = function(position) {
  this.acceleration = new PVector();
  this.velocity = new PVector();
  this.position = position.get();
  this.timeToLive = 255;
};

Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.timeToLive -= 2;
};

Particle.prototype.display = function() {
  stroke(255, 255, 255, this.timeToLive);
  fill(127, 127, 127, this.timeToLive);
  ellipse(this.position.x, this.position.y, 8, 8);
};
timeToLive를 255에서 시작하여 0까지 세도록 만든 이유는 편리하기 때문입니다. 이렇게 하면 타원의 알파 투명도를 설정할 때 timeToLive를 이용할 수 있습니다. 입자가 “죽으면” 스크린에서 희미해질 겁니다.
멤버변수 timeToLive와 함께 새로운 메소드를 하나 추가해야 합니다. 이 함수는 입자가 살아있는지 죽었는지 알아내는 데 필요합니다 (참/거짓 여부). 이 함수는 나중에 입자의 목록을 관리하는 ParticleSystem 객체를 만들 때 도움이 됩니다. 이 함수는 만들기가 꽤 쉽습니다. timeToLive의 값이 0이면 참을 반환하고 그렇지 않으면 거짓을 반환합니다.
Particle.prototype.isDead = function() {
  return this.timeToLive < 0;
};
많은 입자를 만드는 단계로 넘어가기 전에 Particle 객체 한 개에서 입자가 올바르게 동작하는지 확인하고 구상하는 것이 중요합니다. 다음은 두 가지 사항을 추가하여 완성된 코드입니다. 편의를 위해 update()display()를 호출하는 run() 이란 메소드를 추가했습니다. 또 입자에 임의의 초기 속도뿐만 아니라 중력을 묘사한 하향 가속도를 추가했습니다.
이제 단일 입자에 대한 객체를 완성했으니 다음 단계로 넘어갈 준비가 된 것 같군요. 그런데 프로그램이 실행하는 동안 얼마나 많은 입자를 생성했는지 알 수 없는데 어떻게 하면 그렇게 많은 입자를 제어할 수 있을까요?’