Rendering FOAM
I’m sorry that this took so long- especially those of you who’ve written me and patiently waited for my help with rendering… I simply don’t have as much time as I would like. Anyway- this will offer a solution for rendering your FOAM physics simulation with:
- Drawing API (SimpleFoamRenderer)
- BitmapData (BitmapFoamRenderer)
- DisplayObjects (DisplayObjectFoamRenderer)

Here’s a very silly demo- Mouse down anywhere to switch from the DisplayObject renderer to the Bitmap renderer.
demo
source
Note that these new renderers are meant as example only- I do think in most cases the developer will need a more specific setup than I could hope to generically offer. So consider this my implementation and at best a nudge in the right direction.
Hopefully both of these will be fairly self-explanatory, but I’ll briefly go over the DisplayObject renderer and what my thinking was when addressing this issue.
I wanted a means to render a DisplayObject (base class of Sprite, MovieClip etc.) that’s the visual representation of a RigidBody being simulated. I knew that I’d like to be able to pass either the DisplayObject’s Class or the instance itself. I also knew that I’d need an easy way to adjust the position of the DisplayObject- so first, I wrote a datatype to hold these properties- DisplayObjectData.
You’ll see that it has a setter for defining its displayObject property. This is what facilitates passing either a DisplayObject Class or a DisplayObject instance. The other properties:
- offsetX - the amount to offset the DisplayObject from its origin in the x direction
- offsetY - the amount to offset the DisplayObject from its origin in the y direction
- autoCenter - Boolean indicating whether to center the contents about the origin- Because of the way a RigidBody rotates about its center of mass, I figured this would be typical.
- hasBeenDisplayed - a helper Boolean for determining whether to perform the indicated transformations
In Rocket.as, you can see the way I’m embedding my visual assets:
[Embed(source="../../../bin/images/rocket/lunarPod.png")] private var rocketSpriteClass:Class; [Embed(source="../../../bin/images/rocket/asteroid.png")] private var asteroidSpriteClass:Class;
If this is unfamiliar with you, simply note that it’s analogous to the classes you’re instantiating as MovieClips in Flash CS3. As you’ll see in a moment, it’s not necessary to pass the Class, we can pass the DisplayObject instance as well.
Here’s how I’m passing the class to FOAM to tie it to to a RigidBody. Note that the instance of DisplayObjectData simply defines Foam.addElement’s renderData argument.
foam.addElement( rocket, true, true, new DisplayObjectData( rocketSpriteClass, 0, -5 ) );
Compare this with how I’m creating the asteroid (I wanted to scale the asteroid, or else I’d have created it in the same way as the rocket- it worked out well for the purpose of demonstration):
var asteroidSprite:DisplayObject = new asteroidSpriteClass(); asteroidSprite.scaleX = asteroidSprite.scaleY = size / 64; var asteroid:Circle = new Circle( sx, sy, size, size * 4, svx, svy, 0.5, 0.25, 0, -0.1 + Math.random() * 0.2 ); foam.addElement( asteroid, true, true, new DisplayObjectData( asteroidSprite ) );
There’s one last important thing to note in the Rocket example class. Because I don’t want to use the default FOAM renderer, I have to tell it which renderer to use:
foam.setRenderer( new DisplayObjectFoamRenderer() );
Now let’s move on to DisplayObjectFoamRenderer. Note that I’ve chosen to extend SimpleFoamRenderer so that I don’t have to rewrite drawing routines for objects I don’t have graphics for (such as the mouse dragger bungee). You’ll see my use of the DisplayObjectData properties in the addRenderable method.
So- ultimately all of this boils down to 3 lines of code which line up our DisplayObject with our RigidBody:
displayObject.x = ISimulatable( renderable.element ).x; displayObject.y = ISimulatable( renderable.element ).y; if( renderable.element is IBody ) displayObject.rotation = IBody( renderable.element ).q * 180 / Math.PI;
It places the DisplayObject at the x and y coordinates of the RigidBody’s center of mass. Because rotation is given in radians, we have to convert to an angle which is what DisplayObject.rotation expects.
And that’s pretty much it; for the most part a FOAM renderer is bookkeeping. It might suit you far better to just maintain reference to your DisplayObject and update it every frame just as I am in the above 3 lines of code… simply set render to false in Foam.addElement.




