javascript - 有没有办法优化粒子生成算法以处理许多对象？

Question

事实上，我正在制作一个必须说明“影响”的背景。

我试图用粒子来制作这个，这些粒子从屏幕上的给定点生成，它们朝着随机方向移动，并且在它们拥有一段时间后爆炸。所以问题是，我以某种方式成功地做到了，但它真的很慢。放置了大约 400 个生成器，浏览器开始滞后，问题是我至少需要 400 个。那么有什么办法可以优化我所做的吗？链接在这支笔上。

我的粒子：

class Particle {
    constructor(radius,speed,lifetime,aoe) {
        this.speed = speed;
        this.life = lifetime;
        this.aoe = aoe;
    }

    throw() {
        var r = random(TWO_PI);
        var dx = cos(r);
        var dy = sin(r);
        var speedX = this.speed*dx;
        var speedY = this.speed*dy;
        return [speedX,speedY];
    }

    display(rootX,rootY,x,y) {
        line(rootX,rootY,x,y);
    }

    blast(rootX,rootY,x,y) {
        line(rootX,rootY,x,y);
        ellipse(x,y,this.aoe,this.aoe);
    }
}

这是生成器：

class ParticleGenerator {
    constructor(x,y,frequency, particle) {
        this.x = x;
        this.y = y;
        this.f = frequency;
        this.p = particle;
        this.pX = this.x;
        this.pY = this.y;
        this.state = 0;        
        this.wait = 0;
        this.dir = this.p.throw();
    }

    travel(sX,sY) {
        this.pX += sX;
        this.pY += sY;
    }

    activate() {
        var d = (dist(this.x,this.y,this.pX,this.pY)/this.p.speed)/this.p.life;
        if(this.state == 0)
            this.dir = this.p.throw();
        if (this.state < this.p.life) {
            stroke(255,0,0);
            fill(11)
            this.travel(this.dir[0],this.dir[1]);
            this.p.display(this.x,this.y,this.pX,this.pY);
            this.state++;
        }
        if (this.state == this.p.life && this.wait < this.f) {
            stroke(255,0,0,255-(this.wait*255)/this.f)
            fill(255,0,0,255-(this.wait*255)/this.f);
            this.p.blast(this.x,this.y,this.pX,this.pY);
            this.wait++;
        }

        if (this.wait == this.f) {
            this.state = 0;
            this.wait = 0;
            this.pX = this.x;
            this.pY = this.y;
        }
    }
}

标签： javascriptoptimizationp5.jsparticles