Stitching planes seamlessly in FP10: 3D grass

There is one thing I really wanted to do as soon as the Flash Player 10 was released, before getting familiar with the power behind GraphicsTrianglePath, and that was to stitch Sprite instances together seamlessly in one direction. I think the simplicity of the technique is interesting and relevant is peculiar cases, so here it is.

Before looking at the extremely simple math behind it, here’s the use I made of it: Randomly generated grass stands, in a billboarding fashion.

GrassPatch.swf, click and drag to rotate

Again, way better results would be obtained with GraphicsTrianglePath. Oh, yup, and the code -you will soon realize- is quite messy, this is really only a quick and dirty proof of concept. Alright. Enough disclaimers, how is this little thing done? Since we know the planes will be aligned along X, all we need to do is to find the correct y and z positions, as shown in this diagram:

How to stitch planes together in Flash

Assuming the registration point of our sprites is at their center, and that we want to align these planes vertically, then we really want to translate C1 to C0. P0 is known to us. P1 is an arbitrary position (we’ll use the sprite’s local coordinates to find C1). The orientation of the planes along one axis is known as well (in that case, along Z). The dimensions before any transformation, is also known for both sprites (segment length).
So really, all we’ve got to do is to find C0 and C1, and translate C1 to C0.

C0.y = P0.y + Math.sin(theta) *(length*.5);
C0.z = P0.z + Math.cos(theta)*(length*.5);
C1.y = P1.y + Math.sin(omega+Math.PI)*(length*.5);
C1.z = P1.z + Math.cos(omega+Math.PI)*(length*.5);

We can now translate P1 to C1. There are many ways to do this. In the provided code, y is first set to -i*length then the difference between C0 and C1 is added to this (effectively translating from an incorrect guessed position to the correct position):