{ P I X E L W E L D E R S }

After a long Papervision-induced hiatus, I’ve come back to FIVe3D- mainly because I still think it’s a great library. Since it’s still relatively new, however, there’s not a lot of example code out there. Thus, here’s another chunk from your friends here at Pixelwelders. This class creates a cube out of Sprite3D planes.

Fig. 1: 27 Cubes

Fig.2: The VectorCube Class

/**
 * A vector Cube class for Mathieu Badimon's excellent FIVe3D library
 * @author Zack Jordan
 * { P I X E L W E L D E R S . C O M }
 */
package com.pixelwelders.five3d
{
	import five3D.display.Sprite3D;
 
	public class VectorCube extends Sprite3D
	{
 
		public var faces		: Array;
 
		public function VectorCube( size:Number, colors:Array = null )
		{
			super();
 
			if ( !colors ) colors = [ 0xFF0000, 0xFF0000, 0xFF0000, 0xFF0000, 0xFF0000, 0xFF0000 ];
			createCube( size, colors );
		}
 
		/**
		 * Creates a new cube at the size specified
		 * 
		 * @param		size			Size of the cube to be created
		 * @return					The new cube
		 */
		private function createCube( size:Number, colors:Array ): void
		{
			faces = new Array();
 
			var xP:Array = new Array(	0, size / 2,	0, -size / 2, 0, 0 );
			var yP:Array = new Array(	0, 0,	0, 0,	-size / 2, size / 2 );
			var zP:Array = new Array(	-size / 2, 0, size / 2, 0, 0, 0	);
			var xR:Array = new Array(	0, 0,	0, 0, -90, 90 );
			var yR:Array = new Array(	0, -90, 180, 90,	0, 0 );
			var zR:Array = new Array(	0, 0,	0, 0, 0, 0 );
 
			for ( var i:int = 0; i < 6; i++ )
			{
				var face:Sprite3D = new Sprite3D();
				face.graphics3D.lineStyle( 1, 0x000000, 1 );
				face.graphics3D.beginFill( colors[ i ] );
				face.graphics3D.drawRect( -size / 2, -size / 2, size, size );
				face.graphics3D.endFill();
				face.singleSided = true;
 
				face.x = xP[ i ];
				face.y = yP[ i ];
				face.z = zP[ i ];
				face.rotationX = xR[ i ];
				face.rotationY = yR[ i ];
				face.rotationZ = zR[ i ];
 
				faces[ i ] = face;
				addChild( face );
			}
 
		}
 
	}
}

So what is this good for? Really, it’s just an easy way to create six faces and arrange them into a cube. You don’t have to worry about depth sorting or any of that stuff because each of the faces is one-sided. However, if you are using more than one of these in your presentation, make sure you specify that container.childrenSorted = true, where container is the Sprite3D containing your Cubes. Otherwise you’ll get some weird results.

Another note: the faces Array is public so you can continue to draw on each face of the cube, and even add children. So really, this is just a starting point; I’ll let you find something useful to do with it.

I just spent the last three weeks a little bit out of the action, wandering Europe in a motorcoach. On said motorcoach, there were only two things to do: play with my laptop, and play poker with the other passengers. By the end of the trip, I ended up winning about thirty Euros from my playing partners (most of which were 17 and younger). Obviously, I have no ethical qualms about gambling with minors. The only thing that disturbed me about this scenario was the fact that 30 Euros is pocket money in France and practically a mortgage payment in the US. Stupid dollar.

So between games, I started this little project in Papervision. I’m not sure how far I’ll take it, but it might end up being my entry into the PaperKing3D contest. I found some great images of a Victorian-style deck of cards, and painstakingly clone-brushed a full deck out of the few cards I could find. I then put together the actual game– which is obviously not finished. However, it does actually deal out the cards and keep track of players- the next step is to actually make it judge hands (flush vs. full house, etc.).

The best part of this little demo is what happens when you mouse over your cards (the closest hand). That is Bartek Drozdz’s bend modifier in action. I think it’s pretty eye-catching.

