揭秘【canvas】动画中的万有引力定律：从原理到实践

2023-10-18 17:54:54

引言

在 Web 动画世界中，模拟现实物理现象是一个令人着迷的挑战。而万有引力定律无疑是其中最基本、最引人注目的定律之一。在本文中，我们将深入研究如何利用 HTML5 Canvas 和 JavaScript 在动画中实现万有引力定律。

原理

万有引力定律指出，任何两个具有质量的物体都会相互吸引，吸引力的大小与它们的质量成正比，与它们距离的平方成反比。数学公式表示为：

F = Gm₁m₂/r²

其中：

F 是引力
G 是万有引力常数
m₁ 和 m₂ 是两个物体的质量
r 是两个物体之间的距离

实现

在 Canvas 动画中实现万有引力定律涉及以下步骤：

定义物体： 使用向量对象表示动画中的每个物体，其中包括它们的质量、位置和速度。
计算引力： 使用万有引力定律计算每个物体受到其他所有物体作用的引力。
更新速度和位置： 根据计算出的引力更新每个物体的速度和位置。
渲染动画： 在每个动画帧中渲染物体的最新位置。

示例

以下是一个简单的 JavaScript 代码示例，演示了如何实现万有引力定律：

// 定义物体类
class Body {
  constructor(mass, x, y) {
    this.mass = mass;
    this.position = createVector(x, y);
    this.velocity = createVector(0, 0);
  }
}

// 计算引力
function calculateGravity(body1, body2) {
  const G = 0.001;
  const dx = body2.position.x - body1.position.x;
  const dy = body2.position.y - body1.position.y;
  const distance = sqrt(dx * dx + dy * dy);
  const force = (G * body1.mass * body2.mass) / (distance * distance);
  return createVector(dx / distance * force, dy / distance * force);
}

// 更新速度和位置
function updateBody(body, dt) {
  const acceleration = calculateGravity(body);
  body.velocity.add(acceleration.mult(dt));
  body.position.add(body.velocity.mult(dt));
}

// 渲染动画
function render() {
  background(0);
  for (let body of bodies) {
    ellipse(body.position.x, body.position.y, body.mass, body.mass);
  }
}