A Preview of 3d Layout Organizers

A while back, I published some work on AS3 layout organizers. The basic premise was to use virtual “containers” of a collection of DisplayObjects to create special layouts, such as a grid or ellipse. The project turned out to be quite enjoyable and I have used this library for almost every project I have worked on since I wrote it. With Flash 10’s introduction of 3d, it seemed appropriate to branch out these organizers into their 3d counterparts. In addition, I have spent a considerable amount of time re-writing a large portion of the core code to make it easier to use and more efficient. I was hoping to release the code in this post as well, but it just is not quite there yet. So, consider this a preview of the revamped library.

Update: This code base has now been released under the name coordy. Read more.

For more details on the basic premise of how this library works, make sure to read my previous post on this library. Really, nothing in the nuts-and-bolts has changed. Essentially, collections of DisplayObjects are managed by light objects that update the position of each DisplayObject. Now, with Flash 10’s 3d properties, I am merely adding the Z property to these new organizers. Papervision is a wonderful library to have at your disposal, but sometimes you just don’t need something that complex to create a simple thee dimensional grid or ellipse.

Below is a small preview of the three main layout organizers built at the moment. I am confident this list will be at least double by the time it is released, but I just wanted to give you an idea of what is to come. For a better experience, view the larger version.

You need Flash Player 10 to view this demo.

For presentation purposes, I set a small x,y,z rotation to the parent of the DisplayObjects so you could see the grid more clearly. However, the rotation (x,y and z axes) of the ellipse is computed entirely within the organizer — meaning the parent of all the objects does not need to be rotated for the effect. I am trying to figure out the math to do this within the grid and scatter organizers, but at this moment, it is a little beyond me. You may also notice that the organizers seem a little “sloppy” when randomizing the layout. That is because I have added a jitter property for each axis to allow a more random/organic feel. Both the 2d and 3d libraries now have jitter controls.

This whole library, along with the updated 2d organizers are going to be made available on Google Code when they are a little closer to completion. The 2d library has a much larger list of organizers at this point and, as expected, performs much better than its 3d cousin. I would love to get some help in taking this library further if anyone is interested. There are a few foundational issues that would be great to resolve. Let me know if you are interested.

4 thoughts on “A Preview of 3d Layout Organizers”

  1. Looks really cool, I’ll definitely be interested in checking it out… The 2d version just as much as the 3d really… It would be cool if there was a version of the 3d code which just worked on abstract points so that it could easily be used alongside any 3d library where other more advanced 3d effects were to be used alongside…

  2. That’s actually how it works, the organizer creates links between it and the display object. If you want to, you can turn off automatic updates – by doing so, the links will continue to get the x,y,z coordinate updates, which you can then access and do whatever you want with it.

  3. Perfect! I guess I shouldn’t have skim read the post… That’s what comes of trying to catch up on RSS in your lunch break. The system looks really cool and could be a lot of fun to play with for some datavisualisation (not to mention search/ filtering stuff on product sites). Looking forwards to the release 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *