感受粒子的力量：用万有引力和斥力创造炫酷效果

2024-01-23 20:56:04

大家有没有想过，粒子们也能拥有引力和斥力呢？今天，就让我们用代码实现粒子的万有引力和斥力效果，体验一把粒子的神奇世界！

万有引力，是我们熟悉的物理定律，了宇宙中任意两个物体之间的吸引力。而斥力，则是物体之间互相排斥的作用力。当我们将这些力应用到粒子身上时，会发生什么呢？

准备好了吗？下面，我们就来一步步实现粒子的万有引力和斥力效果：

初始化粒子： 首先，我们需要创建一个粒子系统，其中包含大量小粒子。每个粒子都具有位置、速度和质量等属性。
计算引力和斥力： 对于系统中的每一个粒子，我们需要计算它与其他所有粒子之间的引力和斥力。引力正比于粒子质量的乘积，并与粒子距离的平方成反比。斥力与之类似，但方向相反。
更新粒子状态： 一旦我们计算了所有粒子的力，就可以更新它们的运动状态了。根据牛顿第二定律，力等于质量乘以加速度，我们可以计算出每个粒子的加速度，然后更新它的速度和位置。
渲染粒子： 最后，我们将粒子渲染到屏幕上。我们可以使用各种图形技术来实现这一点，比如点绘制或纹理映射。

现在，让我们用代码实现这些步骤。以下是使用 JavaScript 和 Canvas 的一个简单示例：

// 初始化粒子系统
const particles = [];
for (let i = 0; i < 100; i++) {
  particles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    vx: 0,
    vy: 0,
    mass: 1,
  });
}

// 计算引力和斥力
for (let i = 0; i < particles.length; i++) {
  for (let j = i + 1; j < particles.length; j++) {
    const p1 = particles[i];
    const p2 = particles[j];

    // 计算距离
    const dx = p1.x - p2.x;
    const dy = p1.y - p2.y;
    const distance = Math.sqrt(dx * dx + dy * dy);

    // 计算引力
    const gravity = (G * p1.mass * p2.mass) / (distance * distance);

    // 计算斥力
    const repulsion = (R * p1.mass * p2.mass) / (distance * distance);

    // 计算力
    const forceX = (gravity * dx) / distance;
    const forceY = (gravity * dy) / distance;

    // 更新粒子状态
    p1.vx += forceX / p1.mass;
    p1.vy += forceY / p1.mass;
    p2.vx -= forceX / p2.mass;
    p2.vy -= forceY / p2.mass;
  }
}

// 渲染粒子
for (let i = 0; i < particles.length; i++) {
  const p = particles[i];
  ctx.fillStyle = "#000000";
  ctx.fillRect(p.x, p.y, 2, 2);
}