Drawing circles on the fly in Box2D

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…

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers