Browse the notebook

Category: QuickBox2D

QuickBox2D FRIM

import com.actionsnippet.qbox.*;
import Box2D.Common.Math.*;

// try altering your frame rate
[SWF(backgroundColor=0x000000, width=700, height=600, frameRate=30)]
// try setting frim to false
var sim:QuickBox2D = new QuickBox2D(this, {iterations:20, timeStep:1 / 60, frim:true});

sim.setDefault({fillColor:0x003366, lineAlpha:0});
sim.createStageWalls();

sim.addBox({x:10, y:18, height:3, density:0});

sim.setDefault({fillColor:0x004466, lineColor:0x2B80F5});

var cVel:b2Vec2 = new b2Vec2();

for (var i:int = 0; i<32; i++){
	var c:QuickObject = sim.addCircle({x:13 + i % 8, y:10 + int(i / 8), friction:0.01, radius:0.2 + Math.random()*0.3, angularDamping:1});
	cVel.x = Math.random() * 4 - 2;
	cVel.y = Math.random() * 4 - 2;
	c.body.SetLinearVelocity(cVel);
}

var box:QuickObject = sim.addBox({x:3, y:16, width:2, height: 2});
var boxVel:b2Vec2 = new b2Vec2(15, -25);

sim.start();

// shoot the box from left to right
setTimeout(positionBox, 200);
function positionBox():void{
	// reset box position
	box.x = 3, box.y = 16;
	setTimeout(shootBox, 500);
}
function shootBox():void{
	box.body.SetLinearVelocity(boxVel);
	box.body.SetAngularVelocity(10);
	// shoot the box again
	setTimeout(positionBox, 4000);
}

You’ll need to download the latest version of QuickBox2D in order to run this snippet (alpha 107 as of this post). I recommend checking out the demo below first though…

The most notable feature of this release is FRIM (frame rate independent motion). FRIM is used to attempt to keep the speed of the Box2D simulation constant no matter what frame rate the swf is running at. This is good because frame rates will vary from browser to browser and from computer to computer.

Mr.Doob suggested that I implement this feature in QuickBox2D. If you haven’t seen his site I highly recommend checking it out – really great stuff there.

I created a demo to illustrate the FRIM feature… this demo is basically the same as the above snippet with a few extra buttons added to control frame rate and toggle FRIM.


Take a look at the demo here…

While this new feature seems to be working, I believe there still may be room for improvement. Please let me know if the demo doesn’t work correctly on your machine. As of now, I’ve only tested it on my 2.5 Ghz Intel Core 2 Duo.

Also, any suggestions to improve the clarity of this demo are appreciated… I found it kind of hard to think of a good demo to show FRIM in action. The original demo really didn’t make much sense… so I gave Rich Shupe a call and he helped me come up with the idea for the current demo.

UPDATE:
I just updated the demo so that the simulation restarts when you change the frame rate (as per Mr.doob’s suggestion below)

Read snippet: QuickBox2D FRIM

QuickBox2D w/ Key Controls

import com.actionsnippet.qbox.*;
import Box2D.Common.Math.*

[SWF(backgroundColor=0xEFEFEF, width=700, height=600, frameRate=60)]

var sim:QuickBox2D = new QuickBox2D(this);

sim.setDefault({lineColor:0xCC0000, fillColor:0xCC0000});

// create compound shape (two circles and a box for the character)
var charParts:Array = [];
// x and y position are now relative to center of compound shape
charParts[0] = sim.addBox({x:0, y:0, width:1, height:2});
charParts[1] = sim.addCircle({x:0, y:-1, radius:0.5});
charParts[2] = sim.addCircle({x:0, y:1, radius:0.5});
var char:QuickObject = sim.addGroup({objects:charParts, x:2, y:2.5, allowSleep:false, angularDamping:0.8, linearDamping:1.5});

// vector for linear velocity of character
var charVel:b2Vec2 = new b2Vec2();