Anyway, that’s it on Pokervision for today; hopefully I’ll have the time to finish this (multiplayer 3D poker, anyone?). In the meantime, I’ll be working on another, possibly more awesome project that I’ll be presenting at tomorrow’s Chicago Flash Meetup. I’ll post more details here later this week.

The beauty of FIVe3D (other than its size, ease of use, and a few other things) is how easily extendable it is. For a previous experiment, I needed a way to draw an arc in 3D space. This isn’t something that FIVe3D provides, and in fact it was a little challenging to find the math I needed. However! Once I found it, I was able to easily use FIVe3D’s drawing API to put it into action.

The arc code, by the way, is from an ancient AS2 function called drawWedge() by Ric Ewing, which drew pizza-style wedges. Close enough. With a little elbow grease I managed to bend it to my will. Here’s an example of a bunch of arcs doing their thing:

And here is the code that draws the arc, which extends FIVe3D’s Drawing class. This could probably be cleaned up a bit, since I run through Ric’s arc code twice to create the thing; it wasn’t originally that way, but getting the fill on the inside of the arc proved more difficult than I originally thought.

/**
 * An extension of Mathieu Badimon's FIVe3D Drawing class.
 * This class draws an additional shape onto a FIVe3D Graphics3D instance.
 * This class includes code from by Ric Ewing.
 * 
 * @author 	Zack Jordan
 * 			{ P I X E L W E L D E R S }
 */
package com.pixelwelders.five3d
{
	import five3D.display.Graphics3D;
	import five3D.utils.Drawing;
 
	public class PXWDrawing extends Drawing
	{
 
		/**
		 * Draws a wedge shape onto a Graphics3D instance.
		 * 
		 * @param 	graphics		a Graphics3D instance on which to draw
		 * @param 	x				x position of the center of this wedge
		 * @param	y				y position of the center of this wedge
		 * @param	startAngle		the angle of one straight line of this wedge
		 * @param	arc				the angle (in degrees) of the total arc of this wedge
		 * @param	xRadius			the external radius along the x axis
		 * @param	yRadius			the external radius along the y axis
		 * @param	innerXRadius	the internal radius along the x axis
		 * @param	innerYRadius	the internal radius along the y axis
		 * @param	color			the color of the wedge fill
		 * @param	fillAlpha		the alpha value of the wedge fill
		 * 
		 * @return					nothing
		 */
		static public function drawWedge( 
			graphics:Graphics3D, 
			x:Number, 
			y:Number, 
			startAngle:Number, 
			arc:Number, 
			xRadius:Number, 
			yRadius:Number, 
			innerXRadius:Number, 
			innerYRadius:Number, 
			color:uint = 0xFF0000, 
			fillAlpha:Number = .5 
		): void
		{
			var segAngle	: Number
			var theta		: Number
			var angle		: Number
			var angleMid	: Number
			var segs		: Number
			var bx		: Number
			var by		: Number
			var cx		: Number
			var cy		: Number;
 
			segs = Math.ceil( Math.abs( arc ) / 45 );
			segAngle = arc / segs;
			theta = -( segAngle / 180 ) * Math.PI;
			angle = -( startAngle / 180 ) * Math.PI;
 
			graphics.lineStyle( 1, 0x000000, 1 );
			graphics.beginFill( color, fillAlpha );
			graphics.moveTo( 
				x + Math.cos( startAngle / 180 * Math.PI ) * innerXRadius,
				y + Math.sin( -startAngle/180 * Math.PI ) * innerYRadius 
			);
 
			// line 1
			graphics.lineTo( 
				x + Math.cos( startAngle / 180 * Math.PI ) * xRadius,
				y + Math.sin( -startAngle / 180 * Math.PI ) * yRadius 
			);
 
			// outer arc
			for ( var i:int = 0; i < segs; i++ ) {
				angle += theta;
				angleMid = angle - ( theta / 2 );
				bx = x + Math.cos( angle ) * xRadius;
				by = y + Math.sin( angle ) * yRadius;
				cx = x + Math.cos( angleMid ) * ( xRadius / Math.cos( theta / 2 ) );
				cy = y + Math.sin( angleMid ) * ( yRadius / Math.cos( theta / 2 ) );
				graphics.curveTo( cx, cy, bx, by );
			}
 
			// line 2
			graphics.lineTo( 
				x + Math.cos( ( startAngle + arc ) / 180 * Math.PI ) * innerXRadius, 
				y + Math.sin( -( startAngle + arc ) / 180 * Math.PI ) * innerYRadius 
			);
 
			theta = -( segAngle / 180 ) * Math.PI;
			angle = -( ( startAngle + arc ) / 180 ) * Math.PI;
 
			// inner arc
			for (var j:int = 0; j < segs; j++ ) {
				angle -= theta;
				angleMid = angle + ( theta / 2 );
				bx = x + Math.cos( angle ) * innerXRadius;
				by = y + Math.sin( angle ) * innerYRadius;
				cx = x + Math.cos( angleMid ) * ( innerXRadius / Math.cos( theta / 2 ) );
				cy = y + Math.sin( angleMid ) * ( innerYRadius / Math.cos( theta / 2 ) );
				graphics.curveTo( cx, cy, bx, by );
			}			
			graphics.endFill();			
		}
	}		
}

