Hi,
I just wanted some time out today to do another tutorial for Particle Systems in ActionScript 3. For people who followed my previous Simple Particle System tutorial; this tutorial is totally based on the previous one. I will be telling you, how to add different factors to the already running particle system. If you have the previous tutorial downloaded, you can just open that up and add lines to it as I explain them. I have also attached an updated version, if you want it all done.
Ok, to the tutorial. Particle systems are of so many types that you can never really deal with all of them, yet they all follow the same basic principles as I explained in the first tutorial. For example, you can use the previous tutorial as a “Water” particle system. Today, I’m going to modify it to look like a “Smoke” particle system. We will add wind to it, so that the smoke gets farther away when wind is fast and the speed of particle emission increases as the wind increases and vice versa. Here’s a preview:
First we change the following line in the Particle Class constructor:
Particle.as
12345678910 |
public function Particle(l:Vector3D){acc=new Vector3D(0.0,0.05,0.0); vel=new Vector3D(Math.random() * 1.0,Math.random() * 1.3 - 1.0,0); loc=l.construct();r=10.0;timer=1.0;}
|
This gives a different velocity to every newly generated particle in the system. You can always modify this to have a different effect on how the particles behave when they are born. Next, we need to update this velocity component in every frame, or the particles will remain still. So in our update function, we add:
1112131415161718 |
public function update():void{vel.addition(acc);loc.addition(vel); timer-= 0.025;acc.setXY(0,0); }
|
and now to add that force, which we call “wind”. The details on the calculation of the wind factor come later in this tutorial, but for now, add a new function to the Particle class as follows:
19202122 |
public function add_force(f:Vector3D):void{acc.addition(f);}
|
Ok, that is all for the Particle class. If you do not understand any of the above changes, do not worry, I will be explaining them once more in the end. Now to our Particle System class:
ParticleSystem.as
There is no big change in the ParticleSystem class, except for one function:
2324252627282930 |
public function add_force(dir:Vector3D):void{for (var i:int=particles.length - 1; i > 0; i--){var p:Particle=Particle(particles[i]);p.add_force(dir);}}
|
The above function is propagating the wind factor, which comes from our main FLA into each particle of the Particle System. In other words, this function calls the “add_force” function of the Particle Class. I have kept the names same for both the classes, so that one can understand the propagation. More about the “dir” vector in the next paragraph.
To our main FLA, where all of this comes to life.
313233343536373839404142434445464748 |
var ps:ParticleSystem = new ParticleSystem(0,new Vector3D(stage.stageWidth/2,stage.stageHeight/2,0));addChild(ps); function update(e:Event){var dx:Number = (mouseX - width/2) / 1000.0; // horizontal drag componentvar dy:Number = (mouseY - height/2) / 1000.0; // vertical drag component var wind:Vector3D = new Vector3D(dx,dy,0);ps.add_force(wind); for (var i:int = 0; i < 2; i++){ps.addParticle();}ps.run();}this.addEventListener(Event.ENTER_FRAME,update);
|
Paste the above code in your FLA and run it, you’ll notice that the Smoke gets an acceleration factor when you move the mouse farther away from the Particle System. This gives you a feeling that there is wind acting on the Particle System. Now to explain what we are doing in the code above:
First we take variables dx and dy. The formula is to take the current position of the Mouse Pointer on the screen and convert it so that our particle system takes direction based on that position. For example:
If
mouseX = 192;
mouseY = 145;
width = 200;
height =200;
then the result for the values of the variables dx and dy should be:
dx = 0.092 = (192 – 200/2) / 1000.0
dy = 0.045 = (145 – 200/2) / 1000.0
and then we send this value to our Particle System’s “add_force” function, which propagates this value into every particle in the Particle System. Also, notice the FOR loop, I’m tricking the Particle System as if there are two emitters 
. If you do not understand what that means, you should go over my previous turorial. Putting this hierarchy together, lets see what our particle system is doing now:
– Calculate a wind factor (wind vector in the Main FLA) using the values of dx and dy.
– Send that wind vector to the “add_force” function in the Particle System class.
– Calling the “add_force” function of each particle and adding that wind factor to their acceleration.
Simple, right? This was pretty easy. I would recommend you try different things in the particle system to take more use of it. You can change the colors of particles over time to give them a FIRE effect .
M.H.A.Q.S.
smokeparticlesystem.zip