// angular velocity of character
var charVelAng:Number = 1;
char.body.SetAngularVelocity(charVelAng);

// world/platforms
sim.setDefault({lineColor:0x666666, fillColor:0x666666, height:0.5, density:0});
sim.createStageWalls();
sim.addBox({x:3, y:5, width:5});
sim.addBox({x:11, y:5, width:5});
sim.addBox({x:8, y:9, width:8});
sim.addBox({x:4, y:13, width:8});
sim.addCircle({x:16, y:8, radius:2});
sim.addCircle({x:12, y:15, radius:2});

// falling circles
sim.setDefault({lineColor:0x2870B5, fillColor:0x2870B5});
for (var i:int = 0; i<15; i++){
	sim.addCircle({x:5 + i, y:2, radius:0.25 ,density:1});
}

sim.start();

// key controls
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	charVel = char.body.GetLinearVelocity();
	charVelAng =  char.body.GetAngularVelocity();
	
	if (key[Keyboard.RIGHT]){
		charVel.x += 1
		char.body.SetLinearVelocity(charVel);
		
		charVelAng += 1;
		char.body.SetAngularVelocity(charVelAng);
	}
	if (key[Keyboard.LEFT]){
		charVel.x -=1;
		char.body.SetLinearVelocity(charVel);
		
		charVelAng -= 1;
		char.body.SetAngularVelocity(charVelAng);
	}
	if (key[Keyboard.UP]){
		 charVel.y = -10;
	     char.body.SetLinearVelocity(charVel);
			
		 charVelAng *= 0.8;
		 char.body.SetAngularVelocity(charVelAng);
	} 
}
// basic key setup
var key:Object = new Object();
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
function onKeyPressed(evt:KeyboardEvent):void {
	key[evt.keyCode] = true;
	key.keyCode = evt.keyCode;
}
function onKeyReleased(evt:KeyboardEvent):void { key[evt.keyCode] = false}

This snippet shows one way to go about doing key controls using QuickBox2D

Take a look at the swf here…

This works with the current version of QuickBox2D…. tomorrow I’ll be uploading the new version of QuickBox2D which supports FRIM (frame rate independent motion) and contains a few additional minor tweaks and fixes.

Read snippet: QuickBox2D w/ Key Controls

QuickBox2D Tetris Pieces

import com.actionsnippet.qbox.*;

[SWF(backgroundColor=0x000000, width=700, height=600, frameRate=60)]

var sim:QuickBox2D = new QuickBox2D(this);

sim.setDefault({fillColor:0x003366, lineColor:0x2B80D5, isBullet:true});
sim.createStageWalls();

var shapes:Array = [];
shapes[0] = [[1,1,1,1]];
shapes[1] = [[1, 0, 0], [1, 1, 1]];
shapes[2] = [[0, 0, 1], [1, 1, 1]];
shapes[3] = [[1, 1], [1, 1]];
shapes[4] = [[0, 1, 1], [1, 1, 0]];
shapes[5] = [[0, 1, 0], [1, 1, 1]];
shapes[6] = [[1, 1, 0], [0, 1, 1]];
var cols:Array = [0xFF0000,  0xFFFF00, 0xFF00FF, 0x0000FF, 0x00FF00,0x00FFFF, 0x00FF00,0xFAA703];
var angs:Array =  [0, Math.PI / 2, Math.PI, Math.PI + Math.PI / 2];
var bev:BevelFilter = new BevelFilter();
with (bev) blurX = 10, blurY = 10, strength = 0.5;

var inc:int = 9;
for (var i:int = 0; i<shapes.length; i++){
	sim.setDefault({fillColor:cols[inc % cols.length]});
	inc++
	makePiece(shapes[i], 3 + i * 3, 3);
	sim.setDefault({fillColor:cols[inc % cols.length]});
	inc++
	makePiece(shapes[i], 3 + i * 3, 8);
}

