[JS] 힘 개념 이해하기 3

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-forces/a/gravitational-attraction

중력 인력

질량을 가진 모든 물체는 모든 다른 물체에 중력을 가한다. 아래의 그림과 같이 중력의 세기를 계산하는 식이 있다.

F 는 중력을 나타내는 값으로, 최종적으로 계산하여 applyForce() 함수에 전달하려는 벡터다.
G 는 만유 인력의 상수로 6.67428 x 10^-11 초(s) 제곱 분의 킬로그램(kg) 분의 미터(m) 세제곱이다. 이것은 힘을 보다 약하게 만들거나 보다 강하게 만드는 상수다. 이 값을 1로 두고 무시해도 큰일나지 않는다.
m₁ 과 m₂ 는 객체 1 과 2 의 질량이다. 뉴턴의 제2 법칙(F =MA)에서 배운것과 같이 질량을 고려하지 않아도 된다. 어차피 화면상 물체의 물리적 질량은 실제로 존재하지 않는다. 그러나 이 값을 유지하는 경우 보다 큰 물체가 작은 물체보다 훨씬 더 강한 중력을 발휘하는 재미있는 시뮬레이션을 만들 수 있다.
r^은 객체 1 에서 객체 2 를 가리키는 단위 벡터다. 한 객체에서 다른 객체의 위치를 빼서 이 방향 벡터를 계산할 수 있다.
r ² 는 두 물체 사이의 거리를 제곱한 것이다. 힘의 강도는 거리 제곱에 반비례한다. 물체가 멀리 있을수록 힘은 더 약해지고 가까울수록 더 강해진다.

다음을 가정해 보자.

각 객체의 PVector 위치는 location1과 location2이다.
각 객체의 질량은 mass1과 mass2이다.
만유 인력 상수는 숫자 변수 G다.

위와 같은 가정하에서 중력의 힘 PVector force를 계산하고자 한다. 두 부분으로 나누어서 계산해 보자. 먼저 위의 식에서 힘의 방향 r ² 을 계산한다. 두 번째로 질량과 거리에 따른 힘의 세기를 계산한다.

벡터(힘의 방향)는 두 점 사이의 거리다. 한 점에서 다른 한 점으로 가리키는 벡터를 만들기 위해서는 단순히 다른 점에서 한 점을 빼면 된다. 방향만을 알려 주는 단위 벡터가 필요하기 때문에 위치를 뺀 후에 벡터를 정규화해야 한다는 점을 잊지 말자.

// 인력의 방향
const dir = PVector.sub(location1, location2);
dir.normalize();

힘의 방향을 알았다. 이제 벡터의 크기를 계산하고 그에 맞추어 조정하면 된다.

// 인력의 세기
const m = (G * mass1 * mass2) / (distance * distance);
dir.mult(m);

위의 코드가 동작하기 위해 거리가 필요하다. 그런데 우리는 방금 한 위치에서 또 다른 위치 끝까지 가리키는 벡터를 만들었다. 여기서 벡터의 길이가 두 객체 사이의 거리가 된다. 코드 한 줄을 추가해서 벡터를 정규화하기 전에 벡터의 크기를 알 수 있다면 거리도 알 수 있다.

// 한 객체에서 다른 객체를 가리키는 벡터
const force = PVector.sub(location1, location2);

// 해당 벡터의 길이(크기)는 두 객체들 사이의 거리
const distance = force.magnitude();

// 중력에 대한 공식을 이용하여 힘의 크기를 계산
const strength = (G * mass1 * mass2) / (distance * distance);

// 힘 벡터를 정규화하고 적절한 크기로 조정
force.normalize();
force.mult(strength);

이제 고정된 위치를 갖는 새로운 Attractor 객체를 프로그램에 추가해보자. Mover object가 Attractor object쪽으로 끌리는 중력을 경험할 수 있도록 만들어보자.

// 어트랙터 생성자 함수
const Attractor = function() {
    // 위치
    this.position = new PVector(canvas.width / 2, canvas.height / 2);
    // 질량
    this.mass = 20;
    // 만유 인력
    this.G = 1;
};

// 어트랙터를 화면에 출력하는 메소드
Attractor.prototype.display = function() {
    context.beginPath();
    context.ellipse(this.position.x, this.position.y, this.mass * 2, this.mass * 2, 0, 0, Math.PI * 2, false);
    context.fillStyle = '#b1c1d1';
    context.fill();
    context.closePath();
};

정의한 후에 Attractor 객체 형태의 인스턴스를 만들 수 있다.

