When creating a site with dynamic content, I always try to fully digest the designs before I start writing a line of code. I want to extract the rules and systems found in the design and convert them into code that can make the development process easier and more streamlined.

In the case of the Daffy's site, the composition was different for each section, but there was a common thread across all of them. The rules are simple, a group of rectangles are positioned relative to one another with a constant padding between them. Content would be added and removed, and each change would affect the visual composition of the site based on these rules.

I created a simple XML structure that defines a relationship between two objects by their anchor points and x/y spacing. Think of it as a non-linear linked chain. In the example XML below, rectangle B’s top-left corner is relative to the rectangle A’s bottom right corner. The offset node translates (x/y) the relative position.

The XML establishes the abstract relationships in the chain. By assigning an actual view (i.e., MovieClip) to each link in the chain, I could use the size data (concrete) in combination with the relationship data (abstract) to find the coordinates I needed to position the elements.

This linkage system is used on every single section of the site. In some cases, rectangles are shared across multiple systems, like when transitioning from the homepage to an interior section, the menu block is transferred from the homepage system to that of the incoming page.

Now when I want to add a new section, all I need to do is write an XML file. Form follows function.

Below is a very simple example of the linkage system in action. Roll over the rectangles and drag the corners to change their size and see the relationships. Click “Show/Hide XML” below to toggle the associated XML, which is color-coded to the rectangles in the example.

Show/Hide XML

Tweet This Post 

Working with the geometry of an object in Papervision3D can be a very daunting task; in order to do it you need an intimate knowledge of the object’s mesh structure (triangles, vertices, uvs). Instead of explaining the parts of an object's geometry here, check out this excellent post.

Starting with the basic primitives, I created a utility class that dynamically adjusts the UV texture mapping of an object. So far there are only methods for the Plane and Cube primitives. For the Cube, you can isolate individual sides (i.e., Cube.FRONT). The class takes into account the respective mesh structures of the primitives (number of segments, triangle order) to properly adjust the UV coordinates.

You can now very simply adjust the UV mapping of a Plane using the code below:

and for a Cube:

The Rectangle parameter represents the area of the original texture that you want to be drawn, where the values are between 0 and 1. This is similar to the Rectangle’s usage in the BitmapData.draw() method. So the rectangles in the code above will display the top left quadrant of the texture; alternatively, new Rectangle(.5, .5, .5, .5) would display the bottom right quadrant.

By manipulating the UV coordinates, you can minimize the number of materials and bitmaps that you use in your project. Instead of creating multiple bitmaps/materials, you can use a single one for multiple objects, adjusting the UV mapping to vary the texture. In the Pearl Jam site, all 100 cubes use a single BitmapData and a single BitmapMaterial, providing a huge performance boost. It can also be used for basic texture animations (translation, zoom, etc.), by animating the rectangle’s properties and applying the new UV coordinates each render.

One cool trick is to supply negative numbers in the Rectangle object. You can get a “doubleSided” effect on an object, displaying a mirror image of the texture, by using new Rectangle(0, 0, -1, 1). In Pearl Jam, the underside of the cube is using the same material as the top, but with reverse UV mapping.

Imported models and other custom meshes will require more specific manipulation of the UV coordinates. However, using the Plane and Cube examples, this class can easily be expanded to work with the other primitives (Sphere, Cylinder, and Cone.)

Whoops. Download the class here.

Tweet This Post 

March 31, 2009: It's up! Check out the interview on the FWA. Below are a selected bunch of the questions.

Q. What do you do for inspiration?

Absolutely nothing. Really. I just hope it finds me when I’m not looking, and that’s usually when I get my best ideas. I was once told that your ideas aren’t yours at all. That is, an original idea never comes out of thin air; it’s always influenced by something or someone else, whether or not you’re consciously aware of it. So when I have a problem to solve, I sit back, and let my brain do the work for me.

Q. What do you regard as being your biggest achievement?

During my sophomore year in college, I visited some web design shops on a class fieldtrip—they were firstborn, The Chopping Block, Organic, and a few others. A couple years later when I moved back home and unpacked my stuff, I found a business card with the name Vas Sloutchevsky on it. I tacked it on the wall above my desk, as a reminder of the kind of work I wanted to be doing.

Fast forward a couple years and I’m working side by side with Vas and many of the interactive pioneers I visited that day on the field trip. To me, that’s a humongous personal achievement. Hopefully I’m doing the kind of the work that had inspired me in the first place.

Q. What did your very first site look like? Is it still online?

I’ve noticed that most interviewees evade this question, but I’m quite proud of how Flash and I first met. Let me tell you a story…

