I’m most passionate about hiding complexity with simple APIs, which is one of the reasons I’m so excited about Hype.
A few weeks ago Peter Elst told me that he was trying to find a simple way to draw 3D shapes, and so I helped him with a bit of code. He’d done some great work, and it really inspired me to continue to simplify things even more.
So I spent a couple of hours putting together an experiment to see whether I could build a simple 3D drawing API for Flash that works more or less exactly like the 2D Flash drawing API.
I’m not sure whether this was the right approach but I thought it would be a fun experiment nonetheless and a great way to canvas opinion and get some feedback and ideas!
So here it is FlashDraw3D. The first thing you do is create a Graphics3D object:
var g3d : Graphics3D = new Graphics3D(this);
As you can see you pass it through a reference to the DisplayObject that you want to draw into. Once you’ve made it you can then draw into it :
g3d.lineStyle(1, 0xff0000, 1);
g3d.moveTo(-10, 0, -10);
g3d.lineTo(10, 10, 10);
With of course the same syntax as the 2D drawing API except with 3 (x, y, z) coordinates instead of 2 (x, y).
And just like the flash drawing API has a drawRect, we have a drawCube :
g3d.drawCube(0, 0, 0, 100, 100, 100);
I’ve also added a couple of extras :
Just to show that it’s 3D :-). I really should have added rotateX and rotateZ but hey I only did it in a couple of hours. 🙂 I’ll add it soon I promise.
And also some handy 2D to 3D converting commands :
g3d.moveTo2D(mouseX, mouseY, 0);
g3d.lineTo2D(mouseX, mouseY, 0);
Where you can pass through 2D screen co-ordinates that are converted to a 3D position at the z depth you gave it. In the example that comes in the code base this is used to draw in 3D with the mouse.
Please note : it’s very much a rough prototype and it’s absolutely not optimised at all! It’s incomplete and poorly documented. I’m just putting it out there to see what you think.
Download the code at http://code.google.com/p/flashdraw3d/source/checkout and give it a try! I’d love to hear any suggestions you have. (Polite ones anyway 😉 )
Here’s the code for the above example :
Continue reading “Simple Flash 3D drawing API”