[JS] 힘 개념 이해하기 1 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-forces/a/newtons-laws-of-motion

 

 

뉴턴의 운동 법칙

 

벡터(vector)처럼, 힘(force)은 다양한 의미를 가지고 있다. 힘은 어떤 강력한 물리력, 이를테면, 바위를 큰 힘으로 미는 것을 의미하는 개념이 될 수 있다. 여기서 다룰 힘 의 정의는 물리학에서 배우는 힘이고, 아이작 뉴턴(Isaac Newton)의 운동의 법칙에서 비롯된 개념이다.

 

힘은 질량을 지닌 물체를 가속하는 벡터다.

 

 

뉴턴의 제1법칙

 

뉴턴의 제1법칙은 다음과 같이 정의한다.

움직이지 않는 물체는 계속 움직이지 않으려 하고 움직이는 물체는 불균형력이 가해지지 않는 한 일정한 속도와 방향으로 계속 움직이려 한다.

 

애초에 힘이 아예 없으면 물체가 계속 움직이게 하는 데 어떠한 힘도 필요하지 않다. 지구 대기권에 던져진 (공과 같은) 물체는 공기 저항(힘) 때문에 점차 느려진다.

 

힘이 없거나 물체에 가해지는 힘이 서로 상쇄되면 즉, 알짜 힘이 결국 0이 되면 물체의 속도는 일정하게 유지된다. 이것을 평형(equilibrium)이라 한다. 일단 공기 저항력이 중력과 같아지면 떨어지는 공은 (일정하게 유지되는) 종단 속도에 도달하게 될 것이다.

 

ProcessingJS 세계에서 뉴턴의 제1법칙을 다음과 같이 다시 기술할 수 있다.

객체의PVector 속도는 평형의 상태에 있는 경우 일정하게 유지된다.

 

 

뉴턴의 제3법칙

 

이 법칙은 종종 다음과 같이 기술된다.

모든 작용은 반대방향으로 똑같은 힘을 가지는 반작용이 있다.

 

벽을 민다고 가정해 보자. 벽은 적극적으로 우리를 반대로 밀지는 않는다. 벽은 우리를 밀만 한 근원이 되는 힘을 갖고 있지 않다. 그러나 우리의 미는 힘에는 “작용/반작용이 쌍”이 되는 두 개의 힘이 포함된다.

 

힘은 항상 쌍으로 발생한다. 두 힘은 세기가 같지만 방향은 반대다.

 

뉴턴의 제3 법칙을 ProcessingJS에 맞게 다시 기술하면 아래와 같다.

물체 B에 대한 물체 A의 힘인 PVector f 를 계산한다면 반드시 물체 B가 물체 A에 가하는 힘인 PVector.mult(f,-1);도 적용해야 한다.

 

나중에 ProcessingJS 프로그래밍 세계에서 항상 위 법칙을 따를 필요는 없다는 사실을 알게 될 것이다. 정밀하게 모든 것을 완벽히 시뮬레이션을 하는 것이 아니라 단지 자연계의 물리 현상에서 영감을 얻는다는 사실을 기억하자.

 

 

 

뉴턴의 제2법칙

 

전통적으로 이 규칙은 다음과 같이 정의한다.

힘은 질량 곱하기 가속도이다. 

 

 

 

즉 가속도는 힘과 비례하고 질량에 반비례한다.

 

여기서 물체의 질량은 물체에 포함되어 있는 물질의 양이다. 무게는 물체에 작용하는 중력의 힘을 말한다.
뉴턴의 제 2 법칙에 따라 질량 곱하기 중력 가속도 (w = m * g)를 통해 무게를 계산할 수 있다. 밀도는 질량을 단위 부피로 나눈 값으로 정의한다.

 

지구에서 질량이 1 kg인 물체는 달에서도 질량이 1 kg다. 그러나 무게는 1/6로 줄어든다.

 

이제 ProcessingJS의 세계에서 질량은 무엇일까? 간단히 하기 위해 상상의 픽셀 세계에서 모든 물체들의 질량은 1이라고 하자. F/1 = F이다. 따라서, 다음이 성립한다.

물체의 가속도는 힘과 같다.

 

Mover 객체를 만들 때 배웠던 것처럼 현재 위치, 속도, 가속도를 갖는 객체를 만들어 보자. 지금 목표는 이 객체에 힘을 부여하는 것이다.

mover.applyForce(wind);

// or

mover.applyForce(gravity);

 

이때, 바람과 중력은 PVector이다. 뉴턴의 제2법칙에 따라 이 함수를 다음과 같이 구현할 수 있다.

Mover.prototype.applyForce = function(force) {
    this.acceleration = force;
};

 

 

 

힘의 축적

 

applyForce()는 뉴턴의 제2 법칙을 정의 그대로 해석한 것이다. 그런데 여기에는 꽤 큰 문제가 있다. 지금 이루고자 하는 목표는 화면상에서 바람과 중력에 의해 움직이는 객체를 생성하는 것이다.

mover.applyForce(wind);
mover.applyForce(gravity);

 