It was the summer of 2000 and I was interning at a dot-com-startup called M2card, an online-centered debit card for teenagers. Based on the timeframe you can probably guess as to the company’s eventual fate. I was just a general intern, helping with market research and other fun stuff. Their website was in development by a little company called Organic, and was using this new, cutting edge “Flash” technology. And it wasn’t going to launch for another 3 months. So I asked if I could take a crack at designing an interim website. I did a few comps, they chose a direction and agreed to let me do it. Then I said I wanted to make it in Flash, but they told me it was too ambitious. Little did they know that I had downloaded the Flash 4 trial the day before.

Long story short, I end up wiggling my way into Flash and finishing the web site before the trial expired. They eventually bought the software and some books so the tech guys could catch up. It turned out to be good for everyone involved. I had an opportunity to dive into Flash for the first time, and the company received press for their website literally being “designed by a teenager, for teenagers.”

Thanks for listening, here it is: http://www.briankadar.com/fwa/m2card/

Q. Have you written any books, if not do you plan to?

I recently worked with a great developer who is an author of an AS book. I helped him out with something and jokingly asked for a 20% cut of his next book. He replied, “You may be disappointed at the numbers.”

Q. What was the toughest thing you ever did with Flash? How long did you spend on it? Is it still online?

About a year ago, I worked on a website that was an ambitious data visualization of the entire bible (in 3d, of course). Heavy stuff. Unfortunately, the client got in the way of six months of hard work and it never quite made it. The Starter Wife website was a huge undertaking, an ambitious 3d virtual world built on top of NBC’s very beta social networking backend—that was a big lesson on working with The Man.

Q. Do you think Flash is here to stay?

Not sure. This Web 2.0 (3.0…n.0) stuff is very scary for a Flash developer. Some days I think we’re toast, and every now and then you’ll see a flash site that makes a great argument for the cause. Much of the criticism of Flash comes from it being pigeonholed as annoying banner ads, and chronic misuse. When Papervision3D first broke out, there were 4,239 sites with floating rectangles, followed by 2,317 sites with a 3d globe, preceded by 1,415 sites with turning pages. I swore I’d never use it. But those are the growing pains of new technology; eventually we find ways to take something from a cool trend to a powerful tool. It’s a matter of pairing ideas with the right technology, which may or may not always be Flash (yes, it’s true)—but when it is, nothing comes close, is as exciting, or is as pervasive on the web. Except for Silverlight.*

Q. What are your views on design/graphic school. Do you think someone can get into the field without educational experience in a school environment?

Going to design school does not necessarily make you a designer. This field is multidisciplinary—a blend of art, mathematics, science, sociology. I think that in order to be great you need a working knowledge of all of these things; a well rounded education should make you a better problem solver. I grew up having competing interests and in the arts and sciences, so spending time in each gave me a rich arsenal for interactive work.

Q. How have you learned so many Flash/design skills and techniques and can you offer any advice for newbies?

It takes a long time to be good and even longer to be great; you should start now because it’s a constant game of catching up. By the time I finish writing this interview someone will have figured out a way to turn baseball cards into 3d games. Damnit. It’s the challenge of executing ideas, in tangible form, that makes the field so exciting. But one thing that helps me sleep at night is that the greatest work does not require the latest technology—it’s when the design and technology combine to make the whole greater than the sum of its parts. 1+1=3.

Q. What is the most expensive thing you have bought in the last week?

New York Mets tickets, many of them. Anyone who follows baseball will see that I do not invest wisely.

Tweet This Post 

Part of the inspiration for this idea is from one of my favorite commercials of all time—HP Digital Crime Fighting by Goodby, Silverstein & Partners. The cursor is executed so stunningly that it becomes another actor (if not the lead) in the spot. The element of surprise is guaranteed every time—that thing we use to point and click is suddenly alive and breathing.

Last fall, digitalpictures created a handcursor in 3d space for saveyoursensible.com, one of the first implementations of its kind. However, the cursor was only 3d when the mouse was pressed and touching one of two objects. Moving around, between, and over the objects was still a 2d experience.

The area between objects is exactly the conundrum. The traditional mouse gives us an absolute x and y position, and it’s up to us to find the z/depth. When there’s a 3d object under the cursor, we have a point of reference to find the z position. When there’s nothing there, the result is infinite—literally. Take the analogy of shining a flashlight, you can only see the beam when there is an object in its path, otherwise it disappears into thin air.

My solution to the empty space is, well, to put something in it! I created an invisible sphere that surrounds the entire site—let’s call it a “forcefield” (I’ve never watched an episode of Star Trek in my life, by the way). Now when the cursor moves between the visible objects, it is technically “hitting” something, giving us that elusive z position.

