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