Another note on this experiment: the SWF is 16k. Holy crap.

ASIDE: So, the original theme of this article was a head to head between PV3D/VectorVision and FIVe3D, but then I realized that an offspring metaphor was really more apt, as explained below. Nonetheless, the following picture is too awesome not to use.

An awesome picture.

If you’ve been following this site for any amount of time, you’ve probably noticed that I’ve been spending quite a bit of time with Mathieu Badimon’s excellent FIVe3D engine. Probably too much time, in fact. I’ve talked about the features in other posts, so I won’t go into it here. If this is the first you’ve heard of it, go take a look at Mathieu’s examples, or click ‘FIVe3D’ in the tag cloud to the right to see what it is and some of the things it’s capable of.

It seems that the first thing people do when they see this engine is compare it with Papervision3D. I’ve resisted this for a long time; in my opinion, bitmap-based and vector-based 3D engines seem to be pretty close to the proverbial apples and oranges. However! As of sometime last week, Papervision and FIVe3D have been combined into some sort of (proverbial?) fruit punch, which means that inter-species comparisons make a lot more sense. It’s called VectorVision, and the men responsible for this unholy union are Barcinski & Jean-Jean, two mad scientists from Amsterdam.

Based on my earlier experiments, I’ve been kicking around the idea of a 3D tag cloud for this blog. FIVe3D, of course, seemed like the obvious man for the job due to its simplicity and the fact that Papervision hasn’t had anything in the way of quality text rendering. However, the experiments of the aforementioned Dutchmen made me wonder how Papervision would handle the task. So, I created a similar application using each library. You can see the results below; each image is a separate SWF- just click one to activate it.

Findings

As you can see, there are some differences; and of course, this is as basic as either engine gets. But in terms of pure capability, it looks like the offspring of PV3D and FIVe3D is indeed greater than either. Post your machine/browser and frame rates; I’d like to see what everyone else is getting.

As should be obvious, I’ve been pretty fascinated with Mathieu Badimon’s elegant little 3D vector engine FIVe3D for some time now:

Experiments in the Third Dimension: FIVe3D
FIVe3D and TweenLite: Text Cloud
Best FIVe3D Experiment Yet
FIVe3D TextCloud: AS3 Tutorial and Source