Okay, now back to when the cursor is actually over the objects. To get that “touch” feeling, it needs to react to the shape of the object. For basic primitives like cubes and spheres that have square proportions, the DisplayObject3D.lookAt() method does the trick. Since the lookAt method always orients the mouse towards the origin, it gives the illusion of the cursor hugging around the corners and sides of the cubes on the site.

For objects with irregular and elongated shapes, the lookAt() illusion does not hold up as well—as you move farther from the object’s origin, the cursor plane turns perpendicular to the object. In this situation, there are a couple of options. The first, less elegant solution would be to surround the object itself in one or more invisible bounding spheres that approximate its general size and shape, making the angles less severe.

The second, and more accurate, solution would be to orient the cursor to the normal of the hit Triangle3D. Using the transform object from the core Mouse3D class is a good start, but I found the results to look a little strange and unnatural.

Since the forcefield sphere is surrounding the objects, the 2d to 3d hit test will always return a position on the sphere and never on any of the objects inside of it. So in order to know when the cursor is over one of these objects, we create a ViewportLayer for each object and listen to its mouse events. When a layer is rolled over, we set the interactive property of the forcefields sphere’s material to false. When no layer is rolled, we set it back to true. I added some subtle easing to the cursor position, which helps the transition between hitting the forcefield and the other objects.

Here is the basic usage:

Now that the basic logic is in place, there are a few more things that you can do to emphasize the effect. In the site and example here, the cursor gets the same fog treatment as the rest of the objects, a nice visual indicator of its position in z-space. Also, by toggling the ViewportLayer.forceDepth property, the cursor is always above the objects when hovering, but is sorted normally when it is locked in position and dragging.

Downlod the demo source here. The class is far from perfect, but is a good start for developers looking to expand on the idea.

Note: There is some funkiness when your mouse leaves the stage and comes back. It eventually resolves itself, but I'm looking into it.

Tweet This Post 

There’s something very tangible about this design. It takes 3d on the web from a passive experience to a participatory sport, challenging the user to experience a website hands-on. The elements are incredibly simple—when you break it down it’s just basic geometry—but it’s engaging, and that’s the beauty of it.

That’s not to say that it’s easy for everyone to use. It’s a tough mental exercise to use your mouse, which only moves up, down, left and right (problem somewhat solved, I think), to truly interact in 3d space—and all while trying to solve a puzzle. So the challenge was to make the site tactile and intuitive, and I think we succeeded in doing both. I added things like the 3d hand cursor that helped position the user in the 3d space and give a more physical feeling to the experience.

Nevertheless, it’s still fucking hard—but that’s a good thing, and you get rewarded along the way with a bad ass visualizer. The average time of the site is out of this world, people are spending 30, 45 minutes, an hour on the site. Yes, some Pearl Jam fans will do anything to sneak a peek, but it shows that users are accepting the challenge of a new kind of online experience. Armando Alves (@armandoalves) wrote up a nice piece about the site, suggesting that the current online generation is expecting higher levels of engagement on the web. To be honest, I was a bit surprised by the positive reaction of hardcore PJ fans… Here’s a snippet that only gets better…

…here's the thing. The whole thing hovers in this trippy 3-dimensional space that you can rotate any which way with your mouse, so you can actually see the board and the puzzle pieces from virtually any angle. If you were so inclined, and this is not necessarily condoned by MamaPop, Pearl Jam, or this article's author, BUT... IF you were inclined to smoke a little pot before playing the Pearl Jam Ten Game, I'd be willing to bet that you might pass a nice chunk of time…

I got to work side by side with Vas Sloutchevsky, who designed the site and is one of the founding fathers of interactive design as we know it. A lot of designs come from excuses to use a certain technology, and that’s where fads arise. Vas treats things differently, and embraces the latest technologies (in this case, 3d) as tools to better display information and create more interesting interactions. By doing that, his designs become inevitable—neither the technology nor the design could exist without the other. Same goes for Pearl Jam, he didn’t design with Papervision3D in mind, but it seems as if Papervision3D was designed for it. Nothing is out of place. Inevitably, this deserves a post in and unto itself.

That sense of inevitability between the design and technology made the development process really exciting, and surprisingly fast. Of course, I had a little help from my friends to get it off the ground—and hopefully I can return the favor in short order. I had one month to finish the site (lucky for me, that month was February, the shortest of them all). Here is prototype numero uno. In my next posts I’ll be sharing some of the behind-the-scenes ideas and source code that I think you’ll find very useful.

And if you're wondering what I'm talking about: rock on.

Tweet This Post