const mover = new Mover();
const attractor = new Attractor();

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

    attractor.display();
    mover.update();
    mover.display();

    requestAnimationFrame(update);
};

이 프로그램의 퍼즐 마지막 조각은 한 물체가 다른 물체를 끌어당기는 동작을 구현하는 것이다. 두 물체를 어떻게 해야 서로 교감할 수 있을까?

이렇게 동작할 수 있도록 프로그램을 설계하는 방법은 많이 있다.

	방법	함수
1	~~Attractor와 Mover를 수신하는 함수~~	~~attraction(a, m);~~
2	~~Mover를 전달받는 Attractor 객체 내 메소드~~	~~a.attract(m);~~
3	~~Attractor를 전달받는 Mover 객체 내 메소드~~	~~mover.attractedTo(a);~~
4	Mover를 전달받은 후 인력인 PVector를 반환하는 Attractor 객체 내의 메소드. (이후 인력은 Mover의 applyForce() 메소드로 전달됨)	`var f = a.calculateAttraction(m);

현재까지의 과정으로는 물체가 서로 상호 작용하게 만드는 코드 중 네 번째 선택이 가장 적절한 것으로 보인다.

이제 update() 함수를 아래와 같이 정리할 수 있다.

const mover = new Mover();
const attractor = new Attractor();

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

    // 두 object들 사이의 인력을 계산해서 적용
    const f = attractor.calculateAttraction(mover);
    mover.applyForce(f);

    attractor.display();
    mover.update();
    mover.display();

    requestAnimationFrame(update);
};

인력을 계산하는 calculateAttraction() 메소드를 작성하면 다음과 같다.

* 중력을 계산하는 식을 적용하면서 동시에 해결해야 할 작은 문제가 있다. ProcessingJS 세계에서 mover는 결국 attractor에 매우 근접하게 되면 힘이 너무 강해서 mover가 화면 밖으로 튕겨 나갈 수도 있다. Mover 가 실제로 있는 위치에 상관없이 attractor 로부터 5 픽셀보다 작거나 25 픽셀 이상 거리를 두지 않도록 만들어 주어야 한다.

최소 거리를 제한하는 이유와 마찬가지로, 최대 거리를 제한하는 것도 좋을 것이다. 즉, mover가 attractor로부터 500 픽셀에 있다면(지나치게 멀지는 않은 거리) 힘을 250,000으로 나누는 것이다. 이렇게 하면 힘은 전혀 적용하지 않을 정도로 너무 약해질 수 있다.

// 어트랙터와 mover 사이의 인력을 계산하는 메소드
Attractor.prototype.calculateAttraction = function(mover) {
    // 힘의 방향 계산
    const force = PVector.sub(this.position, mover.position); 
    // 객체 사이의 거리
    let distance = force.mag();
    
    // 거리 범위 제한 (너무 가깝거나 아주 먼 객체의 경우)
    distance = constrain(distance, 5, 25);
    // 정규화
    force.normalize();

    // 중력의 크기 계산
    const strength = (this.G * this.mass * mover.mass) / (distance * distance);
    
    // 힘 벡터 = 크기 * 방향
    force.mult(strength);
    // 힘을 반환
    return force; 
};

이제 모든 것을 프로그램에 통합해보자. Mover 의 객체형은 전혀 바뀌지 않았지만, 이제 프로그램에 Attractor 객체와 그 둘을 함께 묶는 코드가 들어갔다. 또 attractor를 마우스로 제어하기 위해 코드를 프로그램에 추가해서 효과를 관찰하기 더 쉽게 되었다.

<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 positionX  = canvas.offsetLeft;
    const positionY  = canvas.offsetTop;
    let mouseX = 0;
    let mouseY = 0;

    const mouseMoved = function(e) {
        mouseX = e.clientX - positionX;
        mouseY = e.clientY - positionY;
        attractor.handleHover(mouseX, mouseY);
    };

    const mousePressed = function(e) {
        e.preventDefault();
        attractor.handlePress(mouseX, mouseY);
    };

    const mouseDragged = function() {
        attractor.handleHover(mouseX, mouseY);
        attractor.handleDrag(mouseX, mouseY);
    };

    const mouseReleased = function() {
        attractor.stopDragging();
        canvas.removeEventListener('mousemove', mouseDragged);
        canvas.removeEventListener('mousemove', mouseReleased);
    };

    canvas.addEventListener('mousemove', mouseMoved);

    canvas.addEventListener('mousedown', function(e) {
        mousePressed(e);
        canvas.addEventListener('mousemove', mouseDragged);
        canvas.addEventListener('mouseup', mouseReleased);
    });

    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.sub = function(v) {
        this.x = this.x - v.x;
        this.y = this.y - v.y;
    };

    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.sub = function(v1, v2) {
        const v3 = new PVector(v1.x - v2.x, v1.y - v2.y);
        return v3;
    };

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

    PVector.constrain = function(n, low, high) {
        return Math.max(Math.min(n, high), low);
    };

    PVector.dist = function(...args) {
        if (args.length === 4) {
            //2D
            return Math.hypot(args[2] - args[0], args[3] - args[1]);
        } else if (args.length === 6) {
            //3D
            return Math.hypot(args[3] - args[0], args[4] - args[1], args[5] - args[2]);
        }
    };

    const Mover = function() {
        this.position = new PVector(400, 50);
        this.velocity = new PVector(1, 0);
        this.acceleration = new PVector(0, 0);
        this.mass = 1;
    };

    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 * 16, this.mass * 16, 0, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = '#333333';
        context.stroke();
        context.fillStyle = '#ffffff';
        context.fill();
        context.closePath();
    };

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

    // 어트랙터 생성자 함수
    const Attractor = function() {
        this.position = new PVector(canvas.width / 2, canvas.height / 2);
        this.mass = 20;
        this.G = 1;

        // 마우스 상호 작용
        this.dragOffset = new PVector(0, 0);
        this.dragging = false;
        this.rollover = false;
    };

    // 어트랙터를 화면에 출력하는 메소드
    Attractor.prototype.display = function() {
        context.beginPath();
        context.ellipse(this.position.x, this.position.y, this.mass, this.mass, 0, 0, Math.PI * 2, false);
        if (this.dragging) {
            context.fillStyle = '#86888b';
        } else if (this.rollover) {
            context.fillStyle = '#a3abb3';
        } else {
            context.fillStyle = '#b1c1d1';
        }
        context.fill();
        context.closePath();
    };

    // 어트랙터와 mover 사이의 인력을 계산하는 메소드
    Attractor.prototype.calculateAttraction = function(mover) {
        const force = PVector.sub(this.position, mover.position);    
        let distance = force.mag();
        distance = PVector.constrain(distance, 5, 25);
        force.normalize();

        const strength = (this.G * this.mass * mover.mass) / (distance * distance);
        force.mult(strength);

        return force; 
    };

    // 마우스 상호 작용 메소드
    Attractor.prototype.handleHover = function(mx, my) {
        const d = PVector.dist(mx, my, this.position.x, this.position.y);
        if (d < this.mass) {
            this.rollover = true;
        } else {
            this.rollover = false;
        }
    };

    Attractor.prototype.handlePress = function(mx, my) {
        var d = PVector.dist(mx, my, this.position.x, this.position.y);
        if (d < this.mass) {
            console.log('setting dragging to true');
            this.dragging = true;
            this.dragOffset.x = this.position.x - mx;
            this.dragOffset.y = this.position.y - my;
        }
    };

    Attractor.prototype.handleDrag = function(mx, my) {
        console.log('should we be dragging?' + this.dragging);
        if (this.dragging) {
            this.position.x = mx + this.dragOffset.x;
            this.position.y = my + this.dragOffset.y;
        }
    };

    Attractor.prototype.stopDragging = function() {
        console.log('setting dragging to false');
        this.dragging = false;
    };

    const mover = new Mover();
    const attractor = new Attractor();

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

        // 인력 적용
        const force = attractor.calculateAttraction(mover);
        mover.applyForce(force);
        mover.update();

        attractor.display();
        mover.display();

        requestAnimationFrame(update);
    };

    update();
</script>

전에 마찰과 항력을 이용했던 것처럼, 많은 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 positionX  = canvas.offsetLeft;
    const positionY  = canvas.offsetTop;
    let mouseX = 0;
    let mouseY = 0;

    const mouseMoved = function(e) {
        mouseX = e.clientX - positionX;
        mouseY = e.clientY - positionY;
        attractor.handleHover(mouseX, mouseY);
    };

    const mousePressed = function(e) {
        e.preventDefault();
        attractor.handlePress(mouseX, mouseY);
    };

    const mouseDragged = function() {
        attractor.handleHover(mouseX, mouseY);
        attractor.handleDrag(mouseX, mouseY);
    };

    const mouseReleased = function() {
        attractor.stopDragging();
        canvas.removeEventListener('mousemove', mouseDragged);
        canvas.removeEventListener('mousemove', mouseReleased);
    };

    canvas.addEventListener('mousemove', mouseMoved);

    canvas.addEventListener('mousedown', function(e) {
        mousePressed(e);
        canvas.addEventListener('mousemove', mouseDragged);
        canvas.addEventListener('mouseup', mouseReleased);
    });

    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.sub = function(v) {
        this.x = this.x - v.x;
        this.y = this.y - v.y;
    };

    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.sub = function(v1, v2) {
        const v3 = new PVector(v1.x - v2.x, v1.y - v2.y);
        return v3;
    };

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

    PVector.constrain = function(n, low, high) {
        return Math.max(Math.min(n, high), low);
    };

    PVector.dist = function(...args) {
        if (args.length === 4) {
            //2D
            return Math.hypot(args[2] - args[0], args[3] - args[1]);
        } else if (args.length === 6) {
            //3D
            return Math.hypot(args[3] - args[0], args[4] - args[1], args[5] - args[2]);
        }
    };

    // 질량, x, y 값을 받아오는 Mover 객체
    const Mover = function(mass, x, y) {
        this.position = new PVector(x, y);
        this.velocity = new PVector(1, 0);
        this.acceleration = new PVector(0, 0);
        this.mass = mass;
    };

    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 * 16, this.mass * 16, 0, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = '#333333';
        context.stroke();
        context.fillStyle = '#ffffff';
        context.fill();
        context.closePath();
    };

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

    // 어트랙터 생성자 함수
    const Attractor = function() {
        this.position = new PVector(canvas.width / 2, canvas.height / 2);
        this.mass = 20;
        this.G = 1;
        this.dragOffset = new PVector(0, 0);
        this.dragging = false;
        this.rollover = false;
    };

    // 어트랙터를 화면에 출력하는 메소드
    Attractor.prototype.display = function() {
        context.beginPath();
        context.ellipse(this.position.x, this.position.y, this.mass, this.mass, 0, 0, Math.PI * 2, false);
        if (this.dragging) {
            context.fillStyle = '#86888b';
        } else if (this.rollover) {
            context.fillStyle = '#a3abb3';
        } else {
            context.fillStyle = '#b1c1d1';
        }
        context.fill();
        context.closePath();
    };

    // 어트랙터와 mover 사이의 인력을 계산하는 메소드
    Attractor.prototype.calculateAttraction = function(mover) {
        const force = PVector.sub(this.position, mover.position);    
        let distance = force.mag();
        distance = PVector.constrain(distance, 5, 25);
        force.normalize();

        const strength = (this.G * this.mass * mover.mass) / (distance * distance);
        force.mult(strength);

        return force; 
    };

    // 마우스 상호 작용 메소드
    Attractor.prototype.handleHover = function(mx, my) {
        const d = PVector.dist(mx, my, this.position.x, this.position.y);
        if (d < this.mass) {
            this.rollover = true;
        } else {
            this.rollover = false;
        }
    };

    Attractor.prototype.handlePress = function(mx, my) {
        var d = PVector.dist(mx, my, this.position.x, this.position.y);
        if (d < this.mass) {
            console.log('setting dragging to true');
            this.dragging = true;
            this.dragOffset.x = this.position.x - mx;
            this.dragOffset.y = this.position.y - my;
        }
    };

    Attractor.prototype.handleDrag = function(mx, my) {
        console.log('should we be dragging?' + this.dragging);
        if (this.dragging) {
            this.position.x = mx + this.dragOffset.x;
            this.position.y = my + this.dragOffset.y;
        }
    };

    Attractor.prototype.stopDragging = function() {
        console.log('setting dragging to false');
        this.dragging = false;
    };

    const movers = [];
    const attractor = new Attractor();

    for (let i = 0; i < 10; i++) {
        movers[i] = new Mover(Math.random(0.1, 2), Math.random() * canvas.width,Math.random() * canvas.height);
    };

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

        attractor.display();
        for (let i = 0; i < movers.length; i++) {
            const force = attractor.calculateAttraction(movers[i]);
            movers[i].applyForce(force);

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

        requestAnimationFrame(update);
    };

    update();
</script>

상호 인력

이제는 여러 물체가 서로 끌어당기는 조금 더 복잡한 프로그램을 짜보자. 시스템 내부의 모든 물체가 자기 자신을 제외한 다른 모든 물체를 끌어당기는 상황을 구현해야 한다.

현재 위 프로그램은 모든 Mover i에 대해 update와 display를 사용하도록 짜여있다. 이제 이 코드를 모든 Mover i가 대해 다른 모든 Mover j를 끌어당기면서 update와 display를 호출하도록 바꿔주면 된다.

// Mover에 update를 부르기 전에 모든 인력을 계산
for (let i = 0; i < movers.length; i++) {
    // 모든 mover에 대해 인력을 계산
    for (let j = 0; j < movers.length; j++) {
        const force = movers[j].calculateAttraction(movers[i]);
        movers[i].applyForce(force);
    }
}

// 모든 인력을 계산 후 update
for (let i = 0; i < movers.length; i++) {
    movers[i].update();
    movers[i].display();
}

아직 Mover에게 사용할 calculateAttraction() 메소드가 정해지지 않아 코드가 작동하지 않는다. 이전 예제에서는 Attractor 객체의 calculateAttraction() 메소드를 다뤘다. 이제 Mover가 다른 Mover를 끌어당기므로 이 메소드를 복사해서 Mover 객체로 옮겨주자.

Mover.prototype.calculateAttraction = function(mover) {
    const force = PVector.sub(this.position, mover.position);
    let distance = force.mag();
    distance = PVector.constrain(distance, 5, 25);
    force.normalize();

    const strength = (this.G * this.mass * mover.mass) / (distance * distance);
    force.mult(strength);
    return force; 
};

여기에는 작은 문제가 하나 있다. 모든 Mover i와 Mover j에 대해 i 가 j 일 경우는 괜찮을까?

예를 들어, 3번 Mover가 3번 Mover를 끌어당길 수 있을까? 물론 이런 일은 일어날 수 없다. 물체가 5개 있다면 3번 Mover는 자기 자신을 제외한 0, 1, 2, 4 번 Mover를 끌어당겨야 한다. 그렇지만 3번과 1번 Mover 간의 힘과 반대로 1번과 3번 Mover 간의 모든 힘을 계산하고 적용해야 할 필요는 있다. 이렇게 계산한 힘은 같지만, 이에 따른 가속도는 각 물체의 질량에 따라 달라질 것이다.

아래 나와있는 표를 살펴보자.

0 ⇢ 1, 2, 3, 4
1 ⇢ 0, 2, 3, 4
2 ⇢ 0, 1, 3, 4
3 ⇢ 0, 1, 2, 4

따라서, for문을 수정하여 내부의 반복문으로 스스로 끌어당기는 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 G = 1;

    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.sub = function(v1, v2) {
        const v3 = new PVector(v1.x - v2.x, v1.y - v2.y);
        return v3;
    };

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

    PVector.constrain = function(n, low, high) {
        return Math.max(Math.min(n, high), low);
    };

    PVector.dist = function(...args) {
        if (args.length === 4) {
            return Math.hypot(args[2] - args[0], args[3] - args[1]);
        } else if (args.length === 6) {
            return Math.hypot(args[3] - args[0], args[4] - args[1], args[5] - args[2]);
        }
    };

    const Mover = function(mass, x, y) {
        this.position = new PVector(x, y);
        this.velocity = new PVector(1, 0);
        this.acceleration = new PVector(0, 0);
        this.mass = mass;
    };

    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 * 16, this.mass * 16, 0, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = '#333333';
        context.stroke();
        context.fillStyle = '#ffffff';
        context.fill();
        context.closePath();
    };

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

    // 인력을 계산하는 메소드
    Mover.prototype.calculateAttraction = function(mover, i) {
        const force = PVector.sub(this.position, mover.position);
        let distance = force.mag();
        distance = PVector.constrain(distance, 5, 25);
        force.normalize();

        const strength = (G * this.mass * mover.mass) / (distance * distance);
        force.mult(strength);

        return force; 
    };

    const movers = [];
    for (var i = 0; i < 5; i++) {
        movers[i] = new Mover(Math.random(0.1, 2), Math.random() * canvas.width,Math.random() * canvas.height);
    }

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

        // Mover에 update를 부르기 전에 모든 인력을 계산
        for (let i = 0; i < movers.length; i++) {
            // 모든 mover에 대해 인력을 계산
            for (let j = 0; j < movers.length; j++) {
                if (i !== j) {
                    const force = movers[j].calculateAttraction(movers[i]);
                    movers[i].applyForce(force);
                }
            }
            movers[i].update();
            movers[i].display();
        }
        requestAnimationFrame(update);
    };

    update();
</script>

저작자표시

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

티스토리툴바