Blog

Posts tagged with “play” and “as3”

Recreating Grant Skinner's sphereTest Part 3 — actually getting it done the easy way.

After a massive amount of experimentation, trying to recreate Grant's Skinner's original sphereTest using the displayObject class's rotationY, rotationX and rotationZ properties, I realized that:

1) this was a royal pain in the ass, and
2) there had to be an easier way to do it.

That easier way was the Matrix3D, and Vector3D objects. Once an object had been positioned in 3D space by giving it a z position, Flash lets you manipulate it in 3D space via <object>.transform.matrix3D. Not only that you can get a Matrix3D object that relative to any other object on the stage, via var rel3D:Matric3D = <object>.transform.getRelativeMatrix3D(<RelativeObject>);. So I could position each disc in the sphere object and simply rotate them incrementally with disc.transform.matrix3D = rel3D.appendRotation(degrees,[Vector3D.X_AXIS|Vector3D.Y_AXIS]);. The number of degrees to rotate and which axis to rotate around can quickly be calculated by getting the relative position and distance of the mouse pointer from the center of the sphere. Not only that, the true z position, needed for stacking of the object is available through rel3D.position.z. Bang. Dead simple. I even simplified the stacking by creating 2 container objects for each original z position — one for the front of the sphere and one for the back — that were pre-stacked at creation time. With those there, I was able to move each disc into the appropriate container immediately after rotation, instead of sorting the array and re-iterating to stack. This also allowed me to drop in the larger inner-sphere object between the sphere half containers and just leave it there to do nothing but look pretty. What had taken literally days of trial and error previously, was pounded out in about an hour and a half.

Done. Easily done. Too easily in fact. In order to justify my earlier blind muddling, I felt I need to do something cooler than just redoing Grant's original work. So I used Google to find global land cover information by latitude and longitude, did some rough calculating to find relative diameters of each longitude (Using the Vector3D.distance static method, actually) and made this funky spinning globe:

Now, there's a lot more points to rotate in this one, so I slowed down the frame rate to make sure the math keeps up, but all in all I feel vindicated.

Mostly.

Tags: , ,
2009.12.14 01:15 PM | Permalink 0 Comments

Recreating Grant Skinner's sphereTest Part 2 — almost figuring it out the hard way.

Working off the tests I did previously to try and recreate Grant Skinner's original sphereTest, I drew a bunch of discs, moved them out along the Z-axis randomly between min and max values, and distributed them randomly along the X and Y axes using the rotationX and rotationY attributes. Then I incremented each disc's rotationY value with the onEnterFrame event.

Obviously, the stack order would be need to be worked on, but not a bad start. To get the stack order, I needed to find the relative position of each disc along the Z-axis. To do this, I used the Z position as a circle's radius, and derived approximately how many pixels of movement each degree of rotation along the X axis represented. Once I found that new value, I'd do the calculations again for the Y rotation. To cut down on per-frame math, I figured out the z-position relative to X rotation immediately, and stored it since it wouldn't change. I only did the position relative to Y when needed. Also, I only approximated the Z position by dividing the diameter values by 180 (or, multiplying by 0.005555555556, which is faster and results in the same value), instead of mucking about with the position along the arc. It wasn't exact, but it was a good enough value to sort on. once I had the relative position, Discs that were relatively "closer" to the viewer were then sorted to appear in front of ones that weren't. This involved iterating through the discs to change their Y rotation, sorting the disc array on their derived relative value, and re-iterating to do the stacking. Not great, performance-wise, and still a little jumpy at the poles, but it worked.

To make the stacking appear smoother I ensured that "closer" discs that had an initial maximum Z position were always stacked in front, of other discs, then worked back until the "farther" maximum Z discs were sorted to the back.  Next, I made the entire sphere "follow" the mouse. I did this by calculating the angle of the line from the mouse's position and the center of the sphere relative to the x-axis (non-trivial math, to be honest -- at least for me) and rotating the entire sphere around its Z-axis to make the disc's Y rotation move towards the mouse.

This looked fairly good to me. Then I went back to Grant's sphereTest and noticed that his sphere wasn't roting along the Z-axis. Each individual disc simply moved towards the mouse regardless of it's position relative to the Y-axis "pole". It was as if the sphere's Y-axis was moving independently of the discs. Actually, it looked as if they were moving around fixed X and Y axes simultaneously. But using each disc's rotationX and rotationY attributes meant the discs' X-axes were all over the map. My initial thought on how to emulate this behaviour was, oddly enough, quite complex. I thought that I would need rotate the sphere towards the mouse around its Z-axis; then correct that Z-rotation by moving the discs in the opposite direction around their own z-axis; then spin the entire sphere around it's own y-axis. Once that was done I'd need to calculate the relative Z of each disc based not only on their internal rotations, but on also on the sphere's rotations as well.

In short, a metric shit-load of math.

For each disc.

For every frame.

Not good.

Then I found the 3DMatrix object in Adobe's Flash CS4 documentation; Swore out loud; and threw out most of my work to this point. I'll let you know what I replaced it with in my next blog post.

Tags: , ,
2009.12.14 12:00 PM | Permalink 0 Comments

Recreating Grant Skinner's sphereTest Part 1 — how 3D rotation in Flash treats each axis differently

A few months back, Flash guru Grant Skinner tweeted about a "little" sphereTest he had been working on while playing with the new 3D rotation api in Flash Player 10. He has since added several variations to it, but I thought it would be a fun exercise to try an re-create the original demo, for my own edification. Here is the first part of my journey.

So I initially just created a bunch of discs at equidistant points from the center; randomly rotated them along the X and Y axes; and started incrementing those rotation values over time. Weird stuff happened. things moved in bizarre directions. I did the same with the X and Z axes. More weird stuff. Y and Z. Even more. I tried putting the discs on different axes. Still more weirdness.  Obviously I needed to understand how 3D rotation worked. So I built the following test harness to better understand the interactions between each axis.

The interface is a little clunky (it IS a test harness, after all) but essentially it works thusly: given three different sets of discs — initially positioned out on either the X, Y, or Z axis — you can randomly rotate these discs along one or more axis, and then increment the rotation value along one of those axes. Randomizing or reseting initial rotation positions will stop and recenter each sphere.

After playing with this for a while, I realized what was happening. The X axis is the runt of the litter. Rotating an object along the X axis has no affect on the position of the other axes, but rotating the along the Y and Z axis also rotates the relative position of the X axis in space. Also, rotation along the Y axis doesn't affect the position of the Z axis, but the Y axis is rotated with changes to the Z Axis rotation.

All that to say, if I was to recreate Grant's sphereTest, I would most likely need to initially position the discs along the Z axis, randomize around the X and Y axes, and incremently rotate along the Y and Z. But how, exactly t do that wasn't exactly easy. More on that in the next posts.

Tags: , ,
2009.12.09 11:11 AM | Permalink 0 Comments