본문 바로가기
p5.js

[p5.js / The nature of code] 4. Paritcle Systems 4.1 Why Particle Systems Matter(파티클 시스템)

by the_cat_Soy 2024. 5. 9.
 

Nature of Code

Simulating Natural Systems with JavaScript

natureofcode.com

 

 

1982년에 Lucasfilm 연구원 William T. Reeves는 Star Trek II: The Wrath of Khan을 작업하고 있었습니다 . 영화의 대부분은 황량하고 생명이 없는 행성에 발사되었을 때 물질을 재구성하고 식민지화를 위한 거주 가능한 세계를 만드는 능력을 가진 어뢰인 Genesis Device를 중심으로 전개됩니다. 시퀀스가 진행되는 동안 행성이 "테라포밍"되는 동안 불의 벽이 행성 전체에 잔물결을 일으키게 됩니다. 컴퓨터 그래픽에서 매우 일반적이고 유용한 기술인 파티클 시스템 이라는 용어는 이 특정 효과를 생성하는 과정에서 만들어졌습니다. Reeves가 말했듯이 :

파티클 시스템은 퍼지 개체를 나타내는 수많은 미세한 입자의 모음입니다. 일정 시간이 지나면 입자가 시스템에 생성되고 시스템 내에서 움직이고 변화하며 시스템에서 죽습니다.

 

1980년대 초반부터 파티클 시스템은 불, 연기, 폭포, 안개, 풀, 거품 등과 같은 다양하고 불규칙한 유형의 자연 현상을 모델링하기 위해 수많은 비디오 게임, 애니메이션, 디지털 예술 작품 및 설치물에 사용되었습니다.

 

이 장에서는 파티클 시스템 코딩 및 관련 데이터 관리 전략을 살펴보겠습니다. 코드를 어떻게 구성하나요? 개별 파티클와 관련된 정보와 시스템 전체와 관련된 정보를 어디에 저장합니까? 내가 다룰 예제에서는 파티클에 간단한 점을 사용하고 가장 기본적인 동작만 적용합니다. 그러나 이러한 특성으로 인해 상상력이 제한되어서는 안 됩니다. 파티클 시스템이 반짝거리거나, 앞으로 날아가거나, 중력에 의해 떨어지는 경향이 있다고 해서 여러분의 시스템도 그러한 특성을 가져야 한다는 의미는 아닙니다. 이 장의 프레임워크를 기반으로 파티클을 렌더링하고 동작을 계산하는 보다 창의적인 방법을 추가하면 다양한 효과를 얻을 수 있습니다.

즉, 이 장의 초점은 많은 요소로 구성된 시스템을 추적하는 방법 에 있습니다. 해당 요소의 기능과 모양은 전적으로 귀하에게 달려 있습니다.

 

 

파티클 시스템이 중요한 이유

 파티클 시스템은 독립된 물체의 모음입니다. 이 물체들은 종종 점 또는 다른 간단한 형태로 표현됩니다. 그렇다면 이게 왜 중요한 걸까요? 분명히, 몇 가지 현상을 모델링하는 것(폭포!)은 매력적이고 유용할 수 있습니다. 그러나 더 광범위하게, 더 복잡한 시뮬레이션을 개발할 때 많은 물체들로 이루어진 시스템을 다루게 될 것입니다—공이 튀기고, 새들이 떼를 지어 날고, 생태계가 진화하는 등 다양한 것들이 복수 형태로 있습니다. 여기서 논의하는 파티클 시스템 전략들은 이러한 모든 상황에서 도움이 될 것입니다.

 

 사실, 이 책의 이 장부터는 물체 목록을 포함하는 스케치가 거의 모든 장에 나옵니다. 그것이 바로 파티클 시스템입니다. 네, 이전 장의 몇 가지 예제에서 이미 배열에 대해 언급했습니다. 그러나 이제는 더 나아가보겠습니다. 이것이 바로 이 책에서 전혀 다루지 않았던 곳입니다.

 

먼저, 유연한 양의 요소를 수용하고 싶습니다. 어떤 예제는 아무것도 없을 수도 있고, 때로는 한 가지 것일 수도 있고, 때로는 열 개의 것일 수도 있으며 때로는 만 개의 것일 수도 있습니다. 둘째, 더 세련된, 객체 지향적인 접근 방식을 취하고 싶습니다. 단일 파티클을 설명하는 클래스를 작성하는 것뿐만 아니라, 전체 파티클 모음을 설명하는 클래스를 작성하고 싶습니다—즉, 파티클 시스템 자체입니다. 여기서의 목표는 다음과 같은 스케치를 작성할 수 있는 것입니다.

 

let system;

function setup() {
  createCanvas(640, 360);
  system = new ParticleSystem();
}

function draw() {
  background(255);
  system.run();
}

 

 

 이 코드에서는 단일 파티클이 언급되지 않았지만, 결과물은 캔버스 전체에 날아다니는 파티클들로 가득할 것입니다. 이것은 세부 사항이 ParticleSystem 클래스 내부에 숨겨져 있기 때문에 작동합니다. 다중 클래스로 스케치를 작성하는 이 기술에 익숙해지는 것은 이 책의 후반부 장에 도달할 때 유용할 것입니다.

 

마지막으로, 파티클 시스템과 함께 작업하는 것은 상속과 다형성이라는 두 가지 다른 OOP 기법을 다루는 기회입니다. 지금까지 보여준 예제들에서는 항상 단일 유형의 객체 배열을 사용했습니다. 상속과 다형성을 사용하면 단일 목록을 사용하여 다른 유형의 객체를 저장할 수 있는 편리한 방법을 보여줄 것입니다. 이렇게 하면 파티클 시스템이 반드시 한 종류의 파티클 시스템이 되지 않아도 됩니다.