A more advanced Particle System

[vmcruz]

Hi, I made another particle system. This time with the guidance of this YT tutorial. I made a filter showing fire-like using this particle system.

 

As I think this is a interesting topic to those newers like myself, I want to share my approach. The readme:
 

/* README!!		This particle system works with some sort of filters.		How it works:		x: x position, automatically added to Emitter's x (you can't have a particle floating around without a reference point)		y: y position		vx: x velocity		vy: y velocity		type: it could be either 'arc' or 'rect'		size: the size of the particle, if arc, this represents radio * 2		opacity: self describing		colorType: could be either 'rgba' or 'hsla'		color: array containing the first 3 params of rgba/hsla, opacity is automatically added		particles: the number of particles created every frame, bad performs when reaching the 10 value		life: the number of frames this particle will live		gravity: gravity force		wind: wind force				NO NEED to put every value in a filter, it has fallback values		*/

Best regards.

 

The Tutorial: Javascript Motion, Particles and More

index.html

[ad29b]

a shiny--thing 

[f288]

Hi vmcruz, thanks for the very usefull tutorial.

 

Following it i created my personal version:

http://jsfiddle.net/FP4HN/

 

The problem is that i don't understand how can i decrease the number of particle created, with "particleNum" i can increase number of it, but actually it's set on "1" but it create too much particle.

[vmcruz]

Hi vmcruz, thanks for the very usefull tutorial.

 

Following it i created my personal version:

http://jsfiddle.net/FP4HN/

 

The problem is that i don't understand how can i decrease the number of particle created, with "particleNum" i can increase number of it, but actually it's set on "1" but it create too much particle.

 

What I did was set a "maxParticles" variable http://jsfiddle.net/FP4HN/2/ play with that

[PAEz]

Love to see stuff like this in simple form.

 

One thing though, using eval in a particle system is nuts!!

Heres why.....

http://jsperf.com/evaleval

...and here it is using functions....

http://jsbin.com/poseq/2/edit

...if theres something in that tutorial that lead you to do this then Im sorry, I definately could be wrong, but I couldnt look at the tut as I dont have enough data limit left for the month.

 

Also while Im here, the way your creating new particles is a little off in that if you have set it to make ten particles and if the filter has a random x or woteva then all 10 particles will have the same x and woteva as the first one created and I wouldn't have thought thats what you'd want....

http://jsbin.com/poseq/3/edit

[vmcruz]

thanks!, It didn't come to my mind using functions to return an object. I used eval because I didn't know any other way to get a different random value for the filter on each iteration. Regarding the last paragraph, I didn't understand what you're trying to say, my mother tongue isn't english :S. I don't know if you refer to the fact that if I set random X in the filter config, all the particles will start from the emitters X. What I do in this case is to substract half of the random. Per say:

 

x:Math.random() * 500 - 250,

 

http://jsbin.com/zeruveru/1/edit

 

Thanks again for the improvement! I appreciate it

 

Edit:

 

Improved version with some fixes...

http://jsbin.com/dupiloku/1/edit

Edited May 23, 2014 by vmcruz

[PAEz]

Have a look at this code.

 

Filter....

{  x: Math.random() * 20,  particles: 10}

Your code....

var filter = this.filter();filter.x = (filter.x + this.x) || this.x;filter.y = (filter.y + this.y) || this.y;filter.maxParticles = filter.maxParticles || 0;if(filter.maxParticles === 0 || filter.maxParticles > this.particles.length) {  if(createNewParticles !== false) {    for(var i = 0; i < (filter.particles || 1); i++)      this.particles.push(new Particle(filter));  }}

...all the particles created at that moment will have exactly the same x.

 

My code....

for (var i = 0,end=this.filter().particles||1; i < end; i++){  var filter = this.filter();  filter["x"] = (filter.x + this.x) || this.x;  filter["y"] = (filter.y + this.y) || this.y;  this.particles.push(new Particle(filter));}

...all the particles will have different x values.

 

 

PS.

Thanks for showing me...

i < (filter.particles || 1);

I hadnt seen that before .....Id prefer to declare it with end, but I like that

[vmcruz]

Oh I see now, you're totally right. Thanks for clarifying. I updated it to this: http://jsbin.com/dupiloku/3/edit

 

Thanks again for the help! 

 

 

PS.

Thanks for showing me...

i < (filter.particles || 1);

I hadnt seen that before .....Id prefer to declare it with end, but I like that 

 

That was an experiment and it worked so I didn't change it lol. Glad I've showed you something too

[PAEz]

Its a small thing, but....

for(var i = 0; i < (this.filter().particles || 1); i++) {

...will call filter and create an object on every particle created due to the conditional.  The conditional is executed every loop.

 

 

Where as, this.....

for (var i = 0,end=this.filter().particles||1; i < end; i++)

...will only do it once no matter how many particles it makes.

[max-m]

Fiddled a bit with it, I somehow like this effect

http://jsbin.com/hejefoqe/1