Talking about Actionscript 3, Box2D, Flash and Users contributions.
Only a day after Drawing boxes on the fly in Box2D I got three submissions for drawing circles on the fly.
I will list all of them, and I found interesting how different Flashers obtained the same result in quite the same way.
The first to send the routine was Vitaliy Berov:
This is the source code:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
public class andrewCircle extends Sprite {
public var m_dbgSprite;
public var m_world:b2World;
public var m_phys_scale:Number = 30.0;
public var m_timestep:Number = 1.0/30.0;
public var m_iterations:Number = 10.0;
//initial box coordinates when we first press mouse down
public var initX:Number = 0.0;
public var initY:Number = 0.0;
public var drawing:Boolean = false;
public function andrewCircle() {
/*
A Box2D world needs three parameters: a b2AABB, gravity
and a Booleand deciding whether or not to let bodies sleep
when they are not being simulated.
This saves CPU so should always be left on :)
*/
var gravity:b2Vec2 = new b2Vec2(0,9.8);
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-1000,-1000);
worldAABB.upperBound.Set(1000,1000);
m_world = new b2World(worldAABB,gravity,true);
//Setup Debug Draw - So that Box2D draws the shapes for us
m_dbgSprite = new Sprite();
addChild(m_dbgSprite);
SetDebugDraw();
//Add Our Ground
AddStaticBox(300/m_phys_scale,440/m_phys_scale,300/m_phys_scale,50/m_phys_scale);
addEventListener(Event.ENTER_FRAME,Update);
stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed);
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved);
stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased);
}
public function mousePressed(e:MouseEvent) {
//Store initial X and Y position
initX = e.localX;
initY = e.localY;
drawing = true;
}
public function mouseMoved(e:MouseEvent) {
if (drawing) {
//Simply draw the "ghost" of the circle we are about to add
graphics.clear();
graphics.beginFill(0xFF0000,0.5);
graphics.drawCircle(initX, initY, (e.localX - initX));
}
}
public function mouseReleased(e:MouseEvent) {
graphics.clear();
drawing = false;
//Coordinates of a point laying on the edge of the circle.
var finalX:Number = e.localX;
var finalY:Number = e.localY;
//calculate the radius
var radius:Number = Math.abs(finalX-initX);
if (radius > 0) {
AddCircle(initX/m_phys_scale, initY/m_phys_scale, radius/m_phys_scale)
}
}
public function AddCircle(_x:Number,_y:Number,_radius:Number) {
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(_x,_y);
var circleDef = new b2CircleDef();
circleDef.radius= _radius;
circleDef.density = 1.0;
circleDef.friction = 0.3;
circleDef.restitution = 0.2;
var body:b2Body = m_world.CreateBody(bodyDef);
body.CreateShape(circleDef);
body.SetMassFromShapes();
}
public function AddStaticBox(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number) {
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(_x,_y);
var boxDef:b2PolygonDef = new b2PolygonDef();
boxDef.SetAsBox(_halfwidth,_halfheight);
boxDef.density = 0.0;
var body:b2Body = m_world.CreateBody(bodyDef);
body.CreateShape(boxDef);
body.SetMassFromShapes();
}
public function Update(e:Event) {
//We need to do this to simulate physics
m_world.Step(m_timestep,m_iterations);
}
public function SetDebugDraw() {
//Set Debug Draw (hidden here to reserve space in constructor.)
var dbgDraw:b2DebugDraw = new b2DebugDraw();
dbgDraw.m_sprite = m_dbgSprite;
dbgDraw.m_drawScale = m_phys_scale;
dbgDraw.m_fillAlpha = 0.8;
dbgDraw.m_lineThickness = 2.0;
dbgDraw.m_drawFlags = 0x0001 | 0x0002;
m_world.SetDebugDraw(dbgDraw);
}
}
}
Then came Michael Beech, featuring a menu to select between circles and boxes:
package {
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
import Box2D.Dynamics.*;
public class andrew extends Sprite {
public var m_dbgSprite : Sprite;
public var m_world:b2World;
public var m_phys_scale:Number = 30.0;
public var m_timestep:Number = 1.0/30.0;
public var m_iterations:Number = 10.0;
//initial box coordinates when we first press mouse down
public var initX:Number = 0.0;
public var initY:Number = 0.0;
public var drawing:Boolean = false;
public static const RECTANGLE : String = "rectangleShape";
public static const CIRCLE : String = "circleShape";
private var rectButton : Sprite;
private var circButton : Sprite;
private var shapeType : String = RECTANGLE;
public function andrew() {
/*
A Box2D world needs three parameters: a b2AABB, gravity
and a Booleand deciding whether or not to let bodies sleep
when they are not being simulated.
This saves CPU so should always be left on :)
*/
var gravity:b2Vec2 = new b2Vec2(0,9.8);
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-1000,-1000);
worldAABB.upperBound.Set(1000,1000);
m_world = new b2World(worldAABB,gravity,true);
//Setup Debug Draw - So that Box2D draws the shapes for us
m_dbgSprite = new Sprite();
addChild(m_dbgSprite);
SetDebugDraw();
//Add Our Ground
AddStaticBox(300/m_phys_scale,440/m_phys_scale,300/m_phys_scale,50/m_phys_scale);
createButtons();
addEventListener(Event.ENTER_FRAME,Update);
stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed);
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved);
stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased);
}
public function mousePressed(e:MouseEvent) : void {
//Store initial X and Y position
initX = e.localX;
initY = e.localY;
drawing = true;
}
public function mouseMoved(e:MouseEvent) : void {
if (drawing) {
//Simply draw the "ghost" of the box we are about to add
graphics.clear();
graphics.beginFill(0xFF0000,0.5);
switch(shapeType){
case RECTANGLE :
graphics.drawRect(initX,initY,e.localX-initX,e.localY-initY);
break;
case CIRCLE :
graphics.drawCircle(e.localX,e.localY,e.localX-initX);
break;
}
}
}
public function mouseReleased(e:MouseEvent) : void {
graphics.clear();
drawing = false;
//Coordinates of bottom-right of box (when drawing from left to right)
var finalX:Number = e.localX;
var finalY:Number = e.localY;
//Correct if drawing from right to left
if (finalX < initX) {
//If so, swap initX and finalX
var tempX:Number = initX;
initX = finalX;
finalX = tempX;
}
if (finalY < initY) {
//If so, swap initY and finalY
var tempY:Number = initY;
initY = finalY;
finalY = tempY;
}
//Work out the half-width and height of the box
var boxHalfWidth:Number = Math.abs((finalX-initX)/2);
var boxHalfHeight:Number = Math.abs((finalY-initY)/2);
if (boxHalfWidth > 0 && boxHalfHeight > 0) {
switch(shapeType){
case RECTANGLE :
AddBox((finalX-boxHalfWidth)/m_phys_scale,(finalY-boxHalfHeight)/m_phys_scale,boxHalfWidth/m_phys_scale,boxHalfHeight/m_phys_scale);
break;
case CIRCLE :
AddCircle((finalX-boxHalfWidth)/m_phys_scale,(finalY-boxHalfHeight)/m_phys_scale,boxHalfWidth/m_phys_scale,boxHalfHeight/m_phys_scale);
break;
}
}
}
/*
NOTE: AddBox takes the _x,_y and halfwidth and halfheight parameters
in METRES not PIXELS. This means when you call this function, always
DIVIDE a pixel size by m_phys_scale to get it in meteres.
*/
public function AddBox(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number) : void {
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(_x,_y);
var boxDef:b2PolygonDef = new b2PolygonDef();
boxDef.SetAsBox(_halfwidth,_halfheight);
boxDef.density = 1.0;
boxDef.friction = 0.3;
boxDef.restitution = 0.2;
var body:b2Body = m_world.CreateBody(bodyDef);
body.CreateShape(boxDef);
body.SetMassFromShapes();
}
public function AddCircle(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number) : void {
var bodyDef : b2BodyDef = new b2BodyDef();
bodyDef.position.Set(_x + _halfwidth, _y +_halfheight);
var circleDef : b2CircleDef = new b2CircleDef();
circleDef.radius = _halfwidth;
circleDef.density = 1.0;
circleDef.friction = 0.5;
circleDef.restitution = 0.2;
var body : b2Body = m_world.CreateBody(bodyDef);
body.CreateShape(circleDef);
body.SetMassFromShapes();
}
public function AddStaticBox(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number) : void {
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(_x,_y);
var boxDef:b2PolygonDef = new b2PolygonDef();
boxDef.SetAsBox(_halfwidth,_halfheight);
boxDef.density = 0.0;
var body:b2Body = m_world.CreateBody(bodyDef);
body.CreateShape(boxDef);
body.SetMassFromShapes();
}
private function createButtons() : void {
rectButton = new Sprite();
var recShape : Shape = new Shape();
recShape.graphics.beginFill(0xff0000);
recShape.graphics.drawRect(0, 0, 15, 15);
recShape.graphics.endFill();
rectButton.addChild(recShape);
addChild(rectButton);
rectButton.x = 10;
rectButton.y = 10;
rectButton.addEventListener(MouseEvent.CLICK, setDrawType);
circButton = new Sprite();
var circShape : Shape = new Shape();
circShape.graphics.beginFill(0xff0000);
circShape.graphics.drawCircle(7.5, 7.5, 7.5);
circShape.graphics.endFill();
circButton.addChild(circShape);
addChild(circButton);
circButton.x = rectButton.x + 20;
circButton.y = 10;
circButton.addEventListener(MouseEvent.CLICK, setDrawType);
circButton.alpha = 0.25;
}
private function setDrawType(evt : MouseEvent) : void {
switch(evt.currentTarget){
case rectButton :
shapeType = RECTANGLE;
circButton.alpha = 0.25;
rectButton.alpha = 1;
trace(shapeType);
break;
case circButton :
shapeType = CIRCLE;
circButton.alpha = 1;
rectButton.alpha = 0.25;
trace(shapeType);
break;
}
}
public function Update(e:Event) : void {
//We need to do this to simulate physics
m_world.Step(m_timestep,m_iterations);
}
public function SetDebugDraw() : void {
//Set Debug Draw (hidden here to reserve space in constructor.)
var dbgDraw:b2DebugDraw = new b2DebugDraw();
dbgDraw.m_sprite = m_dbgSprite;
dbgDraw.m_drawScale = m_phys_scale;
dbgDraw.m_fillAlpha = 0.8;
dbgDraw.m_lineThickness = 2.0;
dbgDraw.m_drawFlags = 0x0001 | 0x0002;
m_world.SetDebugDraw(dbgDraw);
}
}
}
and the third one was fleshMaker from Fuori dal Cerchio (translated in english sounds like “outside the circle”… how ironic…)
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
public class TestCircle extends Sprite {
public var m_dbgSprite;
public var m_world:b2World;
public var m_phys_scale:Number = 30.0;
public var m_timestep:Number = 1.0/30.0;
public var m_iterations:Number = 10.0;
//initial box coordinates when we first press mouse down
public var initX:Number = 0.0;
public var initY:Number = 0.0;
public var drawing:Boolean = false;
public var b:b2Body;
public function TestCircle() {
/*
A Box2D world needs three parameters: a b2AABB, gravity
and a Booleand deciding whether or not to let bodies sleep
when they are not being simulated.
This saves CPU so should always be left on :)
*/
var gravity:b2Vec2 = new b2Vec2(0,9.8);
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-1000,-1000);
worldAABB.upperBound.Set(1000,1000);
m_world = new b2World(worldAABB,gravity,true);
//Setup Debug Draw - So that Box2D draws the shapes for us
m_dbgSprite = new Sprite();
addChild(m_dbgSprite);
SetDebugDraw();
//Add Our Ground
AddStaticBox(250/m_phys_scale,480/m_phys_scale,250/m_phys_scale,10/m_phys_scale);
addEventListener(Event.ENTER_FRAME,Update);
stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed);
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved);
stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased);
}
public function mousePressed(e:MouseEvent) {
//Store initial X and Y position
initX = e.localX;
initY = e.localY;
drawing = true;
}
public function mouseMoved(e:MouseEvent) {
if (drawing) {
graphics.clear();
graphics.beginFill(0xFF0000, 0.5);
// getting radius, thank you to Pythagorean theorem (and my mum)
var radius:Number = Math.sqrt((e.localX - initX)*(e.localX - initX) + (e.localY - initY)*(e.localY - initY));
graphics.drawCircle(initX, initY, radius);
}
}
public function mouseReleased(e:MouseEvent) {
graphics.clear();
drawing = false;
var radius:Number = Math.sqrt((e.localX - initX)*(e.localX - initX) + (e.localY - initY)*(e.localY - initY));
addCircle(initX, initY, radius);
}
public function addCircle(_x:Number, _y:Number, _radius:Number) {
var bd:b2BodyDef = new b2BodyDef();
var cd:b2CircleDef = new b2CircleDef();
cd.radius = Math.abs(_radius)/m_phys_scale;
cd.density = 2;
cd.restitution = 0.2;
cd.friction = 2;
bd.position.Set(_x/m_phys_scale, _y/ m_phys_scale);
b = m_world.CreateBody(bd);
b.CreateShape(cd);
b.SetMassFromShapes();
}
public function AddStaticBox(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number) {
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(_x,_y);
var boxDef:b2PolygonDef = new b2PolygonDef();
boxDef.SetAsBox(_halfwidth,_halfheight);
boxDef.density = 0.0;
var body:b2Body = m_world.CreateBody(bodyDef);
body.CreateShape(boxDef);
body.SetMassFromShapes();
}
public function Update(e:Event) {
//We need to do this to simulate physics
m_world.Step(m_timestep,m_iterations);
}
public function SetDebugDraw() {
//Set Debug Draw (hidden here to reserve space in constructor.)
var dbgDraw:b2DebugDraw = new b2DebugDraw();
dbgDraw.m_sprite = m_dbgSprite;
dbgDraw.m_drawScale = m_phys_scale;
dbgDraw.m_fillAlpha = 0.8;
dbgDraw.m_lineThickness = 2.0;
dbgDraw.m_drawFlags = 0x0001 | 0x0002;
m_world.SetDebugDraw(dbgDraw);
}
}
}
All you need to do to included it in your project is download the source from Drawing boxes on the fly in Box2D and replace the content in andrew.as file with the one you prefer.
Just remember to change class and main function name to andrew.
Now, what about triangles? This seems a little harder…
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.