function makePiece(pattern:Array, xp:Number, yp:Number, scale:Number = 0.7):QuickObject{
	var parts:Array = [];
	for (var i:int = 0; i<pattern.length; i++){
		for (var j:int = 0; j<pattern[i].length; j++){
			if (pattern[i][j] == 1){
				parts.push(sim.addBox({x:j * scale, y:i * scale, width:scale, height:scale, restitution:0, friction:1, isBullet:true}));
			}
		}
	}
	var ang:Number = angs[int(Math.random()*angs.length)];
	var piece:QuickObject =  sim.addGroup({objects:parts, x:xp, y:yp, angle:ang});
	
	piece.userData.filters = [bev];
	return piece;
}

sim.start();
sim.mouseDrag();

This snippet uses the QuickBox2D library to create some Tetris pieces.


Have a look at the swf here…

Read snippet: QuickBox2D Tetris Pieces

QuickBox2D Groups

import com.actionsnippet.qbox.*;

[SWF (backgroundColor=0xAA0000, width=700, height=600, frameRate=60)]

var sim:QuickBox2D = new QuickBox2D(this);

sim.createStageWalls();

/**
create a dancing pill
*/
// all x and y coords are relative to the center of the group
var partA:QuickObject = sim.addCircle({x:-1, y:0, radius:0.5, restitution:.9});
var partB:QuickObject = sim.addCircle({x:1, y:0, radius:0.5, restitution:.9});
var partC:QuickObject = sim.addBox({x:0, y:0, width:2, height:1});
// all the parts are passed into the objects array
// addGroup() groups the parts together into one rigid body
var pill:QuickObject = sim.addGroup({objects:[partA, partB, partC], x:3, y:3, angle:0.3});

/**
create another group
*/
partA = sim.addCircle({x:0, y:0, radius:1});
partB = sim.addBox({x:0, y:1, width:1, height:1, fillColor:0x666666});
partC = sim.addBox({x:0, y:-1, width:1, height:1, fillColor:0x666666});
sim.addGroup({objects:[partA, partB, partC], x:8, y:3, angle:0.3});

/**
create two circles linked together by a stretchy joint
*/
partA = sim.addCircle({x:15, y:3, fillColor:0x000000, anglularDamping:1});
partB = sim.addCircle({x:17, y:3, fillColor:0xFFFFFF, anglularDamping:1});
// if x1, y1, x2 and y2 properties are not set, the joint is automatically placed
// at the b2Body's center
sim.addJoint({a:partA.body, b:partB.body, frequencyHz:1});

sim.start();
sim.mouseDrag();

You’ll need QuickBox2D Alpha 106 to run this… This snippet demo’s the addGroup() method, which allows for easy grouping of shapes. I updated the docs today to feature a simple explanation of how this works.


Have a look at the swf here…

Read snippet: QuickBox2D Groups

QuickBox2D Polys

import com.actionsnippet.qbox.*;

[SWF(backgroundColor=0x000000, width=700, height=600)]

var sim:QuickBox2D = new QuickBox2D(this);

sim.setDefault({fillColor:0x003366, lineColor:0x2B80D5});
sim.createStageWalls();

var i:int = 0;
for (i= 0; i<10; i++){
  sim.addCircle({x:5 + i, y:7, radius:0.3, linearDamping:1, angularDamping:1, fillColor:0x78B4C2, isBullet:true});	
}

for (i= 0; i<2; i++){
	var poly:Array = [];
	var r:Number = 3;
	var step:Number = Math.PI / 6;
	for (var t:Number = 0; t<=Math.PI; t+=step){
		poly.push(r * Math.cos(t));
		poly.push(r * Math.sin(t));
	}
	r = 2;
	for (t = Math.PI; t >= -step; t-=step){
		poly.push(r * Math.cos(t));
		poly.push(r * Math.sin(t));
	}
	// using points instead of verts causes QuickBox2D to triangulate the polygon
	// the wireframe boolean changes rendering style for polys
	sim.addPoly({x:4 + i *7, y:16, points:poly, wireframe:Boolean(i), linearDamping:1.5, angularDamping:1});
}

