[JS] 힘 개념 이해하기 2

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-forces/a/modeling-gravity-and-friction

중력 및 마찰력 모델링

지난 예제에서 만든 중력을 개선하면서 여기에 마찰력을 추가시켜 보자.

지구의 중력

뉴턴의 제2법칙에 따라 질량이 작으면 가속도가 크다고 설정했지만 실제로는 그렇지 않다.

중력은 물체의 질량에 따라 달라진다. 물체가 무거울수록 힘이 더 크기 때문에 힘이 질량에 따른다면, 힘을 질량으로 나누었을 때 질량은 사라진다. 프로그램에 만들었던 질량에 따른 가속도(중력)에 이를 구현하면 다음과 같다.

<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.set = 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].mass);
            movers[i].applyForce(wind);
            movers[i].applyForce(gravity);

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

        requestAnimationFrame(update);
    };

    update();
</script>

마찰력

마찰력은 산일적인 힘이다. 산일적인 힘이란 어떤 물체가 운동할 때 총 에너지가 점점 줄어드는 힘을 일컫는 것이다. 마찰력에는 정지마찰력 (정지 중인 물체와 면)과 운동마찰력 (이동 중인 물체와 면) 두 종류가 있으나 프로그래밍 목적에 맞는 운동마찰력만 배워보자.

위 그림을 보면 마찰력은 속도와 방향이 반대다. 공식 중 -1 * v^부분 즉, -1 곱하기 속도의 단위 벡터는 마찰력이 속도와 방향이 반대라는 것을 말해준다. ProcessingJS에서 이것은 속도 벡터를 정규화 시킨 다음 -1로 곱해주는 것을 의미한다.

공식에서 마찰력의 크기는 μ * N 으로 정의된다. 앞에 있는 그리스 문자 뮤는 마찰계수를 나타낸다. 마찰계수는 어떤 면 고유의 마찰력으로 그 종류에 따라 수치가 다른 값이다. 값이 클수록 마찰력이 더 강해지고 값이 작을수록 마찰력은 더 약해진다.

N은 수직항력을 나타낸다. 물체가 서로에 닿을 때 발생하는 접촉력이다. (뉴턴의 제 3법칙) 좀 더 정확히 N은 접촉력의 수직 요소라고 할 수 있다.

물체가 수평으로 움직일 때 수직항력은 질량에 중력을 곱한 값으로 Fn = mg라고 쓴다. 이 말은 가벼운 스포츠카는 상대적으로 작은 수직항력을 가하고, 따라서 큰 트레일러보다 작은 마찰력을 경험한다는 뜻이다. 그러나 위 그림에서 물체는 일정 각도로 표면을 따라 움직이고 있고, 그러면 수직 항력을 계산하는 것이 약간 더 복잡하다. 중력과 방향이 동일하지 않기 때문이다. 이 때문에 각도와 삼각법에 대해 알아야 한다.

// 마찰계수 : 0.001이라고 설정
const c = 0.01;

// 수직항력 : 항상 1이라고 설정
const normal = 1;

// 마찰력의 크기
const frictionMag = c * normal;

// 속도 벡터를 가져옴
const friction = movers[i].velocity.get();

// 마찰력의 방향 : 속도와 반대이므로 곱하기 -1
friction.mult(-1);

// 마찰력의 방향 : 속도 벡터 정규화 (마찰력의 크기는 이동속도와는 관계가 없음)
friction.normalize();

// 마찰력의 크기와 방향을 합쳐줌
friction.mult(frictionMag);

이전에 만든 힘 예제에 마찰력을 추가하여 여러 객체가 동시에 바람, 중력, 마찰력에 영향을 받도록 만들어보자. 이 프로그램을 계속 관찰하다 보면 원들이 서서히 느려지면서 어느 순간 모두 제자리에 멈춰있는 것을 볼 수 있다. 마찰력은 원들이 움직이는 반대 방향으로 힘을 가해서 속도를 서서히 늦추는 역할을 한다.

