www.perkstoveland.com

the Rubiks Cube

Earlier this year I had the time and opportunity to play around with Away3D. I was asked if I was able to make a digital 3D version of the Rubiks Cube. I was of course up to the challenge! Up until then my only experience with 3D in ActionScript was the PaperVision3D library, but with Ralph Hauwert leaving the PaperVision team last year, I thought it might be wise to learn a library that still has a dedicated team.

One note I would like to make is that Away3D rocks! It is, in my view, much more intuitive, responsive, and less bug-ridden than PaperVision.

The actual 3D part of this project was done relatively easy. Most of the credit for that is mainly the Away3D library. Like i mentioned it is quite intuitive and consistent to use. The mechanics of rotation in 3D space, however, proved to be quite taxing on my intellect. The biggest issue i stumbled upon, and which had me stuck for about four days, is what is a known phenomenon in aeronautics and spacecraft. It is called The Gimbal Lock. Basically, what it breaks down to is, when you rotate an object enough times in 3D space, you will at one point experience that two of the three axis on which you rotate (x-, y-, and z-axis ) will lock together. What this means is that when you rotate on one of these two axis, with the same amount of degrees, you will get the same effect regardless of which one you chose to rotate on. Put in another way, you loose an axis to rotate on, and only have two axis to utilize. I am proud to say, that i was actually doing rocket science

After four tedious days, delving into this problem, i found the solution. Instead of using the normal Euler Angles to rotate, i had to introduce Quaternions. They work in the same way as vectors do. A quaternion describes one rotation relative of the starting point. Using this method to rotate we avoid the gimbal lock problem altogether, since next time we want to rotate the same object just add a new quaternion, that describes the total amount of rotation needed relative to its new position.

To try out the rubics cube, click here or the image above. Enjoy!

Popularity: 100% [?]

Using multiple
AS2 YouTube Chromeless
players in AS3

Since YouTube still haven’t made a player for AS3, and a project I have been working on demanded the use of multiple players in the same AS3 context, I had to sit down and create my own solution. I of course did some google’ing first to see if this problem had been solved already. All I found of importance was TubeLoc and *drawlogic’s players. Both of them use either LocalConnection or ExternallInterface calls to communicate with the AS2 player. None of them however can use multiple players since the communication breaks when the second one is instantiated.

They way i solved it was using Grant Skinner’s SWFBridge classes. I first made an AS2 wrapper swf, which uses the SWFBridgeAS2 class, and exposes the YouTube chromeless player api so that we can call all the YouTube method calls from the SWFBridgeAS3 class. But for the possibility of using multiple instances of the player, the LocalConnection used in Grant’s classes need a unique id for each player. The Display class i made takes care of this behind the scenes. All you need to do is supply the url to the AS2 youtube wrapper when you instantiate the class, and you’re good to go:

       // Import the class
       import com.perkstoveland.youtube.Display

       // Create the player
       var wrapperURL:String = "http://www.domain.com/youtubewrapper.swf";
       var youtubeDisplay:Display = new Display( wrapperURL );

       // Lets do something with the player
       youtubeDisplay.cueStartUpVideoById( "XtCW-axRJV8" );
       addChild( youtubeDisplay );

Thats all the code you need. You can instantiate as many times as you want, the same way. All you need to do now is create the GUI. You can see an example here (updated 16.05.09), and download the source for it here (updated 16.05.09).

Last month i had a talk at FUGN where i presented this. You can download the keynote as pdf here (in norwegian only).

Update 16.05.09

I finally got round to adding to the player functionality. Now it is wrappiing all the functions of the AS2 player. You use the same api calls as the AS2 version, but the way the getter methods work is slightly different. Since LocalConnection is asynchronous, meaning AS2 can’t return values directly to AS3, we instead add a listener before you make the call as normal, and the result will come back through the listener handler. Here is an example:

       // Import classes.
       import com.perkstoveland.youtube.Display;
       import com.perkstoveland.youtube.events.DisplayEvent;

       var wrapperURL:String = "http://www.domain.com/youtubewrapper.swf";
       var youtubeDisplay:Display = new Display( wrapperURL );
       youtubeDisplay.addEventListener(
                          DisplayEvent.VIDEO_BYTES_LOADED_RECIEVED,
                          onBytesLoadedReceived );

       youtubeDisplay.getVideoBytesLoaded();

       function onBytesLoadedReceived( $e:DisplayEvent ):void
       {
              trace( $e.bytes );
       }

Keep in mind that there are now some public methods in Display.as that aren’t ment for you to call. These are public so that the wrapper is able to return the requested information by method calls via LocalConnection. As a rule of thumb, stay away from all public methods that start with “on” in their name. My next project will be to create a GUI for the player and at the same time encapsulate the off-limit public methods i just mentioned. When i get the time…

You can get the updated version here.

After request i have put up a link where you can download the fla file for the AS2 youtube wrapper. You shouldn’t need to modify it to make you app work, as most likely the fault would be outside the wrapper. Anyways, you can download it here

Popularity: 37% [?]

Flash Augmented Reality
demo

The last couple of months i have been meaning to read up on the FLARToolkit created by Saqoosha. I never got around to doing much with it until Lee Brimelow posted a very helpful tutorial on the basics of using the tool kit. There is quite a few things to keep in mind when doing this, so i wanted to create a class that took care of the FLAR stuff, which i then could just extend and start adding some Papervision3D objects to the stage. What you see below is a rough demo to show that is works, and i will be releasing the code as soon as it is ready. My goal is to make a class that people can just extend and never have to touch any FLAR code, but rather start creating the 3D objects that are to be manipulated.

Stay tuned!

Popularity: 6% [?]

AS3 Sound Spectrum
Analyzer

A couple of weeks ago i wanted to try out working with sound. I done little more with sound other than loading mp3s and playing them. I wanted to make a sound visualizer…

..well I did! And id like to share it with you. Getting the actual snap shot data of the sound spectrum was the easy part. The tricky part was in fact making some cool graphics. Below you can see a screenshot of the visualizer, and here is the link to the actual visualizer.

Download source files here.

Popularity: 20% [?]