d.c.Holth

As promised, you can now download the code used for my web spinning projects. There is one fla, and four classes.

I made some modifications to Grant Skinner’s grid based proximity manager to take advantage of an IProximityDetectable interface. For a full explanation on how grid based proximity management works, check out Grant’s original post on the subject. The IProximityDetectable interface has only two methods:

interface IProximityDetectable {
public function getPosX():Number;
public function getPosY():Number;
}

As might be assumed, they retrieve the ‘x’ and ‘y’ position of an object. Why implement this? Well, the original ProximityManager used the _x and _y values of a MovieClip, but my spider web particles don’t actually have any MovieClips. Its just adjusting x and y values of an object in memory, and drawing lines to the new distance. The ProximityManager is used for drawing the lines between particles based on how close they are to each other.

So how do the particles move? Each onEnterFrame the ParticleManager calls the tick function for each particle.

public function tick():Void {
canvas.moveTo(x,y);
x += xVel;
y += yVel;

xVel *= drag;
yVel *= drag;

yVel += yGravity;
xVel += xGravity;

var f:Number = Math.abs(xVel) + Math.abs(yVel);
alpha -= f/__lifeSpan;
canvas.lineStyle(2, rgb, alpha);
canvas.lineTo(x,y);

if(alpha <= 0){
manager.removeSpark(this);
}

var n:Array = pm.getNeighbours(this);
var l:Number = n.length;
for(var i:Number = 0; i < l; i++){
canvas.lineStyle(1, rgb, alpha);
canvas.moveTo(x, y);
canvas.lineTo(n[i].getPosX(), n[i].getPosY());
}
}

Each particle starts out with random velocities for x and y. These velocities are added to the x and y position of the particle. Drag is applied to the velocities to slow them down. The drag is set to such a small value in this particular instance that it really doesn’t have much of an effect. Gravity along the x and y axis is then applied to the particle The gravity values are generated randomly when the particle is first created and unlike the velocities, has no baring on its parents value (in the instance of a branched particle). Since gravity is random, it may pull particles up, down, left or right. After all moving is done, the particle uses asks who its neighbors are and draws lines to them.

Speaking of branching, the ParticleManager does a probability calculation for each particle during the onEnterFrame which determines if a particle will branch. Each particle has a chance to branch, so growth can occur exponentially. To keep particles from branching too much, this calculation is ignored if the maximum number of particles has been reached (default to 40).

Once each particle has been moved and had its connections drawn, the entire image is drawn to a Bitmap and color/alpha adjusted to fade away slowly. All and all a pretty neat little effect.

I’d like to move this to AS3 eventually to see if I get crazy speed increases! I’ve put one last experiment below which allows you some control over different variables in the spider webs. Be careful when making adjustments… You can easily give your computer a heart attack.