주요 내용
입자 시스템의 시스템
구글 클래스룸여기서 잠시 여태까지 배운 개념을 검토해 봅시다. 개별 Particle 객체를 묘사할 수 있습니다. 또
Particle 객체 시스템을 묘사할 수 있습니다. 이것을 “입자 시스템”이라고 합니다. 그리고 입자 시스템을 독립적인 객체의 집합체로 정의하였습니다. 그런데 입자 시스템 자체도 객체가 아닌가요? 만약 그렇다면 (실제로 객체가 맞습니다) 많은 입자 시스템의 집합체 즉, 시스템의 시스템을 갖지 못할 이유가 없습니다.물론 생각의 끈을 연장해서 더 나아간다면, 아마도 며칠 동안 지하실에 있으면서 시스템의 시스템의 시스템의 시스템의 시스템의 시스템을 그림으로 그리고 있을 겁니다. 그런데 결국 세상은 이런 방식으로 돌아가고 있습니다. 장기는 세포의 시스템이고 인간의 몸은 장기의 시스템이고 이웃은 인간들의 시스템이고 도시는 동네의 시스템입니다. 이 자체도 생각해 볼 만한 개념이지만 지금은 따로 집중해야 할 분야가 있습니다. 그래도 많은 입자를 가진 입자 시스템의 시스템을 다루는 프로그램을 작성하는 방법을 알아두면 꽤 유용하게 쓸 수 있습니다. 다음과 같은 시나리오를 생각해 보겠습니다.
- 빈 화면에서 시작합니다.
- 마우스를 클릭하고 클릭한 위치에 입자 시스템을 생성합니다.
- 마우스를 클릭할 때마다 해당 위치에 새로운 시스템이 생성됩니다.
직접 한 번 해보세요:
코드로 이것을 어떻게 쓸까요? 이전 개념이해하기 부분에서는 변수
ps 내에 ParticleSystem 객체 하나를 저장했습니다.var ps = new ParticleSystem(new PVector(width/2, 50));
draw = function() {
background(50, 50, 50);
ps.addParticle();
ps.run();
};이제 수없이 많이 생성할 수 있는 시스템을 다수 만들었습니다. 이 수많은 시스템을 개별적인 변수로 저장하는 것은 좋지 않습니다. 대신 모든 시스템을 다루기 위해 배열을 이용할 것입니다. 프로그램을 실행하면 배열이 빈 상태에서 시작할 겁니다:
var systems = [];마우스를 클릭할 때마다 새로운
ParticleSystem 객체를 생성하고, 이를 배열에 밀어 넣습니다:mousePressed = function() {
systems.push(new ParticleSystem(new PVector(mouseX, mouseY)));
};그리고 단일
ParticleSystem 객체를 참조하는 대신, 이제는 draw()에서 배열 안의 모든 시스템을 살펴보고 각각에 대해 run()을 호출합니다. draw = function() {
background(50, 50, 50);
for(var i = 0; i < systems.length; i++){
systems[i].addParticle();
systems[i].run();
}
};이제 완성된 코드를 직접 가지고 놀아보세요: