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% [?]

playing with
canvas

So, how long has it been? A few months one could say, or almost a year (!!). Well, earlier this year i was privileged to be employed by, what i would say, is the most exciting and promising interactive design firm in Oslo. Heck, in Norway. Jimmy Royal. Anyways, lets get on to the post!

Click the image, and start drawing!

Lately Flash has been the focus of some quite hefty debates. I won’t go into detail about this, just google “flash vs html” and you’ll probably find alot about the subject. While I am quite confident that it will take quite some time before Flash is phased out, if it becomes phased out at all, I decided I wanted to check out the some html5 capabilities, especially the canvas tag. After some research, i realized that drawing on the canvas is remarkably similar to the Graphics class in AS3. So here is my canvas project, just start drawing! Click “view source” on your browser to see the JavaScript that does the magic.

Popularity: 2% [?]