<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.div = function(n) {
        this.x = this.x / n;
        this.y = this.y / n;
    };

    PVector.prototype.mag = function() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    };

    PVector.prototype.normalize = function() {
        const m = this.mag();
        if (m > 0) {
            this.div(m);
        }
    };

    // 벡터를 복사하고 그 결과를 반환하는 메소드
    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].mass);

            const c = 0.01;
            const normal = 1;
            const frictionMag = c * normal;
            const friction = movers[i].velocity.copy();
            friction.mult(-1);
            friction.normalize();
            friction.mult(frictionMag);

            // mover에 마찰력 적용
            movers[i].applyForce(friction);
            movers[i].applyForce(wind);
            movers[i].applyForce(gravity);
            movers[i].update();
            movers[i].display();
            movers[i].checkEdges();
        }

        requestAnimationFrame(update);
    };

    update();
</script>

공기 및 유체 저항

물체가 액체나 기체를 통과할 때 역시 마찰이 발생한다.

다음 공식을 살펴보자.

Fd 는 항력을 뜻한다. 궁극적으로 계산해서 applyForce() 함수에 전달할 벡터다.
-1/2 는 상수다. 이 부분은 음수라는 사실이 중요하다. 마찰력처럼 힘이 속도와 반대 방향이라고 알려주기 때문이다.
ρ 는 그리스 문자 '로'라고 하고 액체의 밀도를 나타내는데, 여기서는 신경 쓰지 않아도 된다. 문제를 간단히 하기 위해 이를 상수의 값 1이라고 가정한다.
는 물체가 움직이는 속력을 나타낸다. 물체의 속력은 속도 벡터의 크기 velocity.mag()와 같다.
는 액체나 기체를 통과하는 물체의 앞면 면적을 의미한다. 예를 들어 공기 역학적으로 설계된 람보르기니는 박스 모양의 볼보보다 적은 공기 저항을 경험한다. 간단한 시뮬레이션에서는 물체가 공 모양이라고 가정하고 이것을 무시할 수 있다.
Cd 는 항력계수이고, 마찰력 계수 μ와 같다. 이 상수로 항력이 센지 약한지 결정할 수 있다. 항력계수는 물체가 통과하기가 쉽거나 통과하기 어려운 정도를 말한다.
v^ 는 속도의 단위 벡터 velocity.normalize()를 의미한다. 마찰력처럼 항력도 속도의 반대 방향을 가리킨다.

각 요소를 분석하고 간단한 시뮬레이션에서 필요한 부분을 결정했으니 식을 다음과 같이 간단히 할 수 있다.

// 식의 첫 번째 부분 (크기): v^2 * Cd
const c = 0.1;
const speed = velocity.mag();
const dragMagnitude = c * speed * speed;

// 식의 두 번째 부분 (방향): v unit vector * -1 
const drag = velocity.get();
drag.normalize();
drag.mult(-1);

// 크기와 방향을 합친 식
drag.mult(dragMagnitude);

이제 Mover 객체가 헤엄칠 액체를 추가하자. 항력 계수는 (0.1) 정도로 낮게 설정하여 천천히 멈출 수 있도록 한다.

// 위치, 너비, 높이, 항력 계수에 대한 프로퍼티를 갖는 직사각형 액체
const Liquid = function(x, y, w, h, c) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.c = c;
};

// 액체를 화면에 출력하는 메소드
Liquid.prototype.display = function() {
  noStroke();
  fill(50);
  rect(this.x, this.y, this.w, this.h);
};

// Liquid 객체의 인스턴스를 선언하고 초기화
const liquid = new Liquid(0, height/2, width, height/2, 0.1);

Mover가 액체를 통과할 때 항력을 받는 동작을 코드로 나타내면 다음과 같다.

// 위치 벡터가 Liquid 직사각형 내에 있는지 확인하는 메소드
Liquid.prototype.contains = function(m) {
    const p = m.position;
    return p.x > this.x && p.x < this.x + this.w && p.y > this.y && p.y < this.y + this.h;
};

// 마찰항력을 계산하는 메소드 (항력 = 속도의 제곱 * 항력계수 * 속도 * -1)
Liquid.prototype.calculateDrag = function(m) {
    // 크기는 계수 * 속도의 제곱
    const speed = m.velocity.mag();
    const dragMagnitude = this.c * speed * speed;

    // 방향은 속도와 반대
    const dragForce = m.velocity.copy();
    dragForce.mult(-1);

    // 알맞은 크기로 조정 
    dragForce.normalize();
    dragForce.mult(dragMagnitude);
    return dragForce;
};

