I couldn’t resist playing with the particle code from my previous post some more. Here I use the same basic code to draw a curve in 3D, made out of particles. The curve may look random, but it is in fact determined by parametric equations. But to make it a little different each time the page is loaded, the equations make use of a couple of randomized phase parameters.

The particles are packed close together to create the look of a continuous curve, and extra depth is created by darkening the particles further away from the viewer. The particles remain fixed in space until a certain time span, after which they become loose and fly away as they fade out, creating a dissolving effect on the tail end of the curve.

Click here or on the screenshot below to see the particles in action.

ParametricParticles screencap


Download the full commented source code here: ParametricParticles.zip

About the code

The code here is the same basic code as in my previous post, so have a look at that previous post to learn more about the code. The only new element to the code is the parametric curve, which is defined by means of some sinusoidal functions. Essentially, the curve is what is sometimes called a Lissajous figure in 3D, but with some phase modulation to make it a little more unpredicatable. A parameter t increments ahead by a small amount each frame, and the coordinates x0, y0, and z0 for a new particle are given by the equations

x0 = figureSize*Math.sin(11*t+0.8*Math.cos(2*t)+ phase1);
y0 = figureSize*Math.cos(5*t+0.8*Math.sin(3*t) + phase2);
z0 = figureSize*Math.cos(7*t+0.8*Math.cos(8*t));

Note the use of some constant phase parameters which are randomized before the main loop executes.


This code is easy to modify so you can draw your own curves. Play with the equations to generate more parametric curves, or perhaps modify the code to generate a curve recursively, such as the classic Lorenz Attractor (see here for my old flash version in 2D using a similar particle effect). Have fun!