sim.start();
sim.mouseDrag();

I just uploaded QuickBox2D Alpha 106 which includes a few bug fixes and support for compound shapes and easier polys. I used the algorithm from yesterdays post to significantly simplify the way QuickBox2D handles the description of polygons.

You’ll need QuickBox2D Alpha 106 or greater, if you want to test this….


or just have a look at the demo here.

This triangulation is really better suited for 3D stuff – Box2D supports multiple convex polygons in one rigid body… this algorithm makes more shapes (triangles) than Box2D needs – I’ll probably swap out the algorithm in the near future.

Tomorrow I’ll be posting a demo about the way QuickBox2D simplifies compound shapes. I have yet to update the docs to include the new features of Alpha 106. That will happen along with tomorrows post.

Read snippet: QuickBox2D Polys

QuickBox2D Play

import com.actionsnippet.qbox.*;
import Box2D.Common.Math.*;

[SWF (backgroundColor=0xaa0000, width=700, height=600)]

const TWO_PI:Number = Math.PI * 2;

var sim:QuickBox2D = new QuickBox2D(this,{gravityY:20, debug:false});

var i:int = 0;

// add some circles
var circles:Array = [];
var circleNum:int = 20;
for (i = 0; i<circleNum; i++){
	circles[i] = sim.addCircle({x: 8, y:-2 - i, radius:0.1 + Math.random()*0.4, fillColor:0x000000});
}

// add some boxes
var boxes:Array = [];
var boxNum:int = 20;
for (i= 0; i<boxNum; i++){
	var rx:Number = 4 + (i % 5) * 4;
	var ry:Number =  4 + int(i / 5) * 4;
	var ra:Number = Math.random() * TWO_PI;
	boxes[i] = sim.addBox({x:rx, y:ry, width:3, height:0.4, angle:ra, density:0,fillColor:0xFF2200});
}

// vector(0,0) used to reset velocity
var resetVec:b2Vec2 = new b2Vec2();

sim.start();
sim.mouseDrag();

addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	 // rotate all boxes
     for (i= 0; i<boxNum; i++){
		boxes[i].angle += .05; 
	 }
	 // move circles to top of sceen after they fall off bottom
	  for (i= 0; i<circleNum; i++){
		if (circles[i].y > 20){
			circles[i].y = -1;
			circles[i].x = Math.random()*(stage.stageWidth / 30 - 9) + 4;
			// access to Box2D b2Body methods
			circles[i].body.SetLinearVelocity(resetVec);
		}
	 }
}

This is another QuickBox2D experiment. If you don’t know what QuickBox2D is … read about it here.

Take a look at the swf here

Read snippet: QuickBox2D Play

QuickBox2D Chain

import com.actionsnippet.qbox.*;

var sim:QuickBox2D = new QuickBox2D(this, {debug:true});
// use the box2D default renderer (debug : true)

sim.createStageWalls();

// anchor
var pre:QuickObject = sim.addCircle({x:9, y:3, radius:.5, density:0});

// create a chain of boxes
for (var i:int = 0; i<12; i++){
  var curr:QuickObject = sim.addBox({x:10 + i, y:3, width:.9, height:.9, angularDamping:1});
									                             
  // currently always adds a b2DistanceJoint
  sim.addJoint({a:pre.body, b:curr.body, 
			               x1:9 + i, y1: 3, x2: 10 + i, y2:3, collideConnected:false});
  pre = curr;
}

// add a circle, use CCD (isBullet)
sim.addCircle({x:20, y:10, radius:1, isBullet:true});

// start simulation
sim.start();
sim.mouseDrag();

This snippet uses my QuickBox2D library to create a chain. QuickBox2D is a wrapper for Box2DFlashAS3 that greatly simplifies world setup, instantiation and graphical skinning of rigid bodies (more info on yesterdays post)…

See the swf here .

Download Box2DFlashAS3 here