And as I’ve mentioned, FIVe3D is in my opinion the easiest Flash 3D engine to pick up and play with. In my tutorial above (link #4), I am able to get a little demo running in just a few lines of ActionScript. However, my tutorial only covers the DynamicText3D class (and to a lesser extent, the Sprite3D class). Thus, as a companion work, I’ve put up a quick summary and comparison of the FIVe3D display classes below. Hopefully this will help tide a few people over until Mathieu releases the real documentation (which will certainly be much more exhaustive than my little effort).

Display Classes

So let me know if this is useful to you- or if not, what would make it useful (more examples? benchmarks?). Hopefully it will at least give a little clarity to those who are curious about this engine.

A few people have asked me to release the code to my FIVe3D Text Cloud example, so I’ve cleaned things up to the point where I wouldn’t be completely humiliated to release it into the wild. However, I thought I’d touch on a couple points and turn this post into something halfway between a tutorial and an exhibition.

If you just want the source code, you can download it at the bottom of the page. If you’d like the whole shebang, pray read on.

The (new and improved) example:

FIVe3D Basics

FIVe3D is ridiculously easy to set up. In this example, I used the following code to set up everything I needed:

// the Scene3D class is what contains and renders everything else
// think of it as a 3D Stage class
scene = new Scene3D();
scene.x = 375;
scene.y = 200;
addChild( scene );
 
// Sprite3D is, obviously, a 3D version of the standard Sprite class
// it is an actual DisplayObject, so you can use normal positioning, filters, etc. on it
container = new Sprite3D();
scene.addChild( container );

You’ll notice that the syntax is just like AS3 extended into the third dimension. You can nest Sprite3Ds just like Sprites. When you move or rotate the parent Sprite3D, the children will move and rotate with it. The reason I’ve created a container Sprite3D here is so I can rotate several children at the same time.

Now if I wanted to do this the easy way, I could just add my text in one big chunk with the DynamicText3D class that ships with FIVe3D. It works much like the AS3 TextField class, except that the fonts are actually ActionScript files (you’ll see what I mean when you crack open the FIVe3D source).

var txt:DynamicText3D = new DynamicText3D( HelveticaBold ); // HelveticaBold ships with FIVe3D
txt.size = 30;
txt.color = 0xD34328;
txt.text = "Pixelwelders LLC"
container.addChild( txt );

That’s it. The Scene3D class takes care of its own rendering, so you don’t have to trigger it yourself, Papervision-style. Even when a FIVe3D scene looks static, it is actually rendering at your current frame rate. Thus, this is enough code to render 3D text in FIVe3D. Add an ENTER_FRAME listener and increment the container.rotationX property every frame and you’ll see what I mean.

Moving On…

Now this is fine for your everyday run-of-the-mill 3D text, but not for the effect that I had in mind. If I had added my text this way, it would have behaved as a single block, each letter forever doomed to stay wedged firmly between its neighbors. No, I had bigger plans for this text.

For this effect, I created a class called MotifCollection3D. Not a very good name, but typography is not my strong suite and I wasn’t quite sure what else to call it. It’s an extension of the aforementioned FIVe3D Sprite3D class, and it contains one DynamicText3D instance for every letter of the word that it’s currently displaying. This is how you instantiate it:

var cloud:MotifCollection3D = new MotifCollection3D( "PIXELWELDERS LLC", HelveticaBold, 30, 0xD34328 );
container.addChild( cloud );

There’s nothing to it. You send the text, the font class (again, included with FIVe3D), the size, and the color. It creates and assembles all the DynamicText3D instances, and then you can treat it like any other Sprite3D. However, it also includes two methods: assemble(), and the thrillingly-named explode().

Calling either of these methods cycles through all the instances of DynamicText3D and tweens them each to a destination using TweenLite. The explode() method was easy: it just chooses a random destination and rotation for each letter. The assemble() function, on the other hand, was a bit trickier; it needs to know the exact width of every letter in order to place them next to each other.

Happily, that is one of the things that’s included with the FIVe3D typography classes. Each letter, number, and punctuation mark in HelveticaBold contains a __width property, accessible like so:

var letterWidth:Number = HelveticaBold.__widths[ "P" ]; // returns the width of the "P" glyph

That’s a start, but it returns the same width regardless of what size the font is being displayed at. After a little experimentation, I found that this code gives the correct glyph width no matter what size the font:

var letterWidth:Number = HelveticaBold.__widths[ "P" ] * ( size / 100 );

I think that pretty much covers anything novel that I may have done. There are additional comments in the code as well, and it’s only two classes anyway: it shouldn’t be too difficult to figure out anything not explicitly laid out here.

Download Source

Pixelwelders FIVe3D Text Cloud

NOTE: You’ll need to download TweenLite and FIVe3D from their respective sites to get this to run. But you probably already knew that.

The FIVe3D examples are starting to fly hot and heavy through the blogosphere, so here’s another contribution. This will probably be the theme of my new portfolio, but I was so impressed with the result that I had to post it. This will be perfect with a bit of scratchy 1920’s horn music.

UPDATE: I have another FIVe3D example/experiment (3D graphing) here. And, if you’re just cruising the web for FIVe3D examples, I have yet another one here.

I can’t seem to get enough of this FIVe3D thing. It’s even becoming natural to capitalize every letter except for that “e” when I write it. Not that I’m blinded to its faults, for there are a few here and there. But for quick 3D text rendering, I have yet to find its equal.

Take today’s experiment, for example. It was originally a Twitter viewer, but I haven’t figured out how to get it working online yet, so I’ve given it some generic text to render. It uses TweenLite for movement, and FIVe3D for rendering. Try clicking around and moving the mouse.

The part of this project that would have been challenging in PV3D or Sandy is the spacing of the letters. It was a great relief to find that FIVe3D is already intimately aware of each letter’s size, since it is rendering them as shapes. Thus, I didn’t have to painstakingly experiment to find the proper spacing.

Once I actually think up a clever tagline, I might just turn this into my site header. This could also be a pretty slick little tag cloud for site content, but I think it might get annoying if this was the only way to find a category. Ah well. A man can dream.

UPDATE
I did indeed turn this into my header. We’ll see how many people play with it.

UPDATE #2
And… I took it back out. Seems that something was weird with IE and Kimili Flash Embed. Or… it could have been user error.

UPDATE #3And… source code is live! With a tutorial/walkthrough, even! Get it here:
FIVe3D TextCloud: AS3 Tutorial and Source

UPDATE: For a more interesting and less useful FIVe3D example, see my other post here. And for yet another example that runs surprisingly well considering the sheer number of filters it uses, see here.

After some diligent research, I have compiled a list of things that impress me about Mathieu Badimon.

• He lives in Paris
• He speaks at least two languages (that is, I assume he speaks French as well as English.)
• He has had at least one website on The Flash Website Awards
• He apparently seems to understand exactly what the Flash community needs in a 3D engine

This last one in particular has gotten me excited today, because today I learned that he has released said 3D engine into the wild. Apparently he did this some time ago, but I only found out in the last few hours- and I, suffice it to say, am thrilled.

Here’s why I’m excited about this engine. Everybody in the community knows about Papervision3D, Away3D, or Sandy. There’s nothing new there. But all the development in those arenas seems to be in the direction of textured polygons, an area which holds limited appeal to me because of the limited power of the Flash Player. In general, I’ve found that nice smooth 3D vector effects that I want, I’ve had to bend Papervision to my will. Or, in some cases (such as text), I’ve never gotten a result I’m happy with.

So that’s why I’m thrilled about FIVe3D, which focuses on 3D vectors. Nice smooth lines, better text (although still not perfect), and no weird clipping issues that I’ve run into yet. It still seems to be pretty basic, and hopefully M. Badimon plans on continuing development, but what I see right now is pretty impressive. Here’s what I cooked up in about an hour. It’s a little rough, so forgive me- this is my first time with the engine. Reload the page to see the animation.

The subject matter is a little boring, but I think it will leave a certain potential client muchly impressed. Here’s the direct link, if you’d like to impress your own clients: FIVe3D.