Bitmap planes in 3D
This is a very simple experiment for a project I’m working on. I need to display a series of Bitmap images stacked on top of each other but with varying z-depths. All I’m doing here is running through two loops: the first creates red circles of varying size and places them at a z-depth that is inversely proportional* to their radius. ( The further away they are from z=0 the smaller they are. ) Then do the same thing with blue circles. Only this time bring them closer – negative z-depth – to the user as their radius gets smaller. The result is that the circles edges’ define something nearly spherical.
Of course to make it fun and see the 3Dness I added changes to the SpriteVisualElement’s rotationX/Y based on the Mouse.X/Y.
| view source |
Making a circle
Here’s the code that makes the red circles.
// Make the red circles
for( var iRed:Number = 0.01; iRed < 1; iRed += 0.1 ) {
// Draw a red circle.
var spriteRed:Sprite = new Sprite();
spriteRed.graphics.beginFill( 0xFF0000, 0.2 );
spriteRed.graphics.drawCircle( 250, 250, 150 * Math.cos( Math.PI/2 * iRed ) );
// Make a new BitmapData and then draw the red circle into it.
var bmpDataRed:BitmapData = new BitmapData( 500, 500, true, 0x00333333 );
bmpDataRed.draw( spriteRed );
// Make a new Bitmap and give it the BitmapData with the red circle.
var bmpRed:Bitmap = new Bitmap( bmpDataRed );
// Position the bitmap.
bmpRed.x = -250;
bmpRed.y = -250;
bmpRed.z = 165 * iRed;
// Add the bitmap to the SpriteVisualElement: bmpPlanesHolder
bmpPlanesHolder.addChild( bmpRed );
}
*Note: I like using the term inversely proportional because it makes me feel smart. :)
If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.






