粒子系统/制作烟花答案

【问题标题】：Particle system/making a firework粒子系统/制作烟花
【发布时间】：2018-04-19 19:25:54
【问题描述】：

所以我必须创建一个粒子系统，但只制作一个“烟花”并让它在画布的中心燃烧。我只是坚持如何移动粒子并让它们从中间开始。现在他们只是到处飞。

`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。

【问题讨论】：

标签： particles

【解决方案1】：

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

要使其在画布上居中，您需要将位置设为（画布宽度 / 2，画布高度 / 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 是任何标准的 2D 矢量类（不确定您使用的是什么，您可能想要自己滚动），.magnitude 只是 sqrt(v.x^2 + v.y^2)，而 .normalized 是 (v.x /v.magnitude, v.y/v.magnitude)。

应该这样做。

【讨论】：