This is a continuation of the last tutorial concerning Bridges in APE and is the next step that i would take to make this function more useable. Thee is no difference in how i make the bridges, all i have done is to add the options to change the stiffness of the bridge and the colour of it.
This can be changed simply with a few lines of code.
I have also learnt that default values can be set to parameters in functions, this means that flash won't throw an error if not all of the parameters are set.
Here is an example of the new ape bridge function with random colours and line thicknesses. The top bridge has a stiffness of 0.4 and the 3rd has a stiffness of 1.2, the rest have a value of 1. You should be able to tell the difference.
Reload the page to see different bridges.
The colours and line thicknesses are random so don't expect a work of art, but you can see how easy it is to change what style the bridge is. You may notice that i have changed the falling balls to black.
The code:
-
stage.frameRate = 30;
-
import org.cove.ape.*;
-
import flash.events.Event;
-
addEventListener(Event.ENTER_FRAME, run);
-
var apeholder:MovieClip = new MovieClip();
-
apeholder.graphics.drawRect(0, 0, 550, 400);
-
addChild(apeholder);
-
var ballArray:Array = new Array();
-
APEngine.init(1/3);
-
APEngine.container = apeholder;
-
APEngine.addForce(new VectorForce(false,0,2));
-
var examplelevel:Group = new Group();
-
examplelevel.collideInternal = true;
-
var leftwall:RectangleParticle = new RectangleParticle(5,200,10,600,0,true);
-
leftwall.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
-
examplelevel.addParticle(leftwall);
-
var rightwall:RectangleParticle = new RectangleParticle(545,200,10,600,0,true);
-
rightwall.setStyle(3, 0x000000, 1, 0xFFFFFF,1);
-
examplelevel.addParticle(rightwall);
-
for (var ballnum:int = 0; ballnum<20; ballnum++) {
-
var ball:CircleParticle = new CircleParticle(Math.random()*550,-50-Math.random()*150,15,false,2);
-
ball.setStyle(1, 0x000000, 1, 0x000000,1);
-
examplelevel.addParticle(ball);
-
ballArray.push(ball);
-
}
-
createBridge(530, -50, 6, 60, 0.4, false, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);
-
createBridge(20, 50, 6, 60, 1, true, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);
-
createBridge(530, 150, 6, 60,1.2, false, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);
-
createBridge(20, 250, 6, 60, 1, true, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);
-
APEngine.addGroup(examplelevel);
-
function run(event:Event):void {
-
APEngine.step();
-
APEngine.paint();
-
for (var ballstocheck:int = 0; ballstocheck<ballArray.length; ballstocheck++) {
-
if (ballArray[ballstocheck].py>400) {
-
ballArray[ballstocheck].py = -50;
-
}
-
}
-
}
-
function createBridge(startx:Number, starty:Number, jointnum:int, ropedist:Number, elasticity:Number = 1, right:Boolean = true, linecolour:uint = 0x000000,linethickness:Number = 1, fillcolour:uint = 0x000000) {
-
var bridgeArray:Array = new Array();
-
var reverse:int = 1;
-
if (right == true) {
-
reverse = 1;
-
} else {
-
reverse = -1;
-
}
-
for (var bn:int = 0; bn<jointnum; bn++) {
-
var bparticle:CircleParticle = new CircleParticle(startx+(bn*ropedist*reverse),starty+(bn*ropedist/2),5,false,2);
-
bparticle.setStyle(linethickness, linecolour, 1, fillcolour,1);
-
examplelevel.addParticle(bparticle);
-
bridgeArray.push(bparticle);
-
}
-
for (var cn:int = 0; cn<bridgeArray.length-1; cn++) {
-
var bridgeConn:SpringConstraint = new SpringConstraint(bridgeArray[cn], bridgeArray[cn+1], elasticity, true, 10, 1);
-
bridgeConn.setStyle(linethickness, linecolour, 1, fillcolour);
-
examplelevel.addConstraint(bridgeConn);
-
}
-
bridgeArray[0].fixed = true;
-
bridgeArray[bridgeArray.length-1].fixed = true;
-
}
The explanation of what has changed:
Lines 26-29: These, as you know if you have read this post are how we call the bridge functions. i will explain in more detail after i have explained the changes to the actual function.
Line 40: This is where i declare the the function that makes the bridges. You will notice 4 new parameters. Elasticity is how stiff the bridges are from 0-1, where 0 is floppy ad 1 is solid, but i have found that you can put the elasticity to 1.2 before it breaks the bridge, the default is 1. Linecolour is obviously the colour of the outlines. It is a hex code 0x000000 is black and the default. Line thickness is the thickness of the line in pixels, default is 1. Fillcolour is the fillcolour of the blocks and the default is black, 0x000000.
Line 50: This sets the style of the circle particle that acts as our joint. So instead of setting them to constants i have set them to the parameters that i set on line 40.
Line 55: This is the line where i set up the springconstraints for the bridge the only thing that i have changed in the stiffness, i have changed it from 1 to the elasticity parameter i set earlier.
Line 56: Where the style of the pringconstraints are set, just as before i have changed the colours and line thicknesses to those of the parameters.
Ok that is all the code we changed to get these results, now lets look at how i called the bridges on lines 26-29.
I will just explain line 26 as the others are the same.
Line 26: createBridge(530, -50, 6, 60, 0.4, false, Math.random()*0xFFFFFF, Math.random()*10, Math.random()*0xFFFFFF);
The bits in bold are the new parameters. The first one, the 0.4 is the stiffness of the bridge, so not very stiff in this case. The next one is the line colour and i have set a random colour for this. The next is the line thickness and i have set a random number between 1 and 10. The last is the fill colour which is again random.
I will probably continue to play with APE in the next tutorial but you can send requests if you want something more specific.


