HTML5 Canvas에서 개체 간 중력 구현하기
HTML5 Canvas에서 두 개 이상의 개체 사이에 중력을 적용하려면 뉴턴의 만유인력 법칙을 기반으로 힘을 계산한 뒤, 그 힘을 각 개체의 속도(velocity)에 반영하는 방식을 사용합니다. 아래 예제는 두 개체(ob1, ob2)가 서로를 끌어당기는 중력을 간단하게 구현한 코드입니다.
중력 계산 코드
var distX = ob1.x - ob2.x, distY = ob1.y - ob2.y; var val = distX * distX + distY * distY; var r = Math.sqrt(val); var F = 50 / val; var rhat_x = distX / r; var rhat_y = distY / r; var Fx = F * rhat_x; var Fy = F * rhat_y; ob1.vx += -Fx; ob1.vy += -Fy; ob2.vx += Fx; ob2.vy += Fy;
코드 단계별 설명
1. 거리 벡터 계산
distX와 distY는 두 개체 사이의 x축, y축 방향 거리 차이입니다. 이 값들이 두 개체를 잇는 벡터가 됩니다.
2. 거리와 거리의 제곱
val은 거리 벡터의 크기를 제곱한 값(유클리드 거리의 제곱)이고, r은 Math.sqrt()로 실제 거리를 구한 값입니다.
3. 힘의 크기 계산
뉴턴의 만유인력 공식(F = G·m₁·m₂ / r²)에서 G, m₁, m₂를 하나의 상수 50으로 단순화하여 F = 50 / val 형태로 표현했습니다. 거리가 가까울수록 힘이 커지고, 멀수록 작아지는 특성을 그대로 반영합니다.
4. 단위 방향 벡터
rhat_x와 rhat_y는 힘이 작용할 방향을 나타내는 단위 벡터입니다. 거리 벡터를 실제 거리 r로 나누어 정규화한 값입니다.
5. 힘의 성분과 속도 업데이트
Fx, Fy는 힘의 x성분과 y성분입니다. 뉴턴의 제3법칙(작용-반작용)에 따라 한 개체에는 힘을 더하고(+), 다른 개체에는 반대 방향의 힘을 빼서(-) 서로 끌어당기도록 합니다.
실전 활용 팁
여러 개체에 중력을 적용하려면 모든 개체 쌍(pair)에 대해 위 계산을 반복 수행해야 합니다. 또한 다음 사항을 함께 고려하면 더 안정적인 시뮬레이션을 만들 수 있습니다.
- 질량 반영: 힘 계산 시 각 개체의 질량(mass)을 곱하면 더 현실적인 움직임을 얻을 수 있습니다.
- 0으로 나누기 방지: 두 개체가 완전히 겹치면 r이 0이 되어 오류가 발생할 수 있으므로 최소 거리 값을 설정하세요.
- 시간 단계(dt): 프레임마다 일정한 물리 결과를 얻으려면 힘에 경과 시간을 곱해 적분하는 방식을 사용하는 것이 좋습니다.