I'm using this function to create a particle for my particle system:
function particle()
{
this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12};
this.location = {x: 50, y: 150};
this.radius = 5+Math.random()*8;
this.life = 4+Math.random()*8;
this.remaining_life = this.life;
this.r = 255;
this.g = 140;
this.b = 30;
}
and I'm using this function to update the particles characteristics during the course of my animation:
particle.prototype.updateparticle = function()
{
this.remaining_life--;
this.radius--;
this.location.x += this.speed.x;
this.location.y += this.speed.y;
if(this.remaining_life < 0 || this.radius < 0)
{
this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12};
this.location = {x: 50, y: 150};
this.radius = 5+Math.random()*8;
this.life = 4+Math.random()*8;
this.remaining_life = this.life;
this.r = 255;
this.g = 140;
this.b = 30;
}
}
Is there a way with which I can avoid the redundant code?
Also I tried using this = new particle()
and it didn't work. I can't think of a reason why it shouldn't work. why doesn't it?
And on a totally unrelated note, is Firefox incapable of handling particle animations? Chrome uses 5% of my CPU. Firefox uses around 30 and still lags! I have an i5 2500k so that shouldn't be a problem. I'm running the latest versions of both.
Apply the function, passing the current object as the this
argument:
particle.prototype.updateparticle = function()
{
this.remaining_life--;
this.radius--;
this.location.x += this.speed.x;
this.location.y += this.speed.y;
if(this.remaining_life < 0 || this.radius < 0)
{
particle.apply(this);
}
}
Create a prototype function to initialize the values
function particle() {
this.init();
}
particle.prototype.init = function(){
this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12};
this.location = {x: 50, y: 150};
this.radius = 5+Math.random()*8;
this.life = 4+Math.random()*8;
this.remaining_life = this.life;
this.r = 255;
this.g = 140;
this.b = 30;
}
particle.prototype.updateparticle = function() {
this.remaining_life--;
this.radius--;
this.location.x += this.speed.x;
this.location.y += this.speed.y;
if(this.remaining_life < 0 || this.radius < 0) {
this.init();
}
}
You can make it another function and invoke whenever required.
function particle()
{
this.initialize();
}
particle.prototype.initialize = function(){
this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12};
this.location = {x: 50, y: 150};
this.radius = 5+Math.random()*8;
this.life = 4+Math.random()*8;
this.remaining_life = this.life;
this.r = 255;
this.g = 140;
this.b = 30;
}
particle.prototype.updateparticle = function()
{
this.remaining_life--;
this.radius--;
this.location.x += this.speed.x;
this.location.y += this.speed.y;
if(this.remaining_life < 0 || this.radius < 0)
{
this.initialize();
}
}
function particle(x, y, r, g, b) {
this.location = {x: x, y: y};
this.r = r;
this.g = g;
this.b = b;
// Group everything that randomises in update()
this.update = function() {
this.speed = {x: -1.5+Math.random()*3, y: -12+Math.random()*12};
this.radius = 5+Math.random()*8;
this.life = 4+Math.random()*8;
this.remaining_life = this.life;
}
this.update();
}
particle.prototype.updateparticle = function() {
this.remaining_life--;
this.radius--;
this.location.x += this.speed.x;
this.location.y += this.speed.y;
if(this.remaining_life < 0 || this.radius < 0) {
this.update();
}
}
//Instantiation
var p1 = new particle(50, 150, 255, 140, 30);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.