Freelance programming services.

Brighton, London & the South East.

PHP, MySQL, JavaScript, WebGL, JQuery, Processing.js, Three.js,
ActionScript, Flash, Flex, AIR, Away3d,
Processing, OpenFrameworks, C++, OpenCV, OpenNI, OpenKinect, Android, iOS, PhoneGap, HTML5, Unity.

Technical project management.
Cross platform device strategies.
Creative coding.

Please for current availability.

Covering Brighton, London & the South East

Please for current availability

Simple 3D Drawing in AS3

The right tool for the job is not always the most sophisticated one. There are a variety of 3D engines for Flash, each with their own merits. I even wrote one of my own a few years back. But there are times when all you want to do is a bit of programmatic drawing, i.e. creating lines, points and basic shapes in a 3D space, and for that particular purpose any of these powerful tools feels like overkill.

Basic 3D drawing is something that is very straightforward in other technologies, Processing or OpenFrameworks for example, but is one of those seemingly simple tasks that Flash can find quite difficult. If one employs something like PaperVision or Away3D for the purpose, you soon become very aware of the weight of these engines, as you watch your movies crawl after only a few hundred simple lines.

For the project I’m working on at the mo I needed to come up with a process for churning out some 100 Abandoned Artworks style experimentalism within AS3. After a day or two of R&D I came up with a rather elegant solution. It required only two simple steps …

Step 1: Steal a bit of code off a mate

I didn’t even know Seb had written this wicked little engine, until he heard me moaning on Twitter, and offered it as a possible solution. I had kinda come to the conclusion that I was going to have to write something that performed some 2D/3D transformations for 3D Vectors, but Seb had saved me the bother. He’d taken the simplest, stripped down, approach to 3D drawing – creating a set of commands that mirror AS3′s 2D Drawing API. And it works a treat.

Get Adobe Flash player

The code for spiraling around a sphere in the demo above I nicked from my own forthcoming Processing book (ripping off oneself is perfectly acceptable). The simplicity of this engine made it ideal for porting Processing code over to AS3.

Step 2: Smash it to a canvas

Flash, even using AS3, is sloooow. Painfully slow. This is partly the reason I’d always favoured Processing for my generative art and video work. You certainly can’t get away with the same number of calculations per frame as you can in Java or C++. But you can speed things up by stealing a trick from Processing – using the pixels of the screen as a “canvas”.

You don’t have to just draw larger and larger vectors for your lines, until the processor starts to scream. Instead you can, every so often, render the lines to a bitmap that lives in the background using the bitmap draw() method. That way you only need to draw any elements that are new since the last bitmap smash.

Obviously, you can’t do vector animation using this method, but that’s something Processing users will be used to. Animation in Processing requires redrawing the entire canvas every frame, which is no big deal when you’ve Java’s speed at your disposal.

Code for both the spiral demo and an example of the bitmap canvas trick have been checked into the Flash Draw 3D googlecode repository. So help yourself if you want to have a play. I’ll be posting some of the pretty things I’ve created with it over at soon.

posted October 6th, 2010


Sonja said...

Thank you! Check out my experimental flash sound visualisation based on your code! Fun to play with!

Add your comment

pingback: Flash Enabled Blog – Everything Flash » Flash 3D List