위와 같이 호출한다면 Mover 객체의 가속도는 중력 PVector로 설정된다. 한 번 이상 applyForce()을 호출하면 이전 호출을 무시하고 덮어쓰게 된다. 하나 이상의 힘을 어떻게 처리해야 할까?

 

뉴턴의 제2 법칙을 좀 더 정확하게 정의하면 다음과 같다.

알짜 힘은 질량 곱하기 가속도와 같다.

 

이는 가속도가 힘의 총량 을 질량으로 나눈 값과 같다는 말과 같다. 결국 뉴턴의 제1법칙과 같이, 모든 힘의 합이 0이 되면 물체는 평형 상태(가속도가 존재하지 않는 상태)가 된다. 프로그래밍에서는 힘의 축적이라고 알려진 프로세스를 통해 이를 구현할 수 있다. 이는 실제로 매우 간단해서, 단지 모든 힘을 더하면 된다.

 

이제 applyForce() 메소드를 변경하여 힘을 축적하면서 가속도에 새로운 힘을 더해보자.

Mover.prototype.applyForce = function(force) {
    this.acceleration.add(force);
};

 

힘의 축적을 구현하기 위해 한 가지를 더 해야 한다. 계속해서 모든 힘을 더해야 하므로, 매번 update()가 호출되기 전에 확실하게 가속도를 없애야 (가속도를 0으로 설정)한다.

 

각 프레임에 대해 가속도를 없애는 가장 쉬운 방법은 update()의 마지막 PVector에 0을 곱하는 것이다.

Mover.prototype.update = function() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
};

 

 

 

질량

뉴턴의 제2 법칙은 실제로 A = F 가 아닌 F = MA 다. 질량을 부여하는 것은 객체에 프로퍼티를 추가하는 것만큼 쉽다.

 

질량에 대해 생각하기 시작했으니 측정 단위를 짚고 넘어가는 것이 중요하다. 여기서는 단위로 픽셀과 프레임을 사용한다.

(편의를 위해 물체의 질량과 크기를 묶도록 한다. 물체의 질량이 10이면 반지름이 10인 원을 그리는 식이다. 이렇게 하면 물체의 질량을 시각화하여 프로그램에서 질량이 야기하는 효과를 관찰할 수 있다.)

 

질량은 벡터가 아니라 스칼라(부동 소수점)이다. 질량은 어떤 물체를 구성하는 물질의 양을 나타내는 수다. 물체의 면적을 질량으로 계산할 수도 있지만 물체의 질량을 10이라고 정하면 프로그램이 간단해진다.

const Mover = function() {
    this.mass = 10;
    this.position = new PVector(random(width), random(height));
    this.velocity = new PVector(0, 0);
    this.acceleration = new PVector(0, 0);
};

 

질량은 뉴턴의 제2법칙을 객체에 적용할 때 이용한다. 여기서 여러 개의 Mover 객체가 있는 시나리오를 위해 주의할 점이 있다. JavaScript에서 PVector 같은 객체에 할당된 변수는 사실 메모리에 있는 객체의 포인터를 가지고 있다. 함수에 객체를 전달하면, 복사본을 전달하는 것이 아니라 기존의 포인터를 전달하게 된다. 따라서 함수가 객체를 수정하면(질량으로 나누는 것처럼) 그 객체는 영구적으로 바뀐다. 따라서 질량으로 나누기 전에 PVector f를 복사해 놓아야 한다.

Mover.prototype.applyForce = function(force) {
    const f = force.copy();
    force.div(this.mass);
    this.acceleration.add(f);
};

 

또 다른 방법으로는, 이전 단원에서 배운 정적 함수를 이용하여 정적 div() 함수를 사용해 메소드를 다시 쓸 수 있다.

Mover.prototype.applyForce = function(force) {
    const f = PVector.div(force, this.mass);
    this.acceleration.add(f);
};

 

여기에서 중요한 것은, 여러 개의 Mover 객체들에 적용할 수 있도록 기존 힘 벡터에 영향을 주지 않는 방법을 찾아야 한다는 점이다.

 

 

힘의 생성

힘을 만드는 가장 쉬운 방법은 그냥 숫자를 선택하는 것이다.

const wind = new PVector(0.01, 0);
const gravity = new PVector(0, 0.1);
mover.applyForce(wind);
mover.applyForce(gravity);

 

이제 서로 다른 크기와 방향을 갖는 두 개의 힘(바람과 중력)이 있다. 두 객체 모두 mover객체에 적용한다.

 

모든 코드를 다 결합한 프로그램은 다음과 같다.

 

 