//Mover가 액체에 있는가?
if (liquid.contains(movers[i])) {
    // 항력을 계산
    const dragForce = liquid.calculateDrag(movers[i]);
    // Mover에 항력을 적용
    movers[i].applyForce(dragForce);
}

Liquid 객체형에 위의 두 함수를 넣어 프로그램을 만들어 보면 다음과 같다.

프로그램을 실행하면 물속으로 공이 떨어지는 것을 볼 수 있다. 화면 아래 파란색 영역(액체)을 통과해서 지나가면 물체가 더 느려진다. 또한, 작은 물체는 큰 물체보다 더 급격하게 느려지는 것을 볼 수 있다. 뉴턴의 제 2법칙 A = F / M와 같이 가속도는 힘을 질량으로 나눈 값과 같다. 물체의 질량이 클수록 가속도가 작다. 작은 물체는 빨리 가속한다. 여기에서 언급하는 가속도는 항력으로 인해 점점 느려지는 가속도다. 작은 물체는 큰 물체보다 훨씬 더 높은 비율로 느려질 것이다.

<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.div = function(n) {
        this.x = this.x / n;
        this.y = this.y / n;
    };

    PVector.prototype.mag = function() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    };

    PVector.prototype.normalize = function() {
        const m = this.mag();
        if (m > 0) {
            this.div(m);
        }
    };

    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();
        context.closePath();
    };

    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;
        }
    };

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

    // Liquid 생성자 함수
    const Liquid = function(x, y, w, h, c) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.c = c;
    };

    // Liquid 를 화면에 출력하는 메소드
    Liquid.prototype.display = function() {
        context.beginPath();
        context.rect(this.x, this.y, this.w, this.h);
        context.fillStyle = 'skyblue';
        context.fill();
        context.closePath();
    };

    // 위치 벡터가 Liquid 직사각형 내에 있는지 확인하는 메소드
    Liquid.prototype.contains = function(m) {
        const p = m.position;
        return p.x > this.x && p.x < this.x + this.w && p.y > this.y && p.y < this.y + this.h;
    };

    // 마찰항력을 계산하는 메소드 (항력 = 속도의 제곱 * 항력계수 * 속도 * -1)
    Liquid.prototype.calculateDrag = function(m) {
        const speed = m.velocity.mag();
        const dragMagnitude = this.c * speed * speed;
        const dragForce = m.velocity.copy();
        dragForce.mult(-1);
        dragForce.normalize();
        dragForce.mult(dragMagnitude);
        return dragForce;
    };

    const movers = [];

    // liquid 인스턴스 생성
    const liquid = new Liquid(0, canvas.height / 2, canvas.width, canvas.height / 2, 0.1);

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

        // 액체를 화면에 출력
        liquid.display();

        for (let i = 0; i < movers.length; i++) {

            if (liquid.contains(movers[i])) {
                const dragForce = liquid.calculateDrag(movers[i]);
                // mover에 마찰 항력을 적용
                movers[i].applyForce(dragForce);
            }

            const gravity = new PVector(0, 0.1 * movers[i].mass);
            movers[i].applyForce(gravity);
            movers[i].update();
            movers[i].display();
            movers[i].checkEdges();
        }

        context.fillStyle = '#333333';
        context.fillText('click mouse to reset', 10, 30);

        requestAnimationFrame(update);
    };

    // Mover 인스턴스 무작위 생성
    const resetMovers = function() {
        for (let i = 0; i < 9; i++) {
            movers[i] = new Mover(Math.random(0.5, 3), 20 + i * canvas.width / 9, 0);
        }
    }

    // 캔버스 클릭 시 재시작
    canvas.addEventListener('click', function() {
        resetMovers();
    });

    resetMovers();
    update();
</script>

참조 사이트

생성자 함수에 의한 객체 생성

https://velog.io/@ursr0706/%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98%EC%97%90-%EC%9D%98%ED%95%9C-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1

저작자표시

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

티스토리툴바