Is there a way to optimisate a particle generating algorythm to work with many objects?

Question

In fact, I'm making a background which has to kinda illustrate "influence".

I tried to make this with particles, generated from a given point on the screen, which are moving toward a random direction, and which blast after some lifetime they have. So the problem is, I succeeded some way to do it, but it's really slow. about 400 generators placed, and the browser starts to lag, and the thing is i need at least 400 of these. So is there anyway to optimise what I did? Link on this pen.

my particle:

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);
    }
}

and here's the generator:

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;
        }
    }
}