Particle system/making 一个烟花

Question

所以我必须创建一个粒子系统，但只创建一个 'firework' 并让它在 canvas 的中心爆炸。我只是停留在如何移动粒子并让它们从中间开始。现在他们只是到处飞。

`function Particle() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;`

我一直在摆弄数字，但它要么影响粒子的颜色，要么只显示一个粒子消失。我根本没有使用过粒子，我在网上找到的通常是在 Maya 或 Unity 中。

Answer 1

我假设这段代码是按粒子执行的，是吗？

要使其在 canvas 上居中，您需要将位置设置为（canvas 宽度 / 2，canvas 高度 / 2），或者：

this.x = canvas.width / 2;
this.y = canvas.height / 2;

不过，这只是一个片段。要使其围绕该点聚集，您可以尝试使用钟形函数，或者更简单地将随机数乘以一个限制：

this.x = (canvas.width / 2) + Math.random() * (radius * 2) - radius;
this.y = (canvas.height / 2) + Math.random() * (radius * 2) - radius;

第二种方法的唯一问题是一些粒子会向后飞向烟花。你可以通过找到相对方向来解决这个问题：

Vector2 dir = ( Vector2(this.x, this.y) - Vector2(canvas.width / 2, canvas.height / 2) ).normalized;

然后将其乘以一个随机向量（或者更实际地说，乘以幂函数）

Vector2 v = dir * Math.random();

-或-

Vector2 v = dir * Math.pow(dir.magnitude, 2);

其中 Vector2 是任何标准二维矢量 class（不确定您使用的是什么，您可能想自己动手），.magnitude 只是 sqrt(v.x^2 + v.y^2), .normalized 是 (v.x/v.magnitude, v.y/v.magnitude).

应该可以了。

Particle system/making 一个烟花

Particle system/making a firework

particles