CS4 Creating a Parametric Particle Field

Intro

In the previous section of the book, you learned how to get a single element orbiting a torus using the parametric equations of a torus. Here you’ll multiply that single element by 100 and create a parametric particle system, which orbits your torus. Click the image below to see the torus worm in action.

Torus Worm (Parametric Particle System)

Torus Worm (Parametric Particle System)

You’ll get a more formal treatment of particles in the gaming section of the book. But for the most part, anything with more than one element can be treated as a particle system. Treating elements as particles has a number of advantages. Primarily, particles are more easily handled mathematically. You’ll use particle systems extensively throughout the book.

Web Stuff

1. Demo
2. Source

3. YouTube (Below)

Coming Soon!

Discussion

Building a particle system in Flash is relatively easy. And in this section, you’ll cover the basics. To build the orbiting worm around a torus (parametric particle system), follow the steps below:

1. Declare the number of particles to be created and create an array to place your particles in. This is the key to working with particles. Using an array (particles_ary) you’ll be able to control position, color, and alpha of each particle.

var numOfParticles:uint = 100;
var particles_ary:Array = [];

2. Use a for loop to run the updateStage() function which creates your particles. Once the particles are created run the addEventListener method which starts the updating loop for each particle on every on enter frame event.

for(var i:uint = 0; i < numOfParticles; i++)
{
updateStage();
numVar++;
//Start Looping
if(numVar==numOfParticles){
addEventListener(Event.ENTER_FRAME, myonEnterFrame);}
}

3. Draw your balls (particles) to the stage and place them in a particle array. A random color is assigned to each ball using the Math.random()*0xffffff method.

//Draw a Ball
var ball:Sprite = new Sprite
//Assign a random ball color
ball.graphics.beginFill(Math.random()*0xffffff);
//draws your ball at 0,0
ball.graphics.drawCircle(0, 0, ballRadius);
ball.graphics.endFill();//ends the fill
//Add ball to the stage
addChild(ball);
//Push the ball into a particle array
particles_ary.push(ball);

4. With each onEnterFrame loop update all your particle positions using myAngle+i/20 that separates the different particles in angle by the ratio of i/20. This causes your particles to line up on the torus and move across its surface as the myAngle variable is iterated. Use the particles_ary[i].alpha method to change the alpha of each particle based on their ith position. Center the particle system on the stage by adding CenterX, and CenterY to the particle x, y positions.

for(var i:uint = 0; i < particles_ary.length; i++)
{
//ball parametric orbit x
var newAngle:Number=myAngle+i/20;
particles_ary[i].alpha=1/(i+1)+.2;
particles_ary[i].x = (100+60*Math.cos(2*newAngle))*Math.cos(newAngle/4)+CenterX;
//ball parametric orbit y
particles_ary[i].y = (100+60*Math.cos(2*newAngle))*Math.sin(newAngle/4)+CenterY;
//ball parametric orbit z
particles_ary[i].z = 60*Math.sin(2*newAngle);
}

The result is a worm-like entity orbiting a torus. The key to creating particle systems and controlling them is to stuff the individual particles into an array upon creation. And then iterate over each particle during the frame loop of the animation sequence.

The master of building particle systems in Papervision3D is Seb Lee-Delisle: with numerous examples of Flash 9 particles systems on his blog at http://www.sebleedelisle.com. In addition, flint-particle-system, a very robust Google Code project, works very well with Papervision3D.

Although in CS4, with native 3D and pixel bender, the process of building particle systems becomes greatly simplified as shown in the code above.

Click the more button to see the entire code:

Entire Code – Parametric Particle System

//imports sprite and stage class
import flash.display.Sprite;
import flash.display.Stage;
//Add Particle Array
var numOfParticles:uint = 100;
var particles_ary:Array = [];
var numVar:Number=0;

var ballRadius:Number=10;
//Stage Center
var CenterX:Number = stage.stageWidth/2;
var CenterY:Number = stage.stageHeight/2;

var myAngle:Number =0;//Angle of ball

//Add Multiple Particles
function updateStage():void
{
//Draw a Ball
var ball:Sprite = new Sprite
//Assign a random ball color
ball.graphics.beginFill(Math.random()*0xffffff);
//draws your ball at 0,0
ball.graphics.drawCircle(0, 0, ballRadius);
ball.graphics.endFill();//ends the fill
//Add ball to the stage
addChild(ball);
//Push the ball into a particle array
particles_ary.push(ball);
}

//Place Particles on the Stage
for(var i:uint = 0; i < numOfParticles; i++)
{
updateStage();
numVar++;
//Start Looping
if(numVar==numOfParticles){
addEventListener(Event.ENTER_FRAME, myonEnterFrame);}

}

//Looping function
function myonEnterFrame(event:Event):void{
myAngle=myAngle-.1;//iterates angle

for(var i:uint = 0; i < particles_ary.length; i++)
{

//ball parametric orbit x
var newAngle:Number=myAngle+i/20;
particles_ary[i].alpha=1/(i+1)+.2;
particles_ary[i].x = (100+60*Math.cos(2*newAngle))*Math.cos(newAngle/4)+CenterX;
//ball parametric orbit y
particles_ary[i].y = (100+60*Math.cos(2*newAngle))*Math.sin(newAngle/4)+CenterY;
//ball parametric orbit z
particles_ary[i].z = 60*Math.sin(2*newAngle);

}}

About these ads

2 Responses to CS4 Creating a Parametric Particle Field

  1. […] > CS4 Creating a Parametric Particle Field « Professional Papervision3D Book […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: