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

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

주요 내용

여러 물체의 움직임

우리는 지금까지 현실 세계에서 영감을 찾았습니다. 현실 세계는 하나 이상의 움직이는 물체가 있습니다. 우리 주변에 있는 물체는 질량과 위치가 다양합니다. 이제는 Mover가 현실 세계를 반영해서 좀 더 현실적이게 움직이게 만드는 방법을 알아봅시다.
현실적인 객체를 만들기 위해 먼저 객체 지향적 프로그래밍을 빠르게 복습해볼 필요가 있습니다. 다시 한번 말하지만, 여기에 객체 지향적 프로그래밍의 기초를 전부 다루지는 않을 겁니다. 그러나 객체로 가득 찬 환경을 만든다는 개념은 이 과정의 모든 예제에 적용되는 근본적인 개념이기 때문에, 한 객체에서 여러 객체로 넘어가는 과정을 연습할 만한 가치가 충분히 있습니다.
기억을 되살리자면 아래 보이는 것은 여태까지 만들어온 Mover의 모습입니다. 이 객체는 두 가지 요소를 제외하고 벡터를 처음 소개했을 때 만들었던 Mover 객체와 똑같습니다. 추가된 두 가지 요소는 mass와 새로운 applyForce() 메소드입니다.
이제 객체 설정을 마쳤으므로, 이제 반복문으로 20개의 Mover 인스턴스를 가진 배열을 초기화합니다.
var movers = [];

for (var i = 0; i < 20; i++) {
    movers[i] = new Mover();
}
그런데 지금 작은 문제가 생겼습니다. 만약 Mover 객체의 생성자를 다시 참조하면 다음과 같은 사태가 발생합니다
var Mover = function() {
    this.mass = 1;
    this.position = new PVector(30, 30);
    this.velocity = new PVector(0, 0);
    this.acceleration = new PVector(0, 0);
};
여기서 모든 Mover 객체가 똑같은 모양으로 생성되었습니다. 구현하고자 하는 것은 다양한 질량을 갖는 Mover 객체를 다양한 위치 에서 생성하는 것입니다. 여기서는 인수를 추가하여 생성자를 좀 더 정교하게 만들어야 합니다.
var Mover = function(m, x, y) {
    this.mass = m;
    this.position = new PVector(x, y);
    this.velocity = new PVector(0, 0);
    this.acceleration = new PVector(0, 0);
};
위에서 질량과 위치를 더 이상 하드 코딩된 숫자로 설정하지 않고 생성자를 통해 전달되는 인수를 통해 초기화시켰습니다. 이것은 다양한 Mover 객체 즉, 큰 것, 작은 것, 화면 왼쪽에서 시작하는 것, 오른쪽에서 시작하는 것 등을 만들 수 있다는 것을 의미합니다.
// 창의 왼쪽에 있는 큰 Mover
var m1 = new Mover(10, 0, height/2);
// 창의 오른쪽에 있는 작은 Mover
var m2 = new Mover(0.1, width, height/2);
그러나 배열을 이용할 경우, 반복문를 이용하여 모든 객체들을 초기화해야 합니다.
for (var i = 0; i < 20; i++) {
    movers[i] = new Mover(random(0.1, 5), 0, 0);
}
생성된 각 mover에 대해 질량은 0.1부터 5 사이 난수로, 초기 x-위치는 0으로, 초기 y-위치는 0으로 설정합니다. 물론 객체들을 초기화하기 위해 선택할 방법은 다양합니다. 이것은 그중 한 방법입니다.
일단 객체의 배열이 선언, 생성, 초기화되면 코드의 나머지 부분은 간단합니다. 모든 객체를 실행하고 환경 내 각 힘을 전달해주고 쇼를 즐기면 됩니다.
draw = function() {
  background(50, 50, 50);

  for (var i = 0; i < movers.length; i++) {
    var wind = new PVector(0.01, 0);
    var gravity = new PVector(0, 0.1);
    movers[i].applyForce(wind);
    movers[i].applyForce(gravity);
    movers[i].update();
    movers[i].display();
    movers[i].checkEdges();
  }
};
아래는 모든 것을 합쳐 놓은 프로그램입니다. 프로그램을 실행하면 작은 원이 큰 원보다 화면 오른쪽에 먼저 도달하는 것을 잘 보세요. 이런 현상은 공식 가속도 = 힘 / 질량 때문에 발생합니다. 질량이 클수록 가속도는 작습니다.

본 "내추럴 시뮬레이션" 과정은 다니엘 쉬프만(Daniel Shiffman)이 저술한 "The Nature of Code"의 내용을 차용한 것이며, 본 내용물의 저작권은 Creative Commons Attribution-NonCommercial 3.0 Unported License를 적용합니다.