<canvas id="myCanvas" width="300" height="250" style="border: 1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const context = canvas.getContext('2d');

    const PVector = function(x, y) {
        this.x = x;
        this.y = y;
    };

    PVector.prototype.add = function(v) {
        this.y = this.y + v.y;
        this.x = this.x + v.x;
    };

    PVector.prototype.mult = function(n) {
        this.x = this.x * n;
        this.y = this.y * n;
    };

    // 벡터를 복사하고 그 결과를 반환하는 메소드
    PVector.prototype.copy = function() {
        return new PVector(this.x, this.y);
    };

    PVector.div = function(v1, n) {
        const v3 = new PVector(v1.x / n, v1.y / n);
        return v3;
    };

    const Mover = function() {
        // 물체의 질량
        this.mass = 1;
        this.position = new PVector(0, 0);
        this.velocity = new PVector(0, 0);
        this.acceleration = new PVector(0, 0);
    };

    Mover.prototype.update = function() {
        this.velocity.add(this.acceleration);
        this.position.add(this.velocity);
        // 각 프레임마다 가속도 제거
        this.acceleration.mult(0);
    };

    Mover.prototype.display = function() {
        context.beginPath();
        // 질량의 시각화 (질량에 따라 크기를 계산)
        context.ellipse(this.position.x, this.position.y, this.mass * 20, this.mass * 20, 0, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = '#333333';
        context.stroke();
        context.fillStyle = '#ffffff';
        context.fill();
    };

    // 가장자리에서 객체를 튕겨내는 메소드
    Mover.prototype.checkEdges = function() {
        if (this.position.x > canvas.width) {
            this.position.x = canvas.width;
            this.velocity.x *= -1;
        } else if (this.position.x < 0) {
            this.velocity.x *= -1;
            this.position.x = 0;
        }
        if (this.position.y > canvas.height) {
            this.velocity.y *= -1;
            this.position.y = canvas.height;
        }
    };

    // 뉴턴의 제 2법칙 (힘을 받고, 질량으로 나누고, 가속도에 더함)
    Mover.prototype.applyForce = function(force) {
        const f = PVector.div(force, this.mass);
        this.acceleration.add(f);
    };

    const mover = new Mover();

    const update = () => {
        context.clearRect(0, 0, canvas.width, canvas.height);

        // 바람과 중력 적용
        const wind = new PVector(0.01, 0);
        const gravity = new PVector(0, 0.1);
        mover.applyForce(wind);
        mover.applyForce(gravity);

        mover.update();
        mover.checkEdges();
        mover.display();

        requestAnimationFrame(update);
    };

    update();
</script>

 

 

 

여러 물체의 움직임

질량과 위치가 다양한, 하나 이상의 물체의 움직임을 구현해보자.

 

 

<canvas id="myCanvas" width="300" height="250" style="border: 1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const context = canvas.getContext('2d');

    const PVector = function(x, y) {
        this.x = x;
        this.y = y;
    };

    PVector.prototype.add = function(v) {
        this.y = this.y + v.y;
        this.x = this.x + v.x;
    };

    PVector.prototype.mult = function(n) {
        this.x = this.x * n;
        this.y = this.y * n;
    };

    // 벡터를 복사하고 그 결과를 반환하는 메소드
    PVector.prototype.copy = function() {
        return new PVector(this.x, this.y);
    };

    PVector.div = function(v1, n) {
        const v3 = new PVector(v1.x / n, v1.y / n);
        return v3;
    };

    // 다양한 질량과 위치를 갖는 객체 생성자
    const 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.prototype.update = function() {
        this.velocity.add(this.acceleration);
        this.position.add(this.velocity);
        // 각 프레임마다 가속도 제거
        this.acceleration.mult(0);
    };

    Mover.prototype.display = function() {
        context.beginPath();
        // 질량의 시각화 (질량에 따라 크기를 계산)
        context.ellipse(this.position.x, this.position.y, this.mass * 20, this.mass * 20, 0, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = '#333333';
        context.stroke();
        context.fillStyle = '#ffffff';
        context.fill();
    };

    // 가장자리에서 객체를 튕겨내는 메소드
    Mover.prototype.checkEdges = function() {
        if (this.position.x > canvas.width) {
            this.position.x = canvas.width;
            this.velocity.x *= -1;
        } else if (this.position.x < 0) {
            this.velocity.x *= -1;
            this.position.x = 0;
        }
        if (this.position.y > canvas.height) {
            this.velocity.y *= -1;
            this.position.y = canvas.height;
        }
    };

    // 뉴턴의 제 2법칙 (힘을 받고, 질량으로 나누고, 가속도에 더함)
    Mover.prototype.applyForce = function(force) {
        const f = PVector.div(force, this.mass);
        this.acceleration.add(f);
    };

    const movers = [];

    for (let i = 0; i < 20; i++) {
        // (0, 0) 위치에서 시작하는 다양한 질량의 객체를 20개 생성
        movers[i] = new Mover(Math.random(0.1, 5), 0, 0);
    }

    const update = () => {
        context.clearRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < movers.length; i++) {
            // 바람과 중력 적용
            const wind = new PVector(0.01, 0);
            const gravity = new PVector(0, 0.1);
            movers[i].applyForce(wind);
            movers[i].applyForce(gravity);

            movers[i].update();
            movers[i].checkEdges();
            movers[i].display();
        }

        requestAnimationFrame(update);
    };

    update();
</script>