Есть ли способ оптимизировать алгоритм генерации частиц для работы со многими объектами? - PullRequest
1 голос
/ 07 апреля 2019

На самом деле, я создаю фон, который как бы иллюстрирует «влияние».

Я пытался сделать это с частицами, сгенерированными из заданной точки на экране, которые движутся в случайном направлении и которые взрываются через некоторое время жизни, которое они имеют. Так что проблема в том, что мне удалось каким-то образом это сделать, но это действительно медленно. Установлено около 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;
        }
    }
}
...