Download QuickBox2D Alpha 104 here

See yesterdays post for additional information. I’m still in the process of writing some docs and possibly a tutorial for QuickBox2D… hopefully I’ll finish with that soon…

If your somewhat familiar with Box2D and just want to just dig right in, the following scrap of information may help:


// Methods of the QuickBox2D class, used for creating rigid bodies and joints
addCircle();
addBox();
addPoly();
// currently only creates b2DistanceJoints
addJoint();

these function all take one parameter Object as their argument. The common parameter properties for rigid bodies are:

// QuickBox2D simpleRender settings:
lineColor:0x000000
lineAlpha:1
lineThickness:0
fillColor:0xCCCCCC
fillAlpha:1
// wrapped Box2D properties
x:3
y:3
density:1
friction:0.5
restitution:0.2
angle: 0
linearDamping:0
angularDamping:0
isBullet:false,
fixedRotation:false
allowSleep: true
isSleeping:false
// advanced use
maskBits:0xFFFF
categoryBits:1
groupIndex:0

//and the specific param properties are:
addCircle() : radius
addBox() : width, height
addPoly() : verts

//Joints have the following properties... not going to bother explaining these until I write the docs:
addJoint() : a, b, x1, x2, y1, y2

Read snippet: QuickBox2D Chain

Quick Box2D

[SWF(backgroundColor = 0x333333)]

import com.actionsnippet.qbox.*;

// setting debug = true, will use the Box2D debug rendering
var sim:QuickBox2D=new QuickBox2D(this, {debug:false, gravityY:10});

// creates static boxes on all sides of the screen
sim.createStageWalls({lineAlpha:0, fillColor:0xFF9900});

// add 25 boxes
for (var i:int = 0; i<25; i++){
	var xp:Number = 3 + (i % 5);
	var yp:Number = 1 + int( i / 5);
	sim.addBox({x:xp, y:yp, width:1, height:1, fillColor: i * 10 << 16, lineAlpha:0, angularDamping:5});
}

sim.addBox({x:7, y:10, width:3, height:.2, angle:-.3, density:0,lineAlpha:0, fillColor:0xFF9900});

sim.addCircle({x:3, y:14, radius:2, fillColor:0xCC0000, lineColor:0x333333});

sim.addPoly({x:13, y:5, verts:[[1,0,2,2,1,1.33],[1,0,1,1.33,0,2]], angle: .4, density:1});

// begins the simulation
sim.start();

// all non-static objects can be dragged
sim.mouseDrag();

I’ve been messing with Box2D for the past few weeks – I decided to create a library (QuickBox2D) for quick prototyping. This snippet makes use of this library, so in order to run it you’ll need to download the zip included at the end of this post…

If you don’t already know, Box2D is a great physics library created by Erin Catto. It was ported to AS3 by Matthew Bush and John Nesky. You can download the AS3 version of the library here.

Today’s snippet creates this swf (click any image to view demo):

QuickBox2D

QuickBox2D simplifies Box2D instantiation and makes it easy to skin rigid bodies with Library assets… normally you need to do something like this to create a box in Box2D:

var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(3, 3);
var boxDef:b2PolygonDef = new b2PolygonDef();
boxDef.SetAsBox(1, 1);
boxDef.density = 1;
var body:b2Body = w.CreateBody(bodyDef);
body.CreateShape(boxDef);
body.SetMassFromShapes();

and this doesn’t include setting up the physics world and the main loop to run the simulation… after writing a good deal of repetitive code I decided to make QuickBox2D. After writing lots of QuickBox2D style instantiation I decided to create an editor so that I could just draw circles, boxes, polygons and joints and then test and save them in real time (will be posting this editor in the near future). The next few posts will be about this mini-library and I’ll be writing up some real documentation for it… as of now, it doesn’t have any…

You can download Box2D here

You can download QuickBox2D here

and you can view some AS3 Box2D demos here

Read snippet